feat(core): 新增网课视频选项：显示视频进度

ocsjs · May 23, 2022 · b6086df · b6086df
1 parent 3f925cb
commit b6086df
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 2 deletions.
diff --git a/packages/core/src/components/cx/StudySettingPanel.tsx b/packages/core/src/components/cx/StudySettingPanel.tsx
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { createWorkerSetting } from '..';
-import { switchPlayLine } from '../../script/cx/study';
+import { fixedVideoProgress, switchPlayLine } from '../../script/cx/study';
 import { store } from '../../store';
 import { Tooltip } from '../Tooltip';
 import { CommonWorkSettingPanel } from './CommonWorkSettingPanel';
@@ -75,6 +75,21 @@ export const StudySettingPanel = defineComponent({
             <span> {Math.round(settings.volume * 100)}% </span>
           </div>
 
+          <label>显示视频进度</label>
+          <div>
+            <Tooltip title="固定进度条，防止进度条消失。">
+              <input
+                class="input-switch"
+                type="checkbox"
+                checked={settings.showProgress}
+                onChange={(e: any) => {
+                  settings.showProgress = e.target.checked;
+                  fixedVideoProgress(e.target.checked);
+                }}
+              />
+            </Tooltip>
+          </div>
+
           <label>复习模式</label>
           <div>
             <Tooltip title="遇到看过的视频,音频,ppt会重新播放，并且从第一个章节开始。">

diff --git a/packages/core/src/components/zhs/StudySettingPanel.tsx b/packages/core/src/components/zhs/StudySettingPanel.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue';
-import { autoClose, switchPlaybackRate } from '../../script/zhs/study';
+import { autoClose, fixedVideoProgress, switchPlaybackRate } from '../../script/zhs/study';
 import { store } from '../../store';
 import { Tooltip } from '../Tooltip';
 
@@ -106,6 +106,21 @@ export const StudySettingPanel = defineComponent({
             <span> {Math.round(settings.volume * 100)}% </span>
           </div>
 
+          <label>显示视频进度</label>
+          <div>
+            <Tooltip title="固定进度条，防止进度条消失。">
+              <input
+                class="input-switch"
+                type="checkbox"
+                checked={settings.showProgress}
+                onChange={(e: any) => {
+                  settings.showProgress = e.target.checked;
+                  fixedVideoProgress(e.target.checked);
+                }}
+              />
+            </Tooltip>
+          </div>
+
           <label>复习模式</label>
           <div>
             <Tooltip title="将播放过的视频再播放一遍。">

diff --git a/packages/core/src/script/cx/study.ts b/packages/core/src/script/cx/study.ts
@@ -125,6 +125,21 @@ function searchTask(setting: ScriptSettings['cx']['video']): (() => Promise<void
     .filter((f) => f) as any[];
 }
 
+/**
+ * 永久固定显示视频进度
+ */
+export function fixedVideoProgress(fixed: boolean) {
+  const videojs = store.videojs;
+
+  if (videojs) {
+    const { bar } = domSearch({ bar: '.vjs-control-bar' }, videojs);
+    if (bar) {
+      console.log('fixedVideoProgress', { bar, fixed });
+      bar.style.opacity = fixed ? '1' : '0';
+    }
+  }
+}
+
 /**
  *  视频路线切换
  */
@@ -173,6 +188,12 @@ function mediaTask(setting: ScriptSettings['cx']['video'], media: HTMLMediaEleme
 
   // @ts-ignore
   const { videojs } = domSearch({ videojs: '#video' }, frame.contentDocument || document);
+
+  if (!videojs) {
+    message('error', '视频检测不到，请尝试刷新或者手动切换下一章。');
+    return;
+  }
+
   store.videojs = videojs;
   store.currentMedia = media;
 
@@ -181,6 +202,9 @@ function mediaTask(setting: ScriptSettings['cx']['video'], media: HTMLMediaEleme
     setTimeout(() => switchPlayLine(setting, videojs, media, setting.line), 3000);
   }
 
+  // 是否固定视频进度
+  fixedVideoProgress(setting.showProgress);
+
   /**
    * 视频播放
    */

diff --git a/packages/core/src/script/zhs/study.ts b/packages/core/src/script/zhs/study.ts
@@ -71,6 +71,9 @@ export async function watch(setting?: Pick<ScriptSettings['zhs']['video'], 'play
   return new Promise<void>((resolve, reject) => {
     try {
       const video = document.querySelector('video') as HTMLVideoElement;
+      // 保存视频元素
+      store.currentMedia = video;
+
       // 设置当前视频
       store.currentMedia = video;
       // 如果已经播放完了，则重置视频进度
@@ -191,3 +194,18 @@ export function autoClose(watchTime: number) {
     clearInterval(store.setting.zhs.video.interval);
   }
 }
+
+/**
+ * 永久固定显示视频进度
+ */
+export function fixedVideoProgress(fixed: boolean) {
+  const currentMedia = store.currentMedia;
+
+  if (currentMedia) {
+    const { bar } = domSearch({ bar: '.controlsBar' });
+    console.log('fixedVideoProgress', { bar, fixed });
+    if (bar) {
+      bar.style.display = fixed ? 'block' : 'none';
+    }
+  }
+}
diff --git a/packages/core/src/scripts.ts b/packages/core/src/scripts.ts
@@ -8,6 +8,9 @@ export type CommonWorkSetting = Pick<WorkOptions<any>, 'period' | 'timeout' | 'r
   waitForCheck: number,
 }
 
+/**
+ * 超星设置
+ */
 export interface CXSetting {
   common: {
     /** 繁体字识别 */
@@ -16,6 +19,8 @@ export interface CXSetting {
   video: {
     /** 播放速度 */
     playbackRate: number
+    /** 显示视频进度 */
+    showProgress: boolean
     /** 音量 */
     volume: number
     /** 复习模式 */
@@ -44,6 +49,9 @@ export interface CXSetting {
   exam: CommonWorkSetting
 }
 
+/**
+ * 智慧树设置
+ */
 export interface ZHSSetting {
   video: {
     /** 观看时间 */
@@ -54,6 +62,8 @@ export interface ZHSSetting {
     closeDate: Date
     /** 播放速度 */
     playbackRate: number
+    /** 显示视频进度 */
+    showProgress: boolean
     /** 音量 */
     volume: number
     /** 复习模式 */
@@ -97,6 +107,7 @@ export const defaultOCSSetting: ScriptSettings = {
       interval: undefined,
       closeDate: new Date(0),
       playbackRate: 1,
+      showProgress: true,
       restudy: false,
       volume: 0,
       creditStudy: false
@@ -110,6 +121,7 @@ export const defaultOCSSetting: ScriptSettings = {
     },
     video: {
       playbackRate: 1,
+      showProgress: true,
       restudy: false,
       volume: 0,
       upload: 'close',