🌌 Optimze progress page

ellermister · Sep 5, 2024 · b3cae57 · b3cae57
1 parent 7b550a9
commit b3cae57
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
diff --git 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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,6 @@ @@
         </head>
         <body>
             <div id="app">
-                <example-counter></example-counter>
             </div>
         </body>
     </html>