feat(platform): add support for naver_now_watch platform (now.naver.c…

…om/watch URLs)

.editorconfig

@@ -9,5 +9,5 @@ insert_final_newline = true
 [*.{ts,js,py,js,json}]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 

pyproject.toml

@@ -19,6 +19,8 @@ verboselogs = "^1.7"
 webvtt-py = "^0.4.6"
 certifi = ">=2021.10.8"
 
+ytc-yt-dlp-plugins = { git = "https://github.com/exwm/ytc-yt-dlp-plugins", rev = "7bec6b7" }
+
 [tool.poetry.group.dev.dependencies]
 pyinstaller = "5.0.1"
 black = "^22.8.0"

src/clipper/clipper_types.py

@@ -50,3 +50,4 @@ class MissingMarkerPairFilePath(Exception):
 class KnownPlatform(enum.Enum):
     youtube = "youtube"
     vlive = "vlive"
+    naver_now_watch = "naver_now_watch"

src/clipper/ytc_settings.py

@@ -29,7 +29,7 @@ def loadSettings(settings: Settings) -> None:
             settings["markerPairs"] = settings["markers"]
         settings["platform"] = settings.get("platform", "youtube")
 
-        settings["videoURL"] = getVideoURL(settings["platform"], settings["videoID"])
+        settings["videoURL"] = getVideoURL(settings, settings["platform"], settings["videoID"])
         settings["videoTitle"] = re.sub('"', "", settings["videoTitle"])
         settings["markersDataFileStem"] = Path(settings["json"]).stem
 
@@ -422,11 +422,13 @@ def filterDash(cs: ClipperState, dashManifestUrl: str, dashFormatIDs: List[str])
     return filteredDashPath
 
 
-def getVideoURL(platform: str, videoID: str) -> str:
+def getVideoURL(_settings: Settings, platform: str, videoID: str) -> str:
     if platform == KnownPlatform.youtube.name:
         return f"https://www.youtube.com/watch?v={videoID}"
     if platform == KnownPlatform.vlive.name:
         return f"https://www.vlive.tv/video/{videoID}"
+    if platform == KnownPlatform.naver_now_watch.name:
+        return f"https://now.naver.com/watch/{videoID}"
 
     logger.fatal(f"Unknown platform: {platform}")
     sys.exit(1)

src/markup/@types/yt_clipper.d.ts

@@ -5,6 +5,7 @@ interface Settings {
   videoID: string;
   videoTag: string;
   videoTitle: string;
+  videoUrl: string;
   newMarkerSpeed: number;
   newMarkerCrop: string;
   titleSuffix: string;

src/markup/platforms/css/naver_now_watch.css

@@ -0,0 +1,30 @@
+#shortcutsTableToggleButton {
+  width: 40px;
+  display: inline-block;
+  background-color: transparent;
+  border: transparent;
+  top: -3px;
+}
+
+#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;
+}
+
+#end-marker-numberings {
+  top: 13px;
+}

src/markup/platforms/css/weverse.css

@@ -0,0 +1,29 @@
+#shortcutsTableToggleButton {
+  width: 40px;
+  display: inline-block;
+  background-color: transparent;
+  border: transparent;
+}
+
+#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;
+}
+
+#end-marker-numberings {
+  top: 13px;
+}

src/markup/platforms/platforms.ts

