Fix YouTube error 153 in tutorial videos

src/controls/TutorialButton.tsx

@@ -10,7 +10,7 @@ import { setTutorialOpen } from '../actions/session';
 import getEmbedLink from '../tutorialManager';
 import { IYoutubeInfo } from '../types/YoutubeInfo';
 
-import { ComponentEx, Icon, Overlay, tooltip, util, Webview } from 'vortex-api';
+import { ComponentEx, Icon, Overlay, tooltip, util } from 'vortex-api';
 
 export const VIDEO_WIDTH = 560;
 export const VIDEO_HEIGHT = 315;
@@ -53,20 +53,15 @@ type IProps = IBaseProps & IConnectedProps & IActionProps;
  * @param {IProps} props
  * @returns
  */
-class TutorialButton extends ComponentEx<IProps, { fullscreen: boolean }> {
+class TutorialButton extends ComponentEx<IProps, {}> {
   private mRef: Element;
 
   constructor(props: IProps) {
     super(props);
-
-    this.initState({
-      fullscreen: false,
-    });
   }
 
   public render(): JSX.Element {
     const { dropdown, children, video, t, tutorialId, orientation, isOpen } = this.props;
-    const { fullscreen } = this.state;
 
     if (video === undefined) {
       return null;
@@ -98,18 +93,24 @@ class TutorialButton extends ComponentEx<IProps, { fullscreen: boolean }> {
     const popover = (
       <Popover
         id={`popover-${video.group}-${video.id}`}
-        className={`tutorial-popover ${fullscreen ? 'tutorial-popover-fullscreen' : ''}`}
+        className='tutorial-popover'
         title={popOverTitle}
         onClick={this.stopClickEvent}
       >
         <div>
-          <Webview
-            style={{width: VIDEO_WIDTH, height: VIDEO_HEIGHT}}
-            src={getEmbedLink(video.ytId, video.start, video.end)}
-            allowFullScreen
-            onNewWindow={this.onNewWindow}
-            onFullscreen={this.onFullscreen}
+          <iframe
+            {...{
+              width: VIDEO_WIDTH,
+              height: VIDEO_HEIGHT,
+              src: getEmbedLink(video.ytId, video.start, video.end),
+              referrerPolicy: 'strict-origin-when-cross-origin',
+              allow: 'encrypted-media; web-share; fullscreen',
+              title: 'YouTube video player',
+              style: { border: 0 },
+              allowFullScreen: true,
+            } as any}
           />
+          <p className='youtube-privacy-notice'>{t('Playing this video will store cookies on your device')}</p>
           {children ? children.split('\n\n').map((paragraph) =>
             <p key={video.id}>{paragraph}</p>) : null}
         </div>
@@ -151,14 +152,6 @@ class TutorialButton extends ComponentEx<IProps, { fullscreen: boolean }> {
     }
   }
 
-  private onFullscreen = (fullscreen: boolean) => {
-    this.nextState.fullscreen = fullscreen;
-  }
-
-  private onNewWindow = (url: string) => {
-    util.opn(url).catch(() => null);
-  }
-
   private stopClickEvent = (e) => {
     e.stopPropagation();
   }

src/stylesheets/documentation.scss

@@ -34,6 +34,13 @@ $tut-video-height: 315;
 
 .tutorial-popover { max-width: 100%; }
 
+.tutorial-popover .youtube-privacy-notice {
+  font-size: 0.85em;
+  opacity: 0.7;
+  margin: 8px 0;
+  text-align: center;
+}
+
 .tutorial-popover-fullscreen {
   position: absolute;
   top: 0 !important;

src/tutorialManager.ts

@@ -1,7 +1,7 @@
 import IYoutubeInfo, { createTutorialVideo } from './types/YoutubeInfo';
 
 // Used when generating the embedding link to use within the tutorial popover window.
-const YOUTUBE_LINK = 'https://www.youtube.com/embed/';
+const YOUTUBE_LINK = 'https://www.youtube-nocookie.com/embed/';
 
 // Tutorial buttons which are assigned the todo group will registered as
 //  todo items on the dashboard.
@@ -93,7 +93,7 @@ function getEmbedLink(id: string, start: string | number, end: string | number):
     endSeconds = 0;
   }
 
-  return srcLink + id + '?start=' + startSeconds + '&end=' + endSeconds + ';autoplay=1';
+  return srcLink + id + '?start=' + startSeconds + '&end=' + endSeconds;
 }
 
 /**