Streamyard to youtube translation (#9033)

* Add Paragraph field, text area

* [DO NOT MERGE]remove the streamyard, add youtube for translation, hard-coded translation link only for test

* get Youtube link and extract Youtube ID from form to video stream. Add responsive for side panel

Author: minhho89

app/components/forms/orders/order-form.js

@@ -538,8 +538,7 @@ export default Component.extend(FormMixin, {
               }
             ]
           };
-        }
-        else {
+        } else {
           validationRules.fields[`${field.fieldIdentifier}_required_${index}`] = {
             rules: [
               {

app/components/public/stream/side-panel.hbs

@@ -64,7 +64,7 @@
               <span class="ml-2">{{stream.name}}</span>
               {{#if (eq index 0)}}
                 {{#if (gt this.translationChannels.length 1)}}
-								<div style="display:inline-block;margin-left:80px">
+								<div style="display:inline-block;margin-left:50px">
                   <div class="translation-dropdown-button translation-dropdown-container ">
                     <UiDropdown class="btn btn-secondary dropdown-toggle"
                                 @onChange={{ action "switchLanguage"}}>

app/components/public/stream/side-panel.ts

@@ -108,6 +108,7 @@ export default class PublicStreamSidePanel extends Component<Args> {
   @action
   switchLanguage(url: string): void {
     this.selectingLanguage.setLanguage(url);
+    this.selectingLanguage.updateTranslationYTId();
   }
 
   @action

app/components/public/stream/video-stream.hbs

@@ -7,29 +7,26 @@
   {{#if this.iframeUrl}}
     <iframe style="position: absolute;width: 100%; height: 100%; border: 0px;" src="{{this.iframeUrl}}" title="{{this.iframeTitle}}" allow="camera; microphone; display-capture" allowfullscreen="true"/>
   {{/if}}
+
+{{#if this.selectingLanguage.selectingLanguage}}
+
+  <iframe style="position: absolute;width: 50%; height: 100%; z-index: -1" id="video-player-translation" width="50%" height="50%" frameborder="0" title="YouTube Live Stream Translation"
+          src="https://www.youtube.com/embed/{{this.selectingLanguage.translationYoutubeId}}?enablejsapi=1&autoplay=1&modestbranding=1&loop=1&controls=0&disablekb=1"
+  gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
+{{/if}}
+
   {{#if (eq @videoStream.videoChannel.provider 'jitsi')}}
     <Public::Stream::JitsiStream @videoStream={{@videoStream}} />
   {{/if}}
   {{#if (eq this.provider 'youtube')}}
-      <iframe style="position: absolute" id="video-player" width="100%" height="100%" frameborder="0" title="YouTube Live Stream"
+      <iframe style="position: absolute;width: 100%; height: 100%;" id="video-player" width="50%" height="50%" frameborder="0" title="YouTube Live Stream"
               src="https://www.youtube.com/embed/{{this.youtubeId}}?enablejsapi=1&playlist={{this.youtubeId}}&autoplay=1&modestbranding=1&loop={{if @videoStream.extra.loop 1 0}}&mute={{if (eq this.selectingLanguage.selectingLanguage null) 0 1}}&controls=0&disablekb=1"
       gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
   {{/if}}
   {{#if (and (eq @videoStream.videoChannel.provider 'vimeo') this.vimeoId)}}
-    <iframe style="position: absolute" src="https://player.vimeo.com/video/{{this.vimeoId}}?autoplay={{if @videoStream.extra.autoplay 1 0}}&loop={{if @videoStream.extra.loop 1 0}}" width="100%" height="100%" frameborder="0" allow="autoplay" title="StreamYard Live Stream" allowfullscreen="true"></iframe>
+    <iframe style="position: absolute" src="https://player.vimeo.com/video/{{this.vimeoId}}?autoplay={{if @videoStream.extra.autoplay 1 0}}&loop={{if @videoStream.extra.loop 1 0}}" width="50%" height="50%" frameborder="0" allow="autoplay" title="StreamYard Live Stream" allowfullscreen="true"></iframe>
   {{/if}}
 
-	{{#if this.selectingLanguage.selectingLanguage}}
-    <div >
-      {{#if this.selectingLanguage.isStreamYardVisible}}
-        <button class="ui button" style="position:absolute;top:5%; left:650px;z-index: 2" {{on "click" this.hideStreamYard}}>Hide This</button>
-      {{/if}}
-        <div id="streamyard-iframe" style="position:absolute;top:30%; left:431px; width:50%;height:0px;position:relative;padding-bottom:56.25%;margin-bottom:20px" class={{if this.selectingLanguage.isStreamYardVisible "visibile" "sink"}}>
-          <iframe id="streamyard-iframe-player" src="{{this.selectingLanguage.selectingLanguage}}" width="50%" height="50%" frameborder="0" style="width:30%;height:30%;position:absolute;left:0px;top:0px;" title="Stream Yard Live Stream" ></iframe>
-        </div>
-
-    </div>
-  {{/if}}
 </div>
 <Public::Stream::SidePanel @event={{@event}} @videoStream={{@videoStream}} @selectingLanguage={{this.selectingLanguage}} @shown={{true}} @showChatPanel={{this.showChatPanel}} @setupRoomChat={{action 'setupRoomChat'}} @currentRoom={{this.currentRoom}} @streamId={{@streamId}}/>
 

app/components/public/stream/video-stream.ts

@@ -39,9 +39,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @tracked
   iframeUrl = '';
 
-  @tracked
-  translationIframeUrl = '';
-
   @tracked
   youtubeId = '';
 
@@ -60,18 +57,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @tracked
   provider = '';
 
-  @tracked
-  player = null;
-
-  @tracked
-  player2 = null;
-
-  @tracked
-  players = [];
-
-  @tracked
-  isPlaying: any;
-
   @service
   selectingLanguage: any;
 
@@ -83,13 +68,12 @@ export default class PublicStreamVideoStream extends Component<Args> {
     return this.authManager.currentUser?.isRocketChatRegistered && this.args.event.isChatEnabled;
   }
 
-
   @action
   async setup(): Promise<void> {
     const stream = this.args.videoStream;
     this.loading = true;
     this.iframeUrl = '';
-    this.languageUrl = this.selectingLanguage.selectingLanguage;
+
 
     if (stream.url.includes('youtube')) {
       this.provider = 'youtube';
@@ -188,4 +172,5 @@ export default class PublicStreamVideoStream extends Component<Args> {
   hideStreamYard() {
     this.selectingLanguage.setStreamYardVisibility(false);
   }
+
 }

app/services/selecting-language.js

@@ -8,6 +8,9 @@ export default class SelectingLanguageService extends Service {
   @tracked
   isStreamYardVisible = true;
 
+  @tracked
+  translationYoutubeId = null;
+
   setLanguage(language) {
     this.selectingLanguage = language;
     this.isStreamYardVisible = true;
@@ -17,6 +20,15 @@ export default class SelectingLanguageService extends Service {
     this.isStreamYardVisible = isVisible;
   }
 
+  updateTranslationYTId() {
+    if (this.selectingLanguage.includes('youtube')) {
+      const [, id] = this.selectingLanguage.split('v=');
+      if (id) {
+        this.translationYoutubeId = id;
+      }
+    }
+  }
+
   getLanguage() {
     return this.selectingLanguage;
   }

app/styles/app.scss

@@ -17,8 +17,9 @@ body {
   font-size: 14px;
 }
 
-.visibile {
+.visible {
   display: block;
+  z-index: 1;
 }
 
 .sink {

app/styles/components/stream.scss

@@ -66,7 +66,7 @@
 }
 
 .stream-side-panel {
-  width: 420px;
+  width: 320px;
   height: 100%;
   position: fixed;
   top: 0;
@@ -77,6 +77,10 @@
   overflow: hidden;
   overflow-y: auto;
   z-index: 1;
+
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 }
 
 .chat-side-panel {