feat(markup): support for platform tv.naver.com

Author: exwm

src/clipper/clipper_types.py

@@ -51,4 +51,5 @@ class KnownPlatform(enum.Enum):
     youtube = "youtube"
     vlive = "vlive"
     naver_now_watch = "naver_now_watch"
+    naver_tv = "naver_tv"
     weverse = "weverse"

src/clipper/ytc_settings.py

@@ -431,6 +431,8 @@ def getVideoURL(settings: Settings, platform: str, videoID: str) -> str:
         return f"https://now.naver.com/watch/{videoID}"
     if platform == KnownPlatform.weverse.name:
         return settings["videoUrl"]
+    if platform == KnownPlatform.naver_tv.name:
+        return f"https://tv.naver.com/v/{videoID}"
 
     logger.fatal(f"Unknown platform: {platform}")
     sys.exit(1)

src/markup/platforms/css/naver_tv.css

@@ -0,0 +1,36 @@
+#shortcutsTableToggleButton {
+  width: 40px;
+  display: inline-block;
+  background-color: transparent;
+  border: transparent;
+  top: -3px;
+}
+
+#markers-div {
+  height: 11px;
+}
+
+#markers-svg,
+#selected-marker-pair-overlay,
+#start-marker-numberings,
+#end-marker-numberings {
+  font-size: 6.5pt;
+  width: 100%;
+  height: 300%;
+  top: 2px;
+  position: absolute;
+  z-index: 99;
+  paint-order: stroke;
+  stroke: rgba(0, 0, 0, 0.25);
+  stroke-width: 2px;
+}
+
+#start-marker-numberings {
+  top: -13px;
+  height: 13px;
+}
+
+#end-marker-numberings {
+  top: 13px;
+  height: 13px;
+}

src/markup/platforms/platforms.ts

