Feature/youtube parameters (#3307)

* Fixed allowFullscreen not working correctly. Added autoplay and progress bar color parameters

* Added cc language preference, cc load policy, disable keyboard controls, end time and interface language parameters

* Added enable IFrame API, iv load policy, loop, modest branding, origin and playlist parameters

* Updated the youtube extension documentation

Co-authored-by: luis.feliu <luis.feliu@mentormate.com>

docs/api/nodes/youtube.md

@@ -82,6 +82,149 @@ Youtube.configure({
 })
 ```
 
+### autoplay
+Allows the iframe to to start playing after the player is loaded
+
+Default: `false`
+
+```js
+Youtube.configure({
+  autoplay: true,
+})
+```
+
+### ccLanguage
+Specifies the default language that the player will use to display closed captions. Set the parameter's value to an ISO 639-1 two-letter language code. For example, setting it to `es` will cause the captions to be in spanish
+
+Default: `en`
+
+```js
+Youtube.configure({
+  ccLanguage: 'es',
+})
+```
+
+### ccLoadPolicy
+Setting this parameter's value to `true` causes closed captions to be shown by default, even if the user has turned captions off
+
+Default: `false`
+
+```js
+Youtube.configure({
+  ccLoadPolicy: 'true',
+})
+```
+
+### disableKBcontrols
+Disables the keyboards controls for the iframe player
+
+Default: `false`
+
+```js
+Youtube.configure({
+  disableKBcontrols: 'true',
+})
+```
+
+### enableIFrameApi
+Enables the player to be controlled via IFrame Player API calls
+
+Default: `false`
+
+```js
+Youtube.configure({
+  enableIFrameApi: 'true',
+})
+```
+
+### origin
+This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds. If you are using the IFrame API, which means you are setting the `enableIFrameApi` parameter value to `true`, you should always specify your domain as the `origin` parameter value. 
+
+Default: `''`
+
+```js
+Youtube.configure({
+  origin: 'yourdomain.com',
+})
+```
+
+### endTime
+This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video. 
+For example, setting it to `15` will make the video stop at the 15 seconds mark
+
+Default: `0`
+
+```js
+Youtube.configure({
+  endTime: '15',
+})
+```
+
+### interfaceLanguage
+Sets the player's interface language. The parameter value is an ISO 639-1 two-letter language code. For example, setting it to `fr` will cause the interface to be in french
+
+Default: `en`
+
+```js
+Youtube.configure({
+  interfaceLanguage: 'fr',
+})
+```
+
+### ivLoadPolicy
+Setting this to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default
+
+Default: `1`
+
+```js
+Youtube.configure({
+  ivLoadPolicy: '3',
+})
+```
+
+### loop
+This parameter has limited support in IFrame embeds. To loop a single video, set the loop parameter value to `true` and set the playlist parameter value to the same video ID already specified in the Player API URL.
+
+Default: `false`
+
+```js
+Youtube.configure({
+  loop: 'true',
+})
+```
+
+### playlist
+This parameter specifies a comma-separated list of video IDs to play.
+
+Default: `''`
+
+```js
+Youtube.configure({
+  playlist: 'VIDEO_ID_1,VIDEO_ID_2,VIDEO_ID_3,...,VIDEO_ID_N',
+})
+```
+
+### modestBranding
+Disables the Youtube logo on the control bar of the player. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player
+
+Default: `false`
+
+```js
+Youtube.configure({
+  modestBranding: 'true',
+})
+```
+
+### progressBarColor
+This parameter specifies the color that will be used in the player's video progress bar. Note that setting the color parameter to `white` will disable the `modestBranding` parameter
+
+Default: `red`
+
+```js
+Youtube.configure({
+  progressBarColor: 'white',
+})
+```
 
 ## Commands
 

packages/extension-youtube/src/utils.ts

@@ -7,8 +7,22 @@ export const isValidYoutubeUrl = (url: string) => {
 
 export interface GetEmbedUrlOptions {
   url: string;
+  allowFullscreen?: boolean;
+  autoplay?: boolean;
+  ccLanguage?:string;
+  ccLoadPolicy?:boolean;
   controls?: boolean;
+  disableKBcontrols?: boolean,
+  enableIFrameApi?: boolean;
+  endTime?: number;
+  interfaceLanguage?: string;
+  ivLoadPolicy?: number;
+  loop?: boolean;
+  modestBranding?: boolean;
   nocookie?: boolean;
+  origin?: string;
+  playlist?: string;
+  progressBarColor?: string;
   startAt?: number;
 }
 
@@ -19,8 +33,22 @@ export const getYoutubeEmbedUrl = (nocookie?: boolean) => {
 export const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {
   const {
     url,
+    allowFullscreen,
+    autoplay,
+    ccLanguage,
+    ccLoadPolicy,
     controls,
+    disableKBcontrols,
+    enableIFrameApi,
+    endTime,
+    interfaceLanguage,
+    ivLoadPolicy,
+    loop,
+    modestBranding,
     nocookie,
+    origin,
+    playlist,
+    progressBarColor,
     startAt,
   } = options
 
@@ -50,14 +78,70 @@ export const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {
 
   const params = []
 
+  if (!allowFullscreen) {
+    params.push('fs=0')
+  }
+
+  if (autoplay) {
+    params.push('autoplay=1')
+  }
+
+  if (ccLanguage) {
+    params.push(`cc_lang_pref=${ccLanguage}`)
+  }
+
+  if (ccLoadPolicy) {
+    params.push('cc_load_policy=1')
+  }
+
   if (!controls) {
     params.push('controls=0')
   }
 
+  if (disableKBcontrols) {
+    params.push('disablekb=1')
+  }
+
+  if (enableIFrameApi) {
+    params.push('enablejsapi=1')
+  }
+
+  if (endTime) {
+    params.push(`end=${endTime}`)
+  }
+
+  if (interfaceLanguage) {
+    params.push(`hl=${interfaceLanguage}`)
+  }
+
+  if (ivLoadPolicy) {
+    params.push(`iv_load_policy=${ivLoadPolicy}`)
+  }
+
+  if (loop) {
+    params.push('loop=1')
+  }
+
+  if (modestBranding) {
+    params.push('modestbranding=1')
+  }
+
+  if (origin) {
+    params.push(`origin=${origin}`)
+  }
+
+  if (playlist) {
+    params.push(`playlist=${playlist}`)
+  }
+
   if (startAt) {
     params.push(`start=${startAt}`)
   }
 
+  if (progressBarColor) {
+    params.push(`color=${progressBarColor}`)
+  }
+
   if (params.length) {
     outputUrl += `?${params.join('&')}`
   }

packages/extension-youtube/src/youtube.ts

@@ -5,11 +5,24 @@ import { getEmbedURLFromYoutubeURL, isValidYoutubeUrl, YOUTUBE_REGEX_GLOBAL } fr
 export interface YoutubeOptions {
   addPasteHandler: boolean;
   allowFullscreen: boolean;
+  autoplay: boolean;
+  ccLanguage: string;
+  ccLoadPolicy: boolean;
   controls: boolean;
+  disableKBcontrols: boolean;
+  enableIFrameApi: boolean;
+  endTime: number;
   height: number;
-  HTMLAttributes: Record<string, any>,
+  interfaceLanguage: string;
+  ivLoadPolicy: number;
+  loop: boolean;
+  modestBranding: boolean;
+  HTMLAttributes: Record<string, any>;
   inline: boolean;
   nocookie: boolean;
+  origin: string;
+  playlist: string;
+  progressBarColor: string;
   width: number;
 }
 
@@ -31,11 +44,24 @@ export const Youtube = Node.create<YoutubeOptions>({
     return {
       addPasteHandler: true,
       allowFullscreen: false,
+      autoplay: false,
+      ccLanguage: 'en',
+      ccLoadPolicy: false,
       controls: true,
+      disableKBcontrols: false,
+      enableIFrameApi: false,
+      endTime: 0,
       height: 480,
+      interfaceLanguage: 'en',
+      ivLoadPolicy: 1,
+      loop: false,
+      modestBranding: false,
       HTMLAttributes: {},
       inline: false,
       nocookie: false,
+      origin: '',
+      playlist: '',
+      progressBarColor: 'red',
       width: 640,
     }
   },
@@ -109,8 +135,22 @@ export const Youtube = Node.create<YoutubeOptions>({
   renderHTML({ HTMLAttributes }) {
     const embedUrl = getEmbedURLFromYoutubeURL({
       url: HTMLAttributes.src,
+      allowFullscreen: this.options.allowFullscreen,
+      autoplay: this.options.autoplay,
+      ccLanguage: this.options.ccLanguage,
+      ccLoadPolicy: this.options.ccLoadPolicy,
       controls: this.options.controls,
+      disableKBcontrols: this.options.disableKBcontrols,
+      enableIFrameApi: this.options.enableIFrameApi,
+      endTime: this.options.endTime,
+      interfaceLanguage: this.options.interfaceLanguage,
+      ivLoadPolicy: this.options.ivLoadPolicy,
+      loop: this.options.loop,
+      modestBranding: this.options.modestBranding,
       nocookie: this.options.nocookie,
+      origin: this.options.origin,
+      playlist: this.options.playlist,
+      progressBarColor: this.options.progressBarColor,
       startAt: HTMLAttributes.start || 0,
     })
 
@@ -127,6 +167,19 @@ export const Youtube = Node.create<YoutubeOptions>({
             width: this.options.width,
             height: this.options.height,
             allowfullscreen: this.options.allowFullscreen,
+            autoplay: this.options.autoplay,
+            ccLanguage: this.options.ccLanguage,
+            ccLoadPolicy: this.options.ccLoadPolicy,
+            disableKBcontrols: this.options.disableKBcontrols,
+            enableIFrameApi: this.options.enableIFrameApi,
+            endTime: this.options.endTime,
+            interfaceLanguage: this.options.interfaceLanguage,
+            ivLoadPolicy: this.options.ivLoadPolicy,
+            loop: this.options.loop,
+            modestBranding: this.options.modestBranding,
+            origin: this.options.origin,
+            playlist: this.options.playlist,
+            progressBarColor: this.options.progressBarColor,
           },
           HTMLAttributes,
         ),