From b3cae57bcf07d4c4dc1fa7bbb91b5473021a478d Mon Sep 17 00:00:00 2001
From: eller <23046078+ellermister@users.noreply.github.com>
Date: Thu, 5 Sep 2024 08:09:43 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=8C=20Optimze=20progress=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/VideoController.php | 22 +++++-
 resources/js/App.vue                     |  1 -
 resources/js/components/Image.vue        | 12 ++-
 resources/js/main.ts                     |  4 -
 resources/js/pages/ProgressView.vue      | 94 ++++++++++++++++++++----
 resources/views/welcome.blade.php        |  1 -
 6 files changed, 105 insertions(+), 29 deletions(-)

diff --git a/app/Http/Controllers/VideoController.php b/app/Http/Controllers/VideoController.php
index 2b9d9f5..8eacdea 100644
--- a/app/Http/Controllers/VideoController.php
+++ b/app/Http/Controllers/VideoController.php
@@ -32,12 +32,27 @@ public function progress()
         $downloaded = redis()->hlen('video_downloaded');
 
         $list = [];
+        $stat = [
+            'count'      => count($keys),
+            'downloaded' => $downloaded,
+            'invalid'    => 0,
+            'valid'      => 0,
+            'frozen'     => 0,
+        ];
         foreach ($keys as $vKey) {
             $result = redis()->get($vKey);
             $vInfo  = json_decode($result, true);
             if ($vInfo) {
                 $vInfo['downloaded'] = !!redis()->hExists('video_downloaded', $vInfo['id']);
-                $list[]              = $vInfo;
+
+                $vInfo['invalid'] = video_has_invalid($vInfo);
+                $vInfo['valid']   = !video_has_invalid($vInfo);
+
+                $list[] = $vInfo;
+
+                $stat['invalid'] += $vInfo['invalid'] ? 1 : 0;
+                $stat['valid'] += $vInfo['valid'] ? 1 : 0;
+                $stat['frozen'] += $vInfo['frozen'] ? 1 : 0;
             }
         }
 
@@ -49,9 +64,8 @@ public function progress()
         });
 
         $data = [
-            'count'      => count($keys),
-            'downloaded' => $downloaded,
-            'data'       => $list,
+            'data' => $list,
+            'stat' => $stat,
         ];
 
         return response()->json($data, 200, [], JSON_UNESCAPED_UNICODE);
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 726044a..1e6c13c 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -23,7 +23,6 @@
 </template>
 
 <script lang="ts" setup>
-console.log('fffffffffffffff')
 </script>
 
 <style scoped>
diff --git a/resources/js/components/Image.vue b/resources/js/components/Image.vue
index 746823c..d89e46d 100644
--- a/resources/js/components/Image.vue
+++ b/resources/js/components/Image.vue
@@ -1,8 +1,8 @@
 <template>
-    <img ref="imgEle" :src="src" :alt="props.title" @visible="visible">
+    <img ref="imgEle" :src="src" :data-src="props.src" :alt="props.title" @visible="visible">
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 const imgEle = ref<HTMLImageElement | null>(null)
 const src = ref('')
@@ -14,13 +14,19 @@ const props = defineProps<{
     title: string
 }>()
 
+
+watch(props, ()=>{
+    if(src.value != "" && props.src != src.value){
+        src.value = props.src
+    }
+})
+
 const visible = () => {
     src.value = props.src
     if (imgEle.value instanceof HTMLImageElement) {
         observer.unobserve(imgEle.value)
     }
 }
