소스 검색

更新主应用文件以引入PrimeIcons样式,并优化VideoJSPlayer组件,移除回退按钮的注册逻辑,增强快进按钮的样式和交互效果,提升用户体验。

wuyi 2 달 전
부모
커밋
a6f0e281e7
2개의 변경된 파일20개의 추가작업 그리고 27개의 파일을 삭제
  1. 17 25
      src/components/VideoJSPlayer.vue
  2. 3 2
      src/main.ts

+ 17 - 25
src/components/VideoJSPlayer.vue

@@ -282,7 +282,6 @@ const initVideoJSPlayer = async (): Promise<void> => {
         children: [
           "playToggle", // 播放/暂停按钮
           "forward10Button", // 快进 10 秒按钮
-          "replayButton", // 回退按钮
           "forwardButton", // 快进按钮
           "currentTimeDisplay", // 当前时间
           "timeDivider", // 时间分隔符
@@ -309,30 +308,9 @@ const initVideoJSPlayer = async (): Promise<void> => {
     };
 
     try {
-      // 注册快进快退按钮组件
+      // 注册快进按钮组件
       const registerSeekButtons = () => {
         try {
-          // 注册回退按钮
-          const ReplayButton = videojs.getComponent("Button");
-          class ReplayButtonComponent extends ReplayButton {
-            constructor(player: any, options: any) {
-              super(player, options);
-              (this as any).controlText("回退10秒");
-            }
-
-            handleClick() {
-              const time = (this as any).player().currentTime();
-              if (typeof time === "number") {
-                (this as any).player().currentTime(Math.max(0, time - 10));
-              }
-            }
-
-            buildCSSClass() {
-              return `vjs-replay-button ${super.buildCSSClass()}`;
-            }
-          }
-          videojs.registerComponent("ReplayButton", ReplayButtonComponent);
-
           // 注册快进按钮
           const ForwardButton = videojs.getComponent("Button");
           class ForwardButtonComponent extends ForwardButton {
@@ -711,12 +689,26 @@ defineExpose({
 :deep(.video-js .vjs-forward-10-button) {
   font-size: 1.3em;
   position: relative;
+  transition: all 0.2s ease;
 }
 
 :deep(.video-js .vjs-forward-10-button::before) {
-  content: "\f11d";
-  font-family: VideoJS;
+  content: "\e9b1"; /* pi-angle-double-right */
+  font-family: "primeicons", "VideoJS", sans-serif;
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+  display: inline-block;
+  line-height: 1;
+}
+
+/* 按钮悬停效果 */
+:deep(.video-js .vjs-forward-10-button:hover) {
+  transform: scale(1.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* 按钮激活效果 */
+:deep(.video-js .vjs-forward-10-button:active) {
+  transform: scale(0.95);
 }
 
 /* 确保进度条有足够的显示长度 */

+ 3 - 2
src/main.ts

@@ -1,9 +1,12 @@
 import "./style.css";
+import "primeicons/primeicons.css";
+
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 
 import App from "./App.vue";
 import router from "./router";
+
 import { initPWA } from "./utils/pwa";
 import { initVConsole } from "@/utils/vconsole";
 
@@ -12,9 +15,7 @@ const app = createApp(App);
 app.use(router);
 app.use(createPinia());
 
-// 初始化 vConsole(内部已做环境与参数判断)
 initVConsole();
-// 初始化 PWA 功能
 initPWA();
 
 app.mount("#app");