Bug fix & feature changes (#15)

* Added Enable-App switch * Unmute by clicking outside of iframe when using Auto-Play-First-Video * New feature Remove-Volume-Slider-Animation * Changed feature Easy-Open-Volume-Slider * New feature Fix-Mouse-Action * Changed feature Extend-Max-Volume * New feature Left-Right-Shortcut * Fixed blog.naver.com * Reduced Easy-Open-Volume-Slider area * Fixed Auto-Pause-Last-Video
occidere · Jul 10, 2024 · 8311941 · 8311941
1 parent 78b09c6
commit 8311941
Show file tree

Hide file tree

Showing 24 changed files with 718 additions and 373 deletions.
diff --git a/css/content-style.css b/css/content-style.css
@@ -1,44 +1,49 @@
 /* Button UI */
-.pzp.pzp-pc button.improved-naver-video-plugin__ui-button {
+.pzp .INVP__ui-button {
     width: 36px;
     height: 36px;
-    margin-right: 2px;
     opacity: 0;
     transition-property: opacity;
 }
-.pzp.pzp-pc.pzp-pc--controls button.improved-naver-video-plugin__ui-button {
+.pzp.pzp-pc--controls .INVP__ui-button {
     opacity: 1;
 }
-.pzp.pzp-pc button.improved-naver-video-plugin__ui-button span.pzp-ui-setting-quality-item__prefix,
-.pzp.pzp-pc button.improved-naver-video-plugin__ui-button span.pzp-ui-setting-playbackrate-item__value {
+.pzp .INVP__ui-button .INVP__ui-label {
     white-space: nowrap;
     font-size: 12px;
 }
+.pzp .pzp-pc__volume-slider:not([aria-valuenow="100"]) ~ .INVP__extend-max-volume {
+    display: none;
+}
 
 /* Volume Slider */
-.pzp.pzp-pc .pzp-pc__volume-control .improved-naver-video-plugin__volume-slider-hover-helper {
-    position: absolute;
-    width: 90px; /* 80px + margin(10px) */
-    height: 36px;
-    transform: translateX(44px); /* button(36px) + margin(8px) */
+.pzp.pzp-pc--keyboard .pzp-pc__volume-control.INVP__extend-volume-slider .pzp-pc__volume-button:focus ~ .pzp-pc__volume-slider,
+.pzp.pzp-pc--keyboard .pzp-pc__volume-control.INVP__extend-volume-slider .pzp-pc__volume-slider:focus,
+.pzp.pzp-pc .pzp-pc__volume-control.INVP__extend-volume-slider:hover > .pzp-pc__volume-slider,
+.pzp.pzp-pc--active-volume-control .pzp-pc__volume-control.INVP__extend-volume-slider .pzp-pc__volume-slider {
+    width: 120px; /* original width: 72px */
 }
-.pzp.pzp-pc .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider .improved-naver-video-plugin__volume-slider-hover-helper {
-    width: 130px; /* 120px + margin(10px) */
+.pzp.pzp-pc .pzp-pc__volume-control.INVP__remove-volume-slider-animation .pzp-pc__volume-slider {
+    transition-property: none;
 }
-.pzp.pzp-pc .pzp-pc__volume-control .improved-naver-video-plugin__volume-slider-hover-helper:hover ~ .pzp-pc__volume-slider,
-.pzp.pzp-pc .pzp-pc__volume-control:has(~ .pzp-pc__vod-time:hover) .improved-naver-video-plugin__volume-slider-hover-helper ~ .pzp-pc__volume-slider {
-    width: 80px;
+.pzp.pzp-pc--keyboard .pzp-pc__volume-control.INVP__remove-volume-slider-animation .pzp-pc__volume-button:focus ~ .pzp-pc__volume-slider,
+.pzp.pzp-pc--keyboard .pzp-pc__volume-control.INVP__remove-volume-slider-animation .pzp-pc__volume-slider:focus,
+.pzp.pzp-pc .pzp-pc__volume-control.INVP__remove-volume-slider-animation:hover > .pzp-pc__volume-slider,
+.pzp.pzp-pc--active-volume-control .pzp-pc__volume-control.INVP__remove-volume-slider-animation .pzp-pc__volume-slider {
+    transition-property: none;
 }
-.pzp.pzp-pc .pzp-pc__bottom-buttons-right .improved-naver-video-plugin__volume-slider-hover-helper-blocker {
-    position: absolute;
-    height: 36px;
-    transform: translateX(23px); /* margin-right */
-}
-.pzp.pzp-pc.pzp-pc--keyboard .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider .pzp-pc__volume-button:focus ~ .pzp-pc__volume-slider,
-.pzp.pzp-pc.pzp-pc--keyboard .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider .pzp-pc__volume-slider:focus,
-.pzp.pzp-pc .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider:hover > .pzp-pc__volume-slider,
-.pzp.pzp-pc.pzp-pc--active-volume-control .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider .pzp-pc__volume-slider,
-.pzp.pzp-pc .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider .improved-naver-video-plugin__volume-slider-hover-helper:hover ~ .pzp-pc__volume-slider,
-.pzp.pzp-pc .pzp-pc__volume-control.improved-naver-video-plugin__extend-volume-slider:has(~ .pzp-pc__vod-time:hover) .improved-naver-video-plugin__volume-slider-hover-helper ~ .pzp-pc__volume-slider {
-    width: 120px; /* original width: 80px */
+.pzp .INVP__easy-open-volume-slider:hover .pzp-pc__volume-slider {
+    overflow: visible;
+    width: 72px;
+    margin-right: 13px;
+}
+.pzp .INVP__easy-open-volume-slider:hover .INVP__extend-volume-slider .pzp-pc__volume-slider {
+    width: 120px;
+}
+
+/* Mouse Pointer */
+.pzp:not(.pzp-pc--playing) .pzp-pc__dimmed.INVP__mouse-pointer,
+.pzp:not(.pzp-pc--playing) .pzp-pc__header.INVP__mouse-pointer,
+.pzp:not(.pzp-pc--playing) .pzp-pc__dimmed.INVP__mouse-pointer ~ .pzp-pc__header {
+    cursor: pointer;
 }
diff --git a/css/popup.css b/css/popup.css
@@ -8,6 +8,7 @@
 #settings {
     width: 210px;
 }
+
 .setting-group {
     display: flex;
     margin-top: 6px;
@@ -46,7 +47,7 @@
 .setting-checkbox.disabled {
     display: none;
 }
-#volumeNumberInput {
+.setting-checkbox input[type="number"] {
     font-size: 0.9em;
     width: 30px;
 }
@@ -72,3 +73,64 @@
 #defaultVolumeRange.extended {
     width: calc(100% - 4px);
 }
+
+/* Toggle Switch */
+/* https://www.w3schools.com/howto/howto_css_switch.asp */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 46px;
+  height: 26px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+.slider.round {
+  border-radius: 13px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
diff --git a/js/background.js b/js/background.js
@@ -1,20 +1,24 @@
 const defaultItems = {
-    selectMaxQuality: true,
+    enableApp: true,
     qualityDisplay: true,
-    dividePlaybackRate: true,
+    selectMaxQuality: true,
     playbackRateDisplay: true,
-    easyClickToPlay: true,
-    autoPauseLastVideo: false,
+    dividePlaybackRate: true,
     autoPlayFirstVideo: false,
+    autoPauseLastVideo: false,
+    fixMouseAction: true,
     hideSettingButton: false,
     easyOpenVolumeSlider: true,
+    extendVolumeSlider: true,
+    removeVolumeSliderAnimation: true,
     preciseVolumeShortcut: true,
-    morePreciseInLowVolume: true,
     volumeNumber: '10',
-    extendVolumeSlider: true,
-    extendMaxVolume: false,
+    morePreciseInLowVolume: true,
+    extendMaxVolume: true,
     setDefaultVolume: true,
-    defaultVolume: '0.5',
+    defaultVolume: '0.50',
+    leftRightShortcut: true,
+    timeNumber: '2',
 };
 
 chrome.runtime.onInstalled.addListener(async (details) => {
@@ -38,5 +42,16 @@ chrome.runtime.onInstalled.addListener(async (details) => {
             }
         }
         chrome.storage.sync.remove(removedKeys);
+        forceUpdateValues(details.previousVersion);
     }
 });
+
+function forceUpdateValues(previousVersion) {
+    if (previousVersion < '2.3.0') {
+        chrome.storage.sync.set({
+            extendMaxVolume: true,
+            setDefaultVolume: true,
+            defaultVolume: '0.50',
+        });
+    }
+}
diff --git a/js/common/class-variables.js b/js/common/class-variables.js
@@ -1,23 +1,38 @@
-const APP_NAME = 'improved-naver-video-plugin';
+const APP_NAME = 'INVP';
 const SETTING_CHANGED_EVENT = 'setting-changed';
 const DEFAULT_VOLUME_CHANGED_EVENT = 'default-volume-changed';
 const VOLUME_NUMBER_CHANGED_EVENT = 'volume-number-changed';
 const MORE_PRECISE_IN_LOW_VOLUME_SETTING_CHANGED = 'move-precise-in-low-volume-setting-changed';
+const TIME_NUMBER_CHANGED_EVENT = 'time-number-changed';
 
 // app element classes
 const APP_UI_BUTTON_CLASS = APP_NAME + '__ui-button';
+const APP_UI_LABEL_CLASS = APP_NAME + '__ui-label';
 const APP_QUALITY_DISPLAY_CLASS = APP_NAME + '__quality-display';
 const APP_PLAYBACK_RATE_DISPLAY_CLASS = APP_NAME + '__playback-rate-display';
-const APP_EXTEND_VOLUME_SLIDER_CLASS = APP_NAME + '__extend-volume-slider';
-const APP_VOLUME_SLIDER_HOVER_HELPER_CLASS = APP_NAME + '__volume-slider-hover-helper';
-const APP_VOLUME_SLIDER_HOVER_HELPER_BLOCKER_CLASS = APP_NAME + '__volume-slider-hover-helper-blocker';
 const APP_ADDED_PLAYBACK_RATE_ITEM_CLASS = APP_NAME + '__added-playback-rate-item';
+const APP_EXTEND_VOLUME_SLIDER_CLASS = APP_NAME + '__extend-volume-slider';
+const APP_EASY_OPEN_VOLUME_SLIDER_CLASS = APP_NAME + '__easy-open-volume-slider';
+const APP_REMOVE_VOLUME_SLIDER_ANIMATION_CLASS = APP_NAME + '__remove-volume-slider-animation';
+const APP_MOUSE_POINTER_CLASS = APP_NAME + '__mouse-pointer';
+const APP_EXTEND_MAX_VOLUME_CLASS = APP_NAME + '__extend-max-volume';
 
 // prism player related classes
-const CHECKED_SETTING_ITEM_CLASS = 'pzp-ui-setting-pane-item--checked';
-const QUALITY_SETTING_ITEM_SPAN_CLASS = 'pzp-ui-setting-quality-item__prefix';
-const PLAYBACK_RATE_SETTING_ITEM_SPAN_CLASS = 'pzp-ui-setting-playbackrate-item__value';
-const SETTING_MENU_VALUE_SPAN_CLASS = 'pzp-ui-setting-home-item__value';
 const PLAYER_BUTTON_CLASS = 'pzp-button';
-const PLAYER_UI_TOOLTIP_CLASS = 'pzp-button__tooltip';
-const PLAYER_UI_TOOLTIP_TOP_CLASS = 'pzp-button__tooltip--top';
+const PLAYER_UI_BUTTON_CLASS = 'pzp-pc-ui-button';
+let PLAYER_UI_TOOLTIP_CLASS = 'pzp-button__tooltip';
+let PLAYER_UI_TOOLTIP_TOP_CLASS = 'pzp-button__tooltip--top';
+let QUALITY_SETTING_ITEM_SPAN_CLASS = 'pzp-ui-setting-quality-item__prefix';
+let PLAYBACK_RATE_SETTING_ITEM_SPAN_CLASS = 'pzp-ui-setting-playbackrate-item__value';
+let CHECKED_SETTING_ITEM_CLASS = 'pzp-ui-setting-pane-item--checked';
+let SETTING_MENU_VALUE_SPAN_CLASS = 'pzp-ui-setting-home-item__value';
+
+// old version
+if (location.hostname === 'blog.naver.com') {
+    PLAYER_UI_TOOLTIP_CLASS = 'pzp-pc-ui-button__tooltip';
+    PLAYER_UI_TOOLTIP_TOP_CLASS = 'pzp-pc-ui-button__tooltip--top';
+    QUALITY_SETTING_ITEM_SPAN_CLASS = 'pzp-pc-ui-setting-quality-item__prefix';
+    PLAYBACK_RATE_SETTING_ITEM_SPAN_CLASS = 'pzp-pc-ui-setting-playbackrate-item__value';
+    CHECKED_SETTING_ITEM_CLASS = 'pzp-pc-ui-setting-item--checked';
+    SETTING_MENU_VALUE_SPAN_CLASS = 'pzp-pc-ui-setting-intro-panel__value';
+}
diff --git a/js/decorator/auto-pause-last-video-decorator.js b/js/decorator/auto-pause-last-video-decorator.js
@@ -3,7 +3,7 @@ class AutoPauseLastVideoDecorator extends Decorator {
     decorate(prismPlayer) {
         const onPlayVideo = () => {
             const video = prismPlayer.query('video');
-            const otherVideos = document.querySelectorAll('video');
+            const otherVideos = prismPlayer.element.ownerDocument.querySelectorAll('video');
             for (const otherVideo of otherVideos) {
                 if (otherVideo !== video && !otherVideo.paused) {
                     otherVideo.pause();

diff --git a/js/decorator/easy-click-to-play-decorator.js b/js/decorator/easy-click-to-play-decorator.js