feature-9005: Provide option of Youtube integration with Privacy Enhanced Mode (#9042)

* feature-9005: Provide option of Youtube integration with Privacy Enhanced Mode

* feature-9005: Provide option of Youtube integration with Privacy Enhanced Mode

---------

Co-authored-by: Khang On - TMA <[email protected]>

Author: Hieu Lam - TMA

app/components/forms/events/view/videoroom-form.hbs

@@ -56,6 +56,12 @@
           @site="youtube"
           @value={{this.data.stream.url}}
           @onChange={{action (mut this.data.stream.url)}} />
+      {{else if (eq this.data.stream.videoChannel.provider 'youtube_privacy')}}
+        <Widgets::Forms::SocialLinkField
+          @fixed={{true}}
+          @site="youtube privacy"
+          @value={{this.data.stream.url}}
+          @onChange={{action (mut this.data.stream.url)}} />
       {{else if (eq this.data.stream.videoChannel.provider 'vimeo')}}
         <Widgets::Forms::SocialLinkField
           @fixed={{true}}
@@ -92,7 +98,7 @@
     <Textarea
       @value={{this.data.stream.additionalInformation}} />
   </div>
-  {{#if (or (eq this.data.stream.videoChannel.provider 'youtube') (eq this.data.stream.videoChannel.provider 'vimeo'))}}
+  {{#if (or (eq this.data.stream.videoChannel.provider 'youtube_privacy') (or (eq this.data.stream.videoChannel.provider 'youtube') (eq this.data.stream.videoChannel.provider 'vimeo')))}}
     <div class="field">
       <label for="public_name">
         {{t 'Autoplay'}}

app/components/forms/events/view/videoroom-form.js

@@ -306,6 +306,12 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
     this.data.stream.set('url', 'watch?v=');
   }
 
+  @action
+  async addYoutubePrivacy() {
+    this.data.stream.set('extra', { autoplay: true, loop: false });
+    this.data.stream.set('url', 'watch?v=');
+  }
+
   @action
   async addVimeo() {
     this.data.stream.set('extra', { autoplay: true, loop: false });
@@ -327,6 +333,9 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
       case 'youtube':
         this.addYoutube();
         break;
+      case 'youtube_privacy':
+        this.addYoutubePrivacy();
+        break;
       case 'vimeo':
         this.addVimeo();
         break;
@@ -573,7 +582,7 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
     }
     if (
       this.data.stream.extra === null
-      && ['vimeo', 'youtube'].includes(
+      && ['vimeo', 'youtube', 'youtube_privacy'].includes(
         this.data.stream.videoChannel.get('provider')
       )
     ) {

app/utils/dictionary/social-media.ts

@@ -1,4 +1,23 @@
-export const socialMediaNames = ['Facebook', 'Flickr', 'GitHub', 'GitLab', 'Gitter', 'Google Groups', 'Instagram', 'Linkedin', 'Mastodon', 'Patreon', 'Telegram', 'Twitter', 'Vimeo', 'VK', 'Weibo', 'Xing', 'YouTube'];
+export const socialMediaNames = [
+  'Facebook',
+  'Flickr',
+  'GitHub',
+  'GitLab',
+  'Gitter',
+  'Google Groups',
+  'Instagram',
+  'Linkedin',
+  'Mastodon',
+  'Patreon',
+  'Telegram',
+  'Twitter',
+  'Vimeo',
+  'VK',
+  'Weibo',
+  'Xing',
+  'YouTube',
+  'YouTube Privacy'
+];
 
 const identifierOverrides: { [key: string]: string } = {
   'Google Groups': 'groups.google'
@@ -9,9 +28,10 @@ export const socialMediaIdentifiers = socialMediaNames.map(name => {
 });
 
 const prefixOverrides: { [key: string]: string } = {
-  'gitter'   : 'https://gitter.im/',
-  'telegram' : 'https://t.me/',
-  'mastodon' : 'https://'
+  'gitter'          : 'https://gitter.im/',
+  'telegram'        : 'https://t.me/',
+  'mastodon'        : 'https://',
+  'youtube privacy' : 'https://youtube-nocookie.com/'
 };
 
 export interface SocialMedia {