@@ -5,6 +5,7 @@ export enum VideoPlatforms {
   vlive = 'vlive',
   weverse = 'weverse',
   naver_now_watch = 'naver_now_watch',
+  naver_tv = 'naver_tv',
 }
 type VideoPlatform<T extends string | HTMLElement> = {
   // Contains the video element, progress bars, and controls.
@@ -43,19 +44,6 @@ type VideoPlatformSelectors = VideoPlatform<string>;
 
 export type VideoPlatformHooks = VideoPlatform<HTMLElement>;
 
-export function getVideoPlatformSelectors(platform: VideoPlatforms): VideoPlatformSelectors {
-  if (platform === VideoPlatforms.youtube) {
-    return youtubeSelectors;
-  } else if (platform === VideoPlatforms.vlive) {
-    return vliveSelectors;
-  } else if (platform === VideoPlatforms.naver_now_watch) {
-    return naver_now_watchSelectors;
-  } else if (platform === VideoPlatforms.weverse) {
-    return weverseSelectors;
-  }
-  return null;
-}
-
 export function getVideoPlatformHooks(selectors: VideoPlatformSelectors): VideoPlatformHooks {
   return querySelectors(selectors);
 }
@@ -70,6 +58,8 @@ export function getPlatform() {
     return VideoPlatforms.naver_now_watch;
   } else if (host.includes('weverse')) {
     return VideoPlatforms.weverse;
+  } else if (host.includes('tv.naver')) {
+    return VideoPlatforms.naver_tv;
   } else {
     return VideoPlatforms.youtube;
   }
@@ -147,6 +137,30 @@ const naver_now_watchSelectors = {
   shortcutsTableButton: '.pzp-pc__bottom-buttons-right',
 };
 
+const naver_tvSelectors = {
+  playerContainer: 'div[class=webplayer-internal-source-shadow]',
+  player: 'div[class=webplayer-internal-source-wrapper]',
+  playerClickZone: '.webplayer-internal-source-wrapper',
+  videoContainer: 'div[class=webplayer-internal-source-wrapper]',
+  video: 'video',
+  progressBar: '.pzp-pc__progress-slider',
+  markersDiv: '.pzp-ui-slider__wrap',
+  markerNumberingsDiv: '.pzp-ui-slider__wrap',
+  theaterModeIndicator: 'placeholder',
+  settingsEditor: 'div[class*=ArticleSection_article_section]',
+  settingsEditorTheater: 'div[class*=ArticleSection_article_section]',
+  shortcutsTable: 'div[class*=ArticleSection_article_section]',
+  frameCapturerProgressBar: 'div[class*=ArticleSection_article_section]',
+  flashMessage: 'div[class*=ArticleSection_article_section]',
+  cropOverlay: '.webplayer-internal-source-wrapper',
+  cropMouseManipulation: '.webplayer-internal-source-wrapper',
+  speedChartContainer: '.webplayer-internal-video',
+  cropChartContainer: 'div[class*=ArticleSection_article_section]',
+  controls: '.pzp-pc__bottom',
+  controlsGradient: '.pzp-pc__bottom-shadow',
+  shortcutsTableButton: '.pzp-pc__bottom-buttons-right',
+};
+
 const weverseSelectors = {
   playerContainer: 'div[class=webplayer-internal-source-shadow]',
   player: 'div[class=webplayer-internal-source-wrapper]',
@@ -170,3 +184,11 @@ const weverseSelectors = {
   controlsGradient: '.pzp-pc__bottom-buttons',
   shortcutsTableButton: '.pzp-pc__bottom-buttons-right',
 };
+
+export const videoPlatformSelectors: Record<VideoPlatforms, VideoPlatformSelectors> = {
+  [VideoPlatforms.youtube]: youtubeSelectors,
+  [VideoPlatforms.weverse]: weverseSelectors,
+  [VideoPlatforms.vlive]: vliveSelectors,
+  [VideoPlatforms.naver_now_watch]: naver_now_watchSelectors,
+  [VideoPlatforms.naver_tv]: naver_tvSelectors,
+};

src/markup/yt_clipper.ts

@@ -26,7 +26,8 @@
 // @match        http*://*.vlive.tv/video/*
 // @match        http*://*.vlive.tv/post/*
 // @match        http*://*.now.naver.com/*
-// @match        http*://*.weverse.io/*
+// @match        http*://weverse.io/*
+// @match        https*://tv.naver.com/*
 // @noframes
 // dummy grant to enable sandboxing
 // @grant         GM_getValue
@@ -113,7 +114,7 @@ import {
 import {
   getPlatform,
   getVideoPlatformHooks,
-  getVideoPlatformSelectors,
+  videoPlatformSelectors,
   VideoPlatformHooks,
   VideoPlatforms,
 } from './platforms/platforms';
@@ -122,6 +123,7 @@ import { disableCommonBlockers, enableCommonBlockers } from './platforms/blocker
 const ytClipperCSS = readFileSync(__dirname + '/ui/css/yt-clipper.css', 'utf8');
 const vliveCSS = readFileSync(__dirname + '/platforms/css/vlive.css', 'utf8');
 const naver_now_watchCSS = readFileSync(__dirname + '/platforms/css/naver_now_watch.css', 'utf8');
+const naver_tvCSS = readFileSync(__dirname + '/platforms/css/naver_tv.css', 'utf8');
 const weverseCSS = readFileSync(__dirname + '/platforms/css/weverse.css', 'utf8');
 const shortcutsTable = readFileSync(__dirname + '/ui/shortcuts-table/shortcuts-table.html', 'utf8');
 const shortcutsTableStyle = readFileSync(
@@ -370,6 +372,7 @@ async function loadytClipper() {
     if (platform === VideoPlatforms.vlive) injectCSS(vliveCSS, 'vlive-css');
     if (platform === VideoPlatforms.naver_now_watch) injectCSS(naver_now_watchCSS, 'naver-now-css');
     if (platform === VideoPlatforms.weverse) injectCSS(weverseCSS, 'weverse-css');
+    if (platform === VideoPlatforms.naver_tv) injectCSS(naver_tvCSS, 'naver-tv-css');
     initHooks();
     initVideoInfo();
     initObservers();
@@ -516,7 +519,7 @@ async function loadytClipper() {
     document.body.addEventListener('wheel', inheritCropPointCrop, { passive: false });
   }
 
-  const selectors = getVideoPlatformSelectors(platform);
+  const selectors = videoPlatformSelectors[platform];
 
   player = await retryUntilTruthyResult(() => document.querySelector(selectors.player));
   video = await retryUntilTruthyResult(() => player.querySelector(selectors.video));
@@ -558,7 +561,6 @@ async function loadytClipper() {
       videoInfo.title = playerData.title;
       videoInfo.fps = getFPS();
       video.seekTo = (time) => player.seekTo(time);
-
     } else if (platform === VideoPlatforms.vlive) {
       const location = window.location;
 
@@ -574,16 +576,24 @@ async function loadytClipper() {
 
       videoInfo.fps = getFPS();
       video.seekTo = (time) => (video.currentTime = time);
-
     } else if (platform === VideoPlatforms.naver_now_watch) {
       videoInfo.id = location.pathname.split('/')[2];
-      videoInfo.title = document.querySelector('h2[class*=ArticleSection_article_title]')?.textContent
+      videoInfo.title = document.querySelector(
+        'h2[class*=ArticleSection_article_title]'
+      )?.textContent;
+      videoInfo.fps = getFPS();
+      video.seekTo = (time) => (video.currentTime = time);
+    } else if (platform === VideoPlatforms.naver_tv) {
+      videoInfo.id = location.pathname.split('/')[2];
+      videoInfo.title = document.querySelector(
+        'h2[class*=ArticleSection_article_title]'
+      )?.textContent;
       videoInfo.fps = getFPS();
       video.seekTo = (time) => (video.currentTime = time);
     } else if (platform === VideoPlatforms.weverse) {
-      videoInfo.title = document.querySelector('h2[class*=TitleView_title]')?.textContent
+      videoInfo.title = document.querySelector('h2[class*=TitleView_title]')?.textContent;
 
-      if (location.pathname.includes('media') || (location.pathname.includes('live')))   {
+      if (location.pathname.includes('media') || location.pathname.includes('live')) {
         if (videoInfo.id == null) videoInfo.id = location.pathname.split('/')[3];
       }
       videoInfo.fps = getFPS();
@@ -596,7 +606,6 @@ async function loadytClipper() {
     }
   }
 
-
   function initObservers() {
     new ResizeObserver(resizeCropOverlay).observe(hooks.videoContainer);
   }
@@ -826,7 +835,7 @@ async function loadytClipper() {
         <svg id="start-marker-numberings"></svg>
         <svg id="end-marker-numberings"></svg>
       `;
-    hooks.markersDiv.appendChild(markersDiv);
+
     markersSvg = markersDiv.children[0] as SVGSVGElement;
     selectedMarkerPairOverlay = markersDiv.children[1] as SVGSVGElement;
 
@@ -836,9 +845,21 @@ async function loadytClipper() {
         <svg id="start-marker-numberings"></svg>
         <svg id="end-marker-numberings"></svg>
       `;
-    hooks.markerNumberingsDiv.appendChild(markerNumberingsDiv);
     startMarkerNumberings = markerNumberingsDiv.children[0] as SVGSVGElement;
     endMarkerNumberings = markerNumberingsDiv.children[1] as SVGSVGElement;
+
+    if (
+      [VideoPlatforms.weverse, VideoPlatforms.naver_now_watch, VideoPlatforms.naver_tv].includes(
+        platform
+      )
+    ) {
+      hooks.markersDiv.prepend(markersDiv);
+      hooks.markerNumberingsDiv.prepend(markerNumberingsDiv);
+    } else {
+      hooks.markersDiv.appendChild(markersDiv);
+      hooks.markerNumberingsDiv.appendChild(markerNumberingsDiv);
+    }
+
     videoInfo.fps = getFPS();
   }
 
@@ -3433,7 +3454,20 @@ async function loadytClipper() {
   function injectToggleShortcutsTableButton() {
     shortcutsTableToggleButton = htmlToElement(shortcutsTableToggleButtonHTML) as HTMLButtonElement;
     shortcutsTableToggleButton.onclick = toggleShortcutsTable;
-    if (platform === VideoPlatforms.naver_now_watch) shortcutsTableToggleButton.classList.add('pzp-pc__subtitle-button');
+
+    if (
+      [VideoPlatforms.weverse, VideoPlatforms.naver_now_watch, VideoPlatforms.naver_tv].includes(
+        platform
+      )
+    ) {
+      shortcutsTableToggleButton.classList.add(
+        'pzp-button',
+        'pzp-subtitle-button',
+        'pzp-pc-subtitle-button',
+        'pzp-pc__subtitle-button'
+      );
+    }
+
     hooks.shortcutsTableButton.insertAdjacentElement('afterbegin', shortcutsTableToggleButton);
   }
 
@@ -3902,10 +3936,10 @@ async function loadytClipper() {
     isCropOverlayVisible = false;
   }
 
-
   function hidePlayerControls() {
     hooks.controls.originalDisplay = hooks.controls.originalDisplay ?? hooks.controls.style.display;
-    hooks.controlsGradient.originalDisplay = hooks.controlsGradient.originalDisplay ?? hooks.controlsGradient.style.display;
+    hooks.controlsGradient.originalDisplay =
+      hooks.controlsGradient.originalDisplay ?? hooks.controlsGradient.style.display;
 
     hooks.controls.style.display = 'none';
     hooks.controlsGradient.style.display = 'none';