🎍 播放界面添加遮罩

src/assets/scss/theme/dark.scss

@@ -1,5 +1,8 @@
 .theme-dark{
   background-color: var(--d-bgc-1);
+  .xgplayer-skin-default video{
+    background-color: var(--d-bgc-2);
+  }
   .el-pagination{
     background-color: var(--d-bgc-1);
     color: var(--d-fc-1);
@@ -283,6 +286,10 @@
         }
       }
     }
+    .play-mask{
+      background-color: var(--d-bgc-1);
+      color: var(--d-fc-1);
+    }
   }
   .star{
     background-color: var(--d-bgc-1);

src/assets/scss/theme/light.scss

@@ -1,5 +1,8 @@
 .theme-light{
   background-color: var(--l-bgc-1);
+  .xgplayer-skin-default video{
+    background-color: var(--l-bgc-2);
+  }
   .el-pagination{
     color: var(--l-fc-1);
     .el-pagination__total, .el-pagination__jump, .el-input__inner{
@@ -274,6 +277,10 @@
         }
       }
     }
+    .play-mask{
+      background-color: var(--l-bgc-1);
+      color: var(--l-fc-1);
+    }
   }
   .star{
     background-color: var(--l-bgc-1);

src/components/Play.vue

@@ -92,6 +92,7 @@
         </div>
       </div>
     </transition>
+    <div class="play-mask" v-if="right.listData.length === 0 && right.historyData.length === 0">{{$t('no_history')}}</div>
   </div>
 </template>
 <script>
@@ -230,6 +231,9 @@ export default {
             this.video.index++
           }
         })
+        this.xg.on('error', () => {
+          console.log('play error')
+        })
       }).catch(err => {
         this.$m.error(err)
       })
@@ -381,6 +385,9 @@ export default {
   },
   mounted () {
     this.xg = new Hls(this.config)
+    history.all().then(res => {
+      this.right.historyData = res
+    })
   }
 }
 </script>
@@ -485,5 +492,18 @@ export default {
     transform: translateX(100%);
     opacity: 0;
   }
+  .play-mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 900;
+    display: flex;
+    font-size: 14px;
+    border-radius: 5px;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

src/locales/en.json

@@ -43,5 +43,6 @@
     "not_support_search": "Search is not supported on this site.",
     "copy_success": "has been copied, Download it now",
     "async_failed": "Synchronization successful, no updates found.",
-    "async_success": "Synchronization succeeded, update found."
+    "async_success": "Synchronization succeeded, update found.",
+    "no_history": "No history data."
 }

src/locales/zh-cn.json

@@ -43,5 +43,6 @@
     "not_support_search": "这个网站不支持搜索。",
     "copy_success": "已复制，快去下载吧。",
     "async_failed": "同步成功, 未查询到更新。",
-    "async_success": "同步成功, 查询到更新。"
+    "async_success": "同步成功, 查询到更新。",
+    "no_history": "无历史记录"
 }