feat: refine vod control panel

Author: yeonjin719

README.md

@@ -16,6 +16,12 @@ eCampus 페이지에서 과목별 학습 항목(과제/퀴즈/강의/토론/자
 
 ## 버전별 업데이트
 
+### v1.2.1 (업데이트: 2026-03-31)
+
+- VOD 패널에서 5초 이동 버튼을 제거해 UI를 단순화했습니다.
+- `1000배속 스킵` 버튼을 일반 배속 옵션과 분리해 별도 버튼으로 제공하고, 일반 배속 메뉴는 `0.75x ~ 4.0x`만 유지합니다.
+- `1000배속 스킵`은 플레이어의 실제 배속 한계를 우회하기 위해 초고속 앞으로 넘기기 방식으로 동작합니다.
+
 ### v1.2.0 (업데이트: 2026-03-18)
 
 - 과목별 퀴즈 목록과 상세 정보를 함께 수집해 제목, 마감, 성적을 대시보드에서 바로 확인할 수 있습니다.

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "eHelper",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "eCampus 과목별 과제/퀴즈/강의/토론/자료를 한눈에 보는 확장 프로그램",
     "permissions": ["storage", "downloads"],
     "host_permissions": ["https://ecampus.smu.ac.kr/*"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecampus-dashboard-smu",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "type": "module",
   "scripts": {

src/content/modules/vod.panel.template.ts

@@ -35,22 +35,13 @@ export function buildVodPanelMarkup(
                     aria-label="강의 다운로드"
                 ><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v11m0 0l-4-4m4 4l4-4M5 21h14"/></svg></button>
             </div>
-            <div class="ecdash-vod-seek-actions">
-                <button
-                    type="button"
-                    id="ecdash-vod-seek-back"
-                    class="ecdash-vod-seek-btn"
-                    aria-label="5초 뒤로 이동"
-                    title="5초 뒤로"
-                ><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11 8L7 12l4 4M17 8l-4 4 4 4"/></svg></button>
-                <button
-                    type="button"
-                    id="ecdash-vod-seek-forward"
-                    class="ecdash-vod-seek-btn"
-                    aria-label="5초 앞으로 이동"
-                    title="5초 앞으로"
-                ><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13 8l4 4-4 4M7 8l4 4-4 4"/></svg></button>
-            </div>
+            <button
+                type="button"
+                id="ecdash-vod-speed-max"
+                class="ecdash-vod-turbo-button"
+                aria-label="1000배속 스킵 모드"
+                title="1000배속 스킵 모드"
+            >1000배속 스킵</button>
             <div id="${menuId}" class="ecdash-vod-speed-menu" role="listbox" hidden></div>
             <div class="ecdash-vod-speed-hint">Alt+, 느리게 · Alt+. 빠르게 · Alt+/ 기본속도</div>
         </div>

src/content/modules/vod.panel.ts

@@ -14,6 +14,20 @@ import { buildVodPanelMarkup } from './vod.panel.template';
     const VOD_SPEED_MENU_ID = 'ecdash-vod-speed-menu';
     const VOD_PANEL_BODY_ID = 'ecdash-vod-panel-body';
     const VOD_PANEL_TOGGLE_ID = 'ecdash-vod-panel-toggle';
+    const VOD_TURBO_RATE = 1000;
+
+    function formatVodSpeedLabel(rate) {
+        const current = E.closestVodSpeedOption(rate);
+        return Number.isInteger(current) ? `${current}x` : `${current.toFixed(2)}x`;
+    }
+
+    function updateVodTurboButtonState(panel, rate) {
+        const turboButton = panel?.querySelector('#ecdash-vod-speed-max');
+        if (!turboButton) return;
+        const isActive = E.closestVodSpeedOption(rate) === VOD_TURBO_RATE;
+        turboButton.classList.toggle('is-active', isActive);
+        turboButton.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+    }
 
     E.updateVodSpeedPanelRate = function updateVodSpeedPanelRate(rate) {
         const panel = document.getElementById(VOD_SPEED_PANEL_ID);
@@ -22,8 +36,10 @@ import { buildVodPanelMarkup } from './vod.panel.template';
         const current = E.closestVodSpeedOption(rate);
         const label = panel.querySelector('#ecdash-vod-speed-current');
         if (!label) return;
-        label.textContent = `${current.toFixed(2)}x`;
-        label.setAttribute('aria-label', `현재 배속 ${current.toFixed(2)}x`);
+        const speedLabel = formatVodSpeedLabel(current);
+        label.textContent = speedLabel;
+        label.setAttribute('aria-label', `현재 배속 ${speedLabel}`);
+        updateVodTurboButtonState(panel, current);
     };
 
     E.updateVodSpeedMenuSelection = function updateVodSpeedMenuSelection(rate) {
@@ -37,6 +53,7 @@ import { buildVodPanelMarkup } from './vod.panel.template';
             btn.classList.toggle('is-active', active);
             btn.setAttribute('aria-selected', active ? 'true' : 'false');
         });
+        updateVodTurboButtonState(panel, current);
     };
 
     E.setVodSpeedMenuOpen = function setVodSpeedMenuOpen(panel, isOpen) {
@@ -92,7 +109,7 @@ import { buildVodPanelMarkup } from './vod.panel.template';
                 btn.dataset.rate = String(option);
                 btn.setAttribute('role', 'option');
                 btn.setAttribute('aria-selected', 'false');
-                btn.textContent = `${option.toFixed(2)}x`;
+                btn.textContent = formatVodSpeedLabel(option);
                 menu.appendChild(btn);
             });
         }
