9027 video stream channel hidden hot fix (#9028)

* Add Paragraph field, text area

* fix the bug, change layout of streamyard iframe, change guide lines on adding new channel section

Author: minhho89

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

@@ -251,7 +251,7 @@
     <UiPopup
       @tagName="i"
       @class="info circle icon"
-      @content={{t 'Translation Channels used to add languages translation stream to help ...'}} />
+      @content={{t 'Only streams are supported. Please add a streaming link here. Share or embed links of recorded sessions are not supported.'}} />
   </label>
 
   {{#each this.translationChannels as |channel index|}}

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

@@ -20,12 +20,15 @@
   {{/if}}
 
 	{{#if this.selectingLanguage.selectingLanguage}}
-    {{#if this.selectingLanguage.isStreamYardVisible}}
-      <button class="ui button" style="position:absolute;top:120px; left:650px;z-index: 2" {{on "click" this.hideStreamYard}}>Hide This</button>
-      <div id="streamyard-iframe" style="position:absolute;top:40px; left:340px; width:100%;height:0px;position:relative;padding-bottom:56.25%;margin-bottom:20px">
-        <iframe id="streamyard-iframe-player" src="{{this.selectingLanguage.selectingLanguage}}" width="10%" height="10%" frameborder="0" style="width:30%;height:30%;position:absolute;left:0px;top:0px;overflow:hidden;" title="Vimeo Live Stream" ></iframe>
-    </div>
+    <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/styles/app.scss

@@ -17,3 +17,12 @@ body {
   font-size: 14px;
 }
 
+.visibile {
+  display: block;
+}
+
+.sink {
+  position: absolute;
+  z-index: -1;
+}
+