@@ -3,16 +3,27 @@ import { querySelectors } from '../util/util';
 export enum VideoPlatforms {
   youtube = 'youtube',
   vlive = 'vlive',
+  weverse = 'weverse',
+  naver_now_watch = 'naver_now_watch',
 }
 type VideoPlatform<T extends string | HTMLElement> = {
+  // Contains the video element, progress bars, and controls.
   playerContainer: T;
+  // Contains the video element, progress bars, and controls. Is contained by playerContainer
   player: T;
+  // Either playerContainer or player depending on platform.
   videoContainer: T;
+  // The video element.
   video: T;
+  // The progress bar container.
+  progressBar: T;
+  // Where markers should be injected. Typically the progress bar container selected by progressBar.
   markersDiv: T;
+  // An element that indicates whether the player is in theater mode or not.  Currently only relevant for YouTube.
   theaterModeIndicator: T;
-  progressBar: T;
+  // Where the settings editor should be injected. Typically the container below the video player that contains the video title.
   settingsEditor: T;
+  // Where the settings editor should be injected in theater mode.
   settingsEditorTheater: T;
   shortcutsTable: T;
   frameCapturerProgressBar: T;
@@ -29,59 +40,20 @@ type VideoPlatform<T extends string | HTMLElement> = {
 };
 
 type VideoPlatformSelectors = VideoPlatform<string>;
+
 export type VideoPlatformHooks = VideoPlatform<HTMLElement>;
+
 export function getVideoPlatformSelectors(platform: VideoPlatforms): VideoPlatformSelectors {
-  let selectors: VideoPlatformSelectors;
   if (platform === VideoPlatforms.youtube) {
-    selectors = {
-      playerContainer: '#ytd-player #container',
-      player: '#movie_player',
-      videoContainer: '#ytd-player #container',
-      video: 'video',
-      markersDiv: '.ytp-progress-bar',
-      theaterModeIndicator: 'ytd-watch-flexy',
-      progressBar: '.ytp-progress-bar',
-      settingsEditor: '#below',
-      settingsEditorTheater: '#full-bleed-container',
-      shortcutsTable: '#below',
-      frameCapturerProgressBar: '#below',
-      flashMessage: '#below',
-      cropOverlay: '.html5-video-container',
-      cropMouseManipulation: '.html5-video-container',
-      speedChartContainer: '.html5-video-container',
-      cropChartContainer: '#columns',
-      markerNumberingsDiv: '.ytp-chrome-bottom',
-      controls: '.ytp-chrome-bottom',
-      controlsGradient: '.ytp-gradient-bottom',
-      shortcutsTableButton: '.ytp-right-controls',
-      playerClickZone: '.html5-video-container',
-    };
+    return youtubeSelectors;
   } else if (platform === VideoPlatforms.vlive) {
-    selectors = {
-      playerContainer: 'div[class*=player_area]',
-      player: 'div[id$="videoArea"]',
-      videoContainer: 'div[id$="videoArea"]',
-      video: 'video',
-      progressBar: '.u_rmc_progress_bar',
-      markersDiv: '.u_rmc_progress_bar',
-      theaterModeIndicator: 'placeholder',
-      settingsEditor: 'div[class*=player_area]',
-      settingsEditorTheater: 'div[class*=player_area]',
-      shortcutsTable: '[class*="video_title"]',
-      frameCapturerProgressBar: '[class*="video_title"]',
-      flashMessage: '[class*="video_title"]',
-      cropOverlay: 'div[id$="videoArea"]',
-      cropMouseManipulation: '._click_zone[data-video-overlay]',
-      speedChartContainer: '._click_zone[data-video-overlay]',
-      cropChartContainer: '[class*="video_title"]',
-      markerNumberingsDiv: '.u_rmc_progress_bar_container',
-      controls: '.u_rmcplayer_control',
-      controlsGradient: '.u_rmcplayer_control_bg._click_zone',
-      shortcutsTableButton: 'div[class*=video_content]',
-      playerClickZone: '._click_zone[data-video-overlay]',
-    };
+    return vliveSelectors;
+  } else if (platform === VideoPlatforms.naver_now_watch) {
+    return naver_now_watchSelectors;
+  } else if (platform === VideoPlatforms.weverse) {
+    return weverseSelectors;
   }
-  return selectors;
+  return null;
 }
 
 export function getVideoPlatformHooks(selectors: VideoPlatformSelectors): VideoPlatformHooks {
@@ -94,7 +66,107 @@ export function getPlatform() {
     return VideoPlatforms.youtube;
   } else if (host.includes('vlive')) {
     return VideoPlatforms.vlive;
+  } else if (host.includes('now.naver')) {
+    return VideoPlatforms.naver_now_watch;
+  } else if (host.includes('weverse')) {
+    return VideoPlatforms.weverse;
   } else {
     return VideoPlatforms.youtube;
   }
 }
+
+const youtubeSelectors: VideoPlatformSelectors = {
+  playerContainer: '#ytd-player #container',
+  player: '#movie_player',
+  videoContainer: '#ytd-player #container',
+  video: 'video',
+  markersDiv: '.ytp-progress-bar',
+  theaterModeIndicator: 'ytd-watch-flexy',
+  progressBar: '.ytp-progress-bar',
+  settingsEditor: '#below',
+  settingsEditorTheater: '#full-bleed-container',
+  shortcutsTable: '#below',
+  frameCapturerProgressBar: '#below',
+  flashMessage: '#below',
+  cropOverlay: '.html5-video-container',
+  cropMouseManipulation: '.html5-video-container',
+  speedChartContainer: '.html5-video-container',
+  cropChartContainer: '#columns',
+  markerNumberingsDiv: '.ytp-chrome-bottom',
+  controls: '.ytp-chrome-bottom',
+  controlsGradient: '.ytp-gradient-bottom',
+  shortcutsTableButton: '.ytp-right-controls',
+  playerClickZone: '.html5-video-container',
+};
+
+const vliveSelectors: VideoPlatformSelectors = {
+  playerContainer: 'div[class*=player_area]',
+  player: 'div[id$="videoArea"]',
+  videoContainer: 'div[id$="videoArea"]',
+  video: 'video',
+  progressBar: '.u_rmc_progress_bar',
+  markersDiv: '.u_rmc_progress_bar',
+  theaterModeIndicator: 'placeholder',
+  settingsEditor: 'div[class*=player_area]',
+  settingsEditorTheater: 'div[class*=player_area]',
+  shortcutsTable: '[class*="video_title"]',
+  frameCapturerProgressBar: '[class*="video_title"]',
+  flashMessage: '[class*="video_title"]',
+  cropOverlay: 'div[id$="videoArea"]',
+  cropMouseManipulation: '._click_zone[data-video-overlay]',
+  speedChartContainer: '._click_zone[data-video-overlay]',
+  cropChartContainer: '[class*="video_title"]',
+  markerNumberingsDiv: '.u_rmc_progress_bar_container',
+  controls: '.u_rmcplayer_control',
+  controlsGradient: '.u_rmcplayer_control_bg._click_zone',
+  shortcutsTableButton: 'div[class*=video_content]',
+  playerClickZone: '._click_zone[data-video-overlay]',
+};
+
+const naver_now_watchSelectors = {
+  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-pc__progress-slider',
+  markerNumberingsDiv: '.pzp-pc__progress-slider',
+  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]',
+  playerClickZone: '.webplayer-internal-source-wrapper',
+  videoContainer: 'div[class=webplayer-internal-source-wrapper]',
+  video: 'video',
+  progressBar: '.pzp-pc__progress-slider',
+  markersDiv: '.pzp-pc__progress-slider',
+  markerNumberingsDiv: '.pzp-pc__progress-slider',
+  theaterModeIndicator: 'placeholder',
+  settingsEditor: 'div[class*=HeaderView_container]',
+  settingsEditorTheater: 'div[class*=HeaderView_container]',
+  shortcutsTable: 'div[class*="HeaderView_container"]',
+  frameCapturerProgressBar: 'div[class*="HeaderView_container"]',
+  flashMessage: 'div[class*="HeaderView_container"]',
+  cropOverlay: '.webplayer-internal-source-wrapper',
+  cropMouseManipulation: '.webplayer-internal-source-wrapper',
+  speedChartContainer: '.webplayer-internal-video',
+  cropChartContainer: 'div[class*="HeaderView_container"]',
+  controls: '.pzp-pc__bottom-buttons',
+  controlsGradient: '.pzp-pc__bottom-buttons',
+  shortcutsTableButton: '.pzp-pc__bottom-buttons-right',
+};