-
 onMounted(() => {
     if (imgEle.value instanceof HTMLImageElement) {
         observer.observe(imgEle.value)
diff --git a/resources/js/main.ts b/resources/js/main.ts
index 2550fb0..f6b99f8 100644
--- a/resources/js/main.ts
+++ b/resources/js/main.ts
@@ -2,14 +2,10 @@
 
 import { createApp } from "vue";
 
-// import ExampleCounter from "./components/ExampleCounter.vue";
 import router from './router';
-import Image from "@/components/Image.vue";
-
 
 import App from "./App.vue";
 
-console.log('Image', Image)
 
 const app = createApp(App);
 
diff --git a/resources/js/pages/ProgressView.vue b/resources/js/pages/ProgressView.vue
index 04f776c..26887a8 100644
--- a/resources/js/pages/ProgressView.vue
+++ b/resources/js/pages/ProgressView.vue
@@ -1,21 +1,52 @@
 <template>
     <div value="w-full flex justify-center	">
-        <div class="container  mx-auto justify-center p-4 md:p-16" id="main">
+        <div class="container  mx-auto justify-center " id="main">
             <div class="m-4">
-                <h1 class="my-8 text-2xl">
-                    <RouterLink to="/">🌸</RouterLink> progress {{ $route.params.id }}
-                </h1>
-                <h2 class="text-xl">下载进度 {{ progress }}% ({{downloaded}}/{{ count }})</h2>
+                <div class="flex justify-between">
+                    <h1 class="my-8 text-2xl">
+                        <RouterLink to="/">🌸</RouterLink> progress {{ $route.params.id }}
+                    </h1>
+                    <h1 class="my-8 text-2xl">
+                        <RouterLink to="/horizon" target="_blank">🔭</RouterLink> 查看任务
+                    </h1>
+                </div>
+                <h2 class="text-xl" title="如果你的收藏夹中出现了无效视频那么就会低于100%">缓存的视频率 {{ progress }}% ({{ stat.downloaded
+                    }}/{{ stat.count }})</h2>
+
+
                 <div class="my-8 w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-                    <div class="bg-blue-600 h-2.5 rounded-full" :style="{width: progress+'%'}"></div>
+                    <div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: progress + '%' }"></div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-4 w-full my-4 ">
+                    <div class="flex flex-col text-center text-white bg-blue-400 hover:bg-gradient-to-r from-purple-500 to-pink-500  py-4 rounded-l-lg"
+                        :class="{ 'bg-gradient-to-r': filter.class == null }" @click="filter.class = null">
+                        <span class="text-2xl" title="你所有收藏的视频数">所有视频</span>
+                        <span class="text-xl font-semibold">{{ stat.count }}</span>
+                    </div>
+                    <div class="flex flex-col text-center text-white bg-blue-400 hover:bg-gradient-to-r from-purple-500 to-pink-500 py-4"
+                        :class="{ 'bg-gradient-to-r': filter.class == 'valid' }" @click="filter.class = 'valid'">
+                        <span class="text-2xl" title="目前仍可以在线观看的视频">有效视频</span>
+                        <span class="text-xl font-semibold">{{ stat.valid }}</span>
+                    </div>
+                    <div class="flex flex-col text-center text-white bg-blue-400 hover:bg-gradient-to-r from-purple-500 to-pink-500 py-4"
+                        :class="{ 'bg-gradient-to-r': filter.class == 'invalid' }" @click="filter.class = 'invalid'">
+                        <span class="text-2xl" title="收藏的视频无效被下架">无效视频</span>
+                        <span class="text-xl font-semibold">{{ stat.invalid }}</span>
+                    </div>
+                    <div class="flex flex-col text-center text-white bg-blue-400 hover:bg-gradient-to-r from-purple-500 to-pink-500 py-4 rounded-r-lg"
+                        :class="{ 'bg-gradient-to-r': filter.class == 'frozen' }" @click="filter.class = 'frozen'">
+                        <span class="text-2xl" title="当你收藏的视频缓存了之后, 如果视频被删除下架那么就会将该视频归纳为冻结">冻结视频</span>
+                        <span class="text-xl font-semibold">{{ stat.frozen }}</span>
+                    </div>
                 </div>
 
+
                 <div class="mt-4 grid grid-cols-1 md:grid-cols-4 w-full gap-4">
-                    <div class="flex flex-col relative" v-for="item in videoList">
+                    <div class="flex flex-col relative" v-for="item in dataList">
                         <RouterLink :to="{ name: 'video-id', params: { id: item.id } }">
                             <Image class="rounded-lg w-full h-auto md:w-96 md:h-56" :src="image(item.cache_image)"
-                            :class="{'grayscale-image': !item.downloaded}"
-                                :title="item.title" />
+                                :class="{ 'grayscale-image': !item.downloaded }" :title="item.title" />
                         </RouterLink>
                         <span class="mt-4 text-center">{{ item.title }}</span>
                         <span class="text-sm">发布时间:{{ formatTimestamp(item.pubtime, "yyyy-mm-dd") }}</span>
@@ -31,27 +62,58 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import Image from '@/components/Image.vue';
 import { formatTimestamp, image } from "../lib/helper"
 const videoList = ref([])
-const count = ref(0)
-const downloaded = ref(0)
 const progress = ref(0)
 
+const stat = ref({
+    count: 0,
+    downloaded: 0,
+    invalid: 0,
+    valid: 0,
+    frozen: 0,
+})
+
+const filter = ref<{
+    class: null | string
+}>({
+    class: null
+})
+
+
+const dataList = computed(() => {
+    return videoList.value.filter(i => {
+        if (filter.value.class == null) {
+            return true
+        }
+
+        if (filter.value.class == 'invalid' && i.invalid) {
+            return true
+        } else if (filter.value.class == 'valid' && i.valid) {
+            return true
+        } else if (filter.value.class == 'frozen' && i.frozen) {
+            return true
+        }
+
+        return false;
+    })
+})
+
 fetch(`/api/progress`).then(async (rsp) => {
     if (rsp.ok) {
         const jsonData = await rsp.json()
         videoList.value = jsonData.data
-        count.value = jsonData.count
-        downloaded.value = jsonData.downloaded
-        progress.value = parseInt((downloaded.value / count.value *100).toFixed(2))
+        stat.value = jsonData.stat
+
+        progress.value = parseInt((stat.value.downloaded / stat.value.count * 100).toFixed(2))
     }
 })
 </script>
 
 <style scoped>
 .grayscale-image {
-  filter: grayscale(100%) brightness(80%);
+    filter: grayscale(100%) brightness(80%);
 }
 </style>
\ No newline at end of file
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index a02fa7f..3ccbf9a 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -9,7 +9,6 @@
     </head>
     <body>
         <div id="app">
-            <example-counter></example-counter>
         </div>
     </body>
 </html>