feat: add public stream as iframe (#8469)

* feat: add public stream as iframe

* allow fullscreen

Author: pavnesh-c

app/models/event.js

@@ -33,6 +33,8 @@ export default class Event extends ModelBase.extend(CustomPrimaryKeyMixin, {
   locationName           : attr('string'),
   searchableLocationName : attr('string'),
 
+  publicStreamLink: attr('string'),
+
   longitude : attr('number', { defaultValue: 0.0 }),
   latitude  : attr('number', { defaultValue: 0.0 }),
 

app/styles/pages/events.scss

@@ -107,3 +107,21 @@
   z-index: 1;
   animation: anima .2s ease-in-out 1 both;
 }
+
+.container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  padding-top: 56.25%;
+}
+
+.responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}

app/templates/components/forms/wizard/basic-details-step.hbs

@@ -74,6 +74,13 @@
     <div class="mb-2 mt-2">
       {{t 'You can add video meeting rooms or streams after you created a draft of the event.'}}
     </div>
+    <div class="field mt-6">
+      <label for="stream">{{t 'Public Stream Link'}}</label>
+      <Input
+        @type="text"
+        @id="stream"
+        @value={{this.data.event.publicStreamLink}} />
+    </div>
   {{/if}}
  <br>
   <div class="fields">

app/templates/public/index.hbs

@@ -5,6 +5,11 @@
     </div>
     <div class="ui hidden divider"></div>
   {{/if}}
+  {{#if this.model.event.publicStreamLink}}
+    <div class="container">
+      <iframe class="responsive-iframe" title="{{this.model.event.name}}" src="{{this.model.event.publicStreamLink}}" allowfullscreen></iframe>
+    </div>
+  {{/if}}
   {{#if (and this.model.event.isOneclickSignupEnabled this.model.tickets)}}
     <h2 id="tickets">{{t 'Registration'}}</h2>
     {{!-- template-lint-disable style-concatenation --}}