[#60] Implement YT video on m.youtube.com

Author: cpiber

src/scripts/content/youtube/html.ts

@@ -5,7 +5,7 @@ const goChannel = getBrowserInstance().i18n.getMessage('pageGoChannel');
 const videoConfidence = getBrowserInstance().i18n.getMessage('pageVideoConfidence');
 const searchConfidence = getBrowserInstance().i18n.getMessage('pageSearchConfidence');
 
-export const constructButton = (vid: nebulavideo) => {
+export const constructButton = (vid: nebulavideo, isMobile = false) => {
   if (!document.querySelector('.watch-on-nebula') || document.querySelector('.watch-on-nebula').children.length === 0) {
     Array.from(document.querySelectorAll<HTMLElement>('.watch-on-nebula')).forEach(n => n.remove());
     // for some reason youtube custom elements clear their inner html in construct, so we have to do it like this
@@ -24,7 +24,7 @@ export const constructButton = (vid: nebulavideo) => {
     bdiv.className = 'cbox yt-spec-button-shape-next--button-text-content';
     const bspan = bdiv.appendChild(document.createElement('span'));
     bspan.className = 'yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap';
-    bspan.textContent = watchOnNebula;
+    bspan.textContent = isMobile ? 'Nebula' : watchOnNebula;
     bspan.setAttribute('href', vid.link);
     const bfeedback = btn.appendChild(document.createElement('yt-touch-feedback-shape'));
     bfeedback.style.borderRadius = 'inherit';

src/scripts/content/youtube/index.ts

@@ -27,8 +27,6 @@ export const youtube = async () => {
     setTimeout(run, 100);
   });
 
-  if (location.host.startsWith('m.')) return console.error('Enhancer for Nebula: YouTube mobile is currently not supported!');
-
   Array.from(document.querySelectorAll<HTMLElement>('.watch-on-nebula')).forEach(n => n.remove());
   setTimeout(run, 0);
 
@@ -40,6 +38,14 @@ export const youtube = async () => {
     console.log('VID id', vidDetails.videoId, 'title', vidDetails.title, 'CHANNEL author', vidDetails.author, 'Id', vidDetails.channelId);
     run({ vidID: vidDetails.videoId, videoTitle: vidDetails.title, channelID: vidDetails.channelId, channelNice: vidDetails.author });
   });
+  window.addEventListener('state-navigateend', (e: CustomEvent) => {
+    console.dev.log('NAVIGATE2', e);
+    const vidDetails = e.detail?.data?.response?.playerResponse?.videoDetails as YouTubePlayer.VideoDetails;
+    remove();
+    if (!vidDetails) return;
+    console.log('VID id', vidDetails.videoId, 'title', vidDetails.title, 'CHANNEL author', vidDetails.author, 'Id', vidDetails.channelId);
+    run({ vidID: vidDetails.videoId, videoTitle: vidDetails.title, channelID: vidDetails.channelId, channelNice: vidDetails.author });
+  });
 };
 
 const action = new CancellableRepeatingAction();
@@ -55,8 +61,9 @@ const run = debounce(async ({ vidID, videoTitle, channelID, channelNice }: { vid
   if (!options.watchnebula) return Array.from(document.querySelectorAll<HTMLElement>('.watch-on-nebula')).forEach(n => n.remove());
   let first = true;
   let channelName = channelNice;
+  const isMobile = location.host.startsWith('m.');
 
-  async function* videoDetailsFromDOM() {
+  async function* videoDetailsFromDOMDesktop() {
     if (first && vidID && videoTitle && channelID && channelNice) return;
 
     const channelElement = document.querySelector<HTMLAnchorElement>(
@@ -68,7 +75,7 @@ const run = debounce(async ({ vidID, videoTitle, channelID, channelNice }: { vid
 
     // accessing custom attributes is not possible from content scripts, so inject this helper
     const foundChannelID = await injectFunctionWithReturn(document.body, () =>
-      (document.querySelector('ytd-channel-name .yt-simple-endpoint') as any).data.browseEndpoint.browseId as string);
+      (document.querySelector('ytd-channel-name .yt-simple-endpoint') as any)?.data?.browseEndpoint?.browseId as string);
     channelID ??= foundChannelID;
     if (first && channelID !== foundChannelID) {
       channelName = channelNice;
@@ -82,8 +89,40 @@ const run = debounce(async ({ vidID, videoTitle, channelID, channelNice }: { vid
     vidID ??= idElement.getAttribute('video-id');
   }
 
+  async function* videoDetailsFromDOMMobile() {
+    if (first && vidID && videoTitle && channelID && channelNice) return;
+
+    const channelElement = document.querySelector<HTMLAnchorElement>('a.slim-owner-icon-and-title[href^="/@"]');
+    const titleElement = document.querySelector<HTMLSpanElement>('h2.slim-video-information-title span');
+    const idElement = document.querySelector('ytm-slim-video-metadata-section-renderer');
+    console.dev.debug('Elements', !!channelElement, !!titleElement, !!idElement);
+    if (!channelElement || !titleElement || !idElement) yield true; // retry
+
+    // accessing custom attributes is not possible from content scripts, so inject this helper
+    const foundChannelID = await injectFunctionWithReturn(document.body, () =>
+      (document.querySelector('ytm-slim-owner-renderer') as any)?.data?.navigationEndpoint?.browseEndpoint?.browseId as string);
+    channelID ??= foundChannelID;
+    if (first && channelID !== foundChannelID) {
+      channelName = channelNice;
+    } else if (!first && channelID !== foundChannelID) {
+      yield true; // retry
+    } else {
+      channelName = channelElement.href.split('/').pop();
+    }
+
+    videoTitle ??= titleElement.textContent;
+    if (!vidID) {
+      vidID = await injectFunctionWithReturn(document.body, () =>
+        (document.querySelector('ytm-slim-video-metadata-section-renderer') as any)?.data?.videoId as string);
+    }
+  }
+
   await action.run(async function* () {
-    yield* videoDetailsFromDOM();
+    if (isMobile) {
+      yield* videoDetailsFromDOMMobile();
+    } else {
+      yield* videoDetailsFromDOMDesktop();
+    }
     const vid: nebulavideo = await getBrowserInstance().runtime.sendMessage({ type: BrowserMessage.GET_VID, channelID, channelName, channelNice, videoTitle });
     console.debug('got video information',
       '\nchannelID:', channelID, 'channelName:', channelName, '(', channelNice, ')', 'videoTitle:', videoTitle, 'vidID:', vidID,
@@ -98,11 +137,18 @@ const run = debounce(async ({ vidID, videoTitle, channelID, channelNice }: { vid
     console.dev.log('Found video:', vid);
     first = false;
 
-    const subscribeElement = document.querySelector<HTMLDivElement>('ytd-watch-metadata #subscribe-button, ytd-video-secondary-info-renderer #subscribe-button');
+    const subscribeElement = !isMobile ?
+      document.querySelector<HTMLDivElement>('ytd-watch-metadata #subscribe-button, ytd-video-secondary-info-renderer #subscribe-button') :
+      document.querySelector<HTMLDivElement>('ytm-slim-owner-renderer .slim-owner-subscribe-button');
     if (!subscribeElement) yield true; // retry
 
-    subscribeElement.before(constructButton(vid));
-    subscribeElement.closest<HTMLDivElement>('#top-row.ytd-watch-metadata').style.display = 'block'; // not the prettiest, but it works
+    const button = constructButton(vid, isMobile);
+    subscribeElement.before(button);
+    if (!isMobile) {
+      subscribeElement.closest<HTMLDivElement>('#top-row.ytd-watch-metadata').style.display = 'block'; // not the prettiest, but it works
+    } else {
+      button.style.marginRight = '5px';
+    }
     if ((window.history.state || {})['_enhancer_checked'] === true) return console.debug('Ignoring video since already processed');
 
     const { ytOpenTab: doOpenTab, ytMuteOnly: muteOnly, ytReplaceTab: replaceTab } = options;