Merge pull request #8 from a90100/bugfix/fix-speed-control-not-work-i…

…n-next-video fix: 修復下部影片無法依據調整速度的 bug
a90100 · Feb 24, 2024 · 97180c2 · 97180c2
2 parents 9c296b4 + 5373634
commit 97180c2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -36,3 +36,12 @@ You can right click the extension icon and select option page to update the slid
 
 ## Contribute
 If you want to report bugs and contribute to this extension, please open an issue or a pull request.
+
+## Todo
+1. Dark Theme
+https://chromewebstore.google.com/detail/udemy-dark-theme/mnloceeicbhfhinjcnfieonmpindkmpb
+
+2. Auto play
+https://chromewebstore.google.com/detail/udemy-faster-autoplay/fepcpdjalebcocminbnogcgfbphllkeh
+
+3. User Tutorial
diff --git a/manifest.json b/manifest.json
@@ -21,7 +21,7 @@
   "options_page": "dist/option.html",
   "content_scripts": [
     {
-      "matches": ["https://*.udemy.com/*"],
+      "matches": ["https://*.udemy.com/course/*/learn/*"],
       "js": ["dist/js/injector.js"],
       "css": ["dist/css/injector.css"]
     }

diff --git a/src/js/inject-features/videoSpeed.js b/src/js/inject-features/videoSpeed.js
@@ -40,13 +40,13 @@ sliderBar.addEventListener('input', (e) => {
   chrome.storage.local.set({ defaultSpeed: e.target.value });
 });
 
-videoControlBtn.addEventListener('click', () => {
-  if (!sliderBarContainer.classList.contains('hidden-element')) {
-    sliderBarContainer.classList.add('hidden-element');
-  } else {
-    sliderBarContainer.classList.remove('hidden-element');
-  }
-}, true);
+videoControlBtn.addEventListener(
+  'click',
+  () => {
+    sliderBarContainer.classList.toggle('hidden-element');
+  },
+  true
+);
 
 // 呈現 bar 資訊
 chrome.storage.local.get(['defaultSpeed', 'maxSpeed', 'minSpeed', 'sliderInterval'], (result) => {
@@ -64,26 +64,20 @@ sliderBarContainer.append(minSpeed, sliderBar, maxSpeed);
 
 videoControlBtn.append(currentSpeed, videoControlBtnIcon, videoControlBtnTooltip, sliderBarContainer);
 
-let videoDomElement = null;
-
-const setVideoSpeed = (speed) => {
-  if (videoDomElement) {
-    videoDomElement.playbackRate = speed;
+const setVideoSpeed = (speed, videoDom) => {
+  if (videoDom) {
+    videoDom.playbackRate = speed;
   }
 };
 
 const observeVideoSpeedDOM = () => {
   chrome.storage?.local?.get(['defaultSpeed'], ({ defaultSpeed }) => {
-    setVideoSpeed(defaultSpeed);
+    setVideoSpeed(defaultSpeed, document.getElementsByTagName('video')[0]);
   });
-
-  if (!videoDomElement) {
-    videoDomElement = document.getElementsByTagName('video')[0];
-  }
 };
 
 chrome.storage?.onChanged?.addListener((changes) => {
-  setVideoSpeed(changes.defaultSpeed.newValue);
+  setVideoSpeed(changes.defaultSpeed.newValue, document.getElementsByTagName('video')[0]);
 });
 
-export { videoControlBtn, observeVideoSpeedDOM };
+export { videoControlBtn, sliderBarContainer, observeVideoSpeedDOM };
diff --git a/src/js/injector.js b/src/js/injector.js
@@ -3,7 +3,7 @@ import '../css/injector.scss';
 import '../utils/fontawesomeJS/all.min';
 
 import '../js/inject-features/videoSpeed';
-import { videoControlBtn, observeVideoSpeedDOM } from '../js/inject-features/videoSpeed';
+import { videoControlBtn, sliderBarContainer, observeVideoSpeedDOM } from '../js/inject-features/videoSpeed';
 import { fullWebPageBtn, observeVideoHeightDomElements } from '../js/inject-features/videoFullWebPage';
 import { pipBtn, getVideoDom } from '../js/inject-features/pictureInPicture';
 import { screenShotBtn, screenShotTypeModel } from '../js/inject-features/screenShot';
@@ -22,7 +22,6 @@ const observer = new MutationObserver(() => {
     if (videoElementSrc !== videoEle.src) {
       videoElementSrc = videoEle.src;
       getVideoDom(videoEle);
-      screenShotTypeModel.classList.add('display-none');
 
       isAppendBtns = false;
       videoControlsBarDomElement = null;
@@ -60,3 +59,16 @@ const addConfigBtns = () => {
 
   isAppendBtns = true;
 };
+
+document.addEventListener(
+  'click',
+  (e) => {
+    if (!videoControlBtn.contains(e.target) && sliderBarContainer && !sliderBarContainer.classList.contains('hidden-element')) {
+      sliderBarContainer.classList.add('hidden-element');
+    }
+    if (!screenShotBtn.contains(e.target) && screenShotTypeModel && !screenShotTypeModel.classList.contains('display-none')) {
+      screenShotTypeModel.classList.add('display-none');
+    }
+  },
+  true
+);