@@ -119,7 +136,10 @@ import { buildVodPanelMarkup } from './vod.panel.template';
         };
 
         const applyAndPersist = async (nextRate, persist = true) => {
-            const { rate } = E.applyVodPlaybackRate(nextRate);
+            const { rate } =
+                typeof E.applyVodPlaybackMode === 'function'
+                    ? E.applyVodPlaybackMode(nextRate)
+                    : E.applyVodPlaybackRate(nextRate);
             targetRate = E.closestVodSpeedOption(rate);
             E.updateVodSpeedPanelRate(targetRate);
             E.updateVodSpeedMenuSelection(targetRate);
@@ -153,6 +173,13 @@ import { buildVodPanelMarkup } from './vod.panel.template';
                 void applyAndPersist(E.nextVodSpeedOption(targetRate, 1), true);
             });
 
+        panel
+            .querySelector('#ecdash-vod-speed-max')
+            ?.addEventListener('click', () => {
+                closeMenu();
+                void applyAndPersist(VOD_TURBO_RATE, true);
+            });
+
         panel
             .querySelector('#ecdash-vod-speed-current')
             ?.addEventListener('click', () => {
@@ -198,20 +225,6 @@ import { buildVodPanelMarkup } from './vod.panel.template';
                 }
             });
 
-        panel
-            .querySelector('#ecdash-vod-seek-back')
-            ?.addEventListener('click', () => {
-                closeMenu();
-                E.seekVodByDelta(-5);
-            });
-
-        panel
-            .querySelector('#ecdash-vod-seek-forward')
-            ?.addEventListener('click', () => {
-                closeMenu();
-                E.seekVodByDelta(5);
-            });
-
         document.addEventListener('click', (event) => {
             if (panel.contains(event.target)) return;
             closeMenu();
@@ -257,7 +270,10 @@ import { buildVodPanelMarkup } from './vod.panel.template';
                 video.dataset.ecdashSpeedBound = '1';
 
                 const sync = () => {
-                    const applied = E.applyVodPlaybackRate(targetRate);
+                    const applied =
+                        typeof E.applyVodPlaybackMode === 'function'
+                            ? E.applyVodPlaybackMode(targetRate)
+                            : E.applyVodPlaybackRate(targetRate);
                     if (applied.applied) {
                         E.updateVodSpeedPanelRate(applied.rate);
                         E.updateVodSpeedMenuSelection(applied.rate);
@@ -274,7 +290,10 @@ import { buildVodPanelMarkup } from './vod.panel.template';
         if (vodRoot) {
             const speedObserver = new MutationObserver(() => {
                 bindVideoListeners();
-                const applied = E.applyVodPlaybackRate(targetRate);
+                const applied =
+                    typeof E.applyVodPlaybackMode === 'function'
+                        ? E.applyVodPlaybackMode(targetRate)
+                        : E.applyVodPlaybackRate(targetRate);
                 if (applied.applied) {
                     E.updateVodSpeedPanelRate(applied.rate);
                     E.updateVodSpeedMenuSelection(applied.rate);
@@ -290,13 +309,19 @@ import { buildVodPanelMarkup } from './vod.panel.template';
         }
 
         bindVideoListeners();
-        const first = E.applyVodPlaybackRate(targetRate);
+        const first =
+            typeof E.applyVodPlaybackMode === 'function'
+                ? E.applyVodPlaybackMode(targetRate)
+                : E.applyVodPlaybackRate(targetRate);
         if (!first.applied) {
             // 플레이어 초기화 지연 대비: 짧은 시간 동안 재시도
             let retries = 0;
             const timer = setInterval(() => {
                 retries += 1;
-                const next = E.applyVodPlaybackRate(targetRate);
+                const next =
+                    typeof E.applyVodPlaybackMode === 'function'
+                        ? E.applyVodPlaybackMode(targetRate)
+                        : E.applyVodPlaybackRate(targetRate);
                 if (next.applied || retries >= 12) {
                     clearInterval(timer);
                 }

src/content/modules/vod.ts

@@ -8,6 +8,7 @@
         E.constants.VOD_SPEED_OPTIONS.length
             ? E.constants.VOD_SPEED_OPTIONS
             : [0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.5, 4];
+    const VOD_TURBO_RATE = 1000;
 
     E.isVodPlayerPage = function isVodPlayerPage() {
         return document.getElementById('vod_player') != null;
@@ -71,6 +72,7 @@
     E.normalizeVodPlaybackRate = function normalizeVodPlaybackRate(raw) {
         const value = Number(raw);
         if (!Number.isFinite(value)) return 1;
+        if (value === VOD_TURBO_RATE) return VOD_TURBO_RATE;
         if (value < VOD_SPEED_OPTIONS[0]) return VOD_SPEED_OPTIONS[0];
         if (value > VOD_SPEED_OPTIONS[VOD_SPEED_OPTIONS.length - 1]) {
             return VOD_SPEED_OPTIONS[VOD_SPEED_OPTIONS.length - 1];
@@ -80,6 +82,7 @@
 
     E.closestVodSpeedOption = function closestVodSpeedOption(raw) {
         const value = E.normalizeVodPlaybackRate(raw);
+        if (value === VOD_TURBO_RATE) return VOD_TURBO_RATE;
         let best = VOD_SPEED_OPTIONS[0];
         let diff = Math.abs(value - best);
 
@@ -95,7 +98,10 @@
     };
 
     E.nextVodSpeedOption = function nextVodSpeedOption(raw, direction) {
-        const current = E.closestVodSpeedOption(raw);
+        const current =
+            E.closestVodSpeedOption(raw) === VOD_TURBO_RATE
+                ? VOD_SPEED_OPTIONS[VOD_SPEED_OPTIONS.length - 1]
+                : E.closestVodSpeedOption(raw);
         const idx = VOD_SPEED_OPTIONS.findIndex(
             (option) => Math.abs(option - current) < 0.001,
         );
@@ -379,6 +385,56 @@
         return { applied, rate };
     };
 
+    E.stopVodTurboMode = function stopVodTurboMode() {
+        E.__vodTurboEnabled = false;
+        if (E.__vodTurboTimer) {
+            clearInterval(E.__vodTurboTimer);
+            E.__vodTurboTimer = null;
+        }
+    };
+
+    E.startVodTurboMode = function startVodTurboMode() {
+        E.__vodTurboEnabled = true;
+
+        // 플레이어 자체는 지원 최대치로 유지하고, 재생 중에는 주기적으로 앞으로 점프한다.
+        E.applyVodPlaybackRate(4);
+
+        if (E.__vodTurboTimer) return { applied: true, rate: VOD_TURBO_RATE };
+
+        E.__vodTurboTimer = setInterval(() => {
+            if (!E.__vodTurboEnabled) return;
+
+            const video = E.findVodVideoElement();
+            if (video) {
+                if (video.paused || video.ended || video.readyState < 1) return;
+            } else {
+                const player = E.getVodJwPlayerInstance();
+                if (player && typeof player.getState === 'function') {
+                    try {
+                        const state = String(player.getState() || '').toLowerCase();
+                        if (state && state !== 'playing' && state !== 'buffering') return;
+                    } catch (_) {
+                        // 무시
+                    }
+                }
+            }
+
+            E.seekVodByDelta(200);
+        }, 200);
+
+        return { applied: true, rate: VOD_TURBO_RATE };
+    };
+
+    E.applyVodPlaybackMode = function applyVodPlaybackMode(rawRate) {
+        const rate = E.closestVodSpeedOption(rawRate);
+        if (rate === VOD_TURBO_RATE) {
+            return E.startVodTurboMode();
+        }
+
+        E.stopVodTurboMode();
+        return E.applyVodPlaybackRate(rate);
+    };
+
     E.seekVodByDelta = function seekVodByDelta(rawDeltaSec) {
         const deltaSec = Number(rawDeltaSec);
         if (!Number.isFinite(deltaSec) || deltaSec === 0) return false;

src/content/styles/content.css

@@ -127,6 +127,31 @@
   color: #e0f2fe;
 }
 
+.ecdash-vod-turbo-button {
+  width: 100%;
+  height: 30px;
+  margin-top: 6px;
+  border: 1px solid rgba(251, 191, 36, 0.38);
+  border-radius: 8px;
+  background: rgba(245, 158, 11, 0.18);
+  color: #fef3c7;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.ecdash-vod-turbo-button:hover {
+  background: rgba(245, 158, 11, 0.28);
+}
+
+.ecdash-vod-turbo-button.is-active {
+  border-color: rgba(253, 224, 71, 0.8);
+  background: rgba(245, 158, 11, 0.34);
+  color: #fff7d6;
+}
+
 .ecdash-vod-download {
   width: 34px;
   height: 30px;
@@ -145,33 +170,8 @@
   background: rgba(34, 197, 94, 0.3);
 }
 
-.ecdash-vod-seek-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-.ecdash-vod-seek-btn {
-  height: 28px;
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.1);
-  color: #e5e7eb;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  padding: 0;
-  font-variant-numeric: tabular-nums;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
 .ecdash-vod-speed-actions button svg,
-.ecdash-vod-download svg,
-.ecdash-vod-seek-btn svg {
+.ecdash-vod-download svg {
   width: 15px;
   height: 15px;
   stroke: currentColor;
@@ -183,10 +183,6 @@
   display: block;
 }
 
-.ecdash-vod-seek-btn:hover {
-  background: rgba(255, 255, 255, 0.18);
-}
-
 .ecdash-vod-download:disabled {
   opacity: 0.5;
   cursor: not-allowed;