Merge pull request #8478 from pc-beast/loop-autoplay

feat: allow loop and autoplay to public youtube stream

Author: mariobehling

app/controllers/public/index.js

@@ -26,6 +26,14 @@ export default class IndexController extends Controller {
     return !this.model.tickets.toArray().filter(ticket => ticket.type !== 'freeRegistration' && ticket.type !== 'free').length > 0;
   }
 
+  @computed
+  get publicStreamLink() {
+    let publicStreamLink = 'https://www.youtube.com/embed/' + this.model.event.publicStreamLink + '?';
+    publicStreamLink += this.model.event.streamAutoplay ? 'autoplay=1' : 'autoplay=0';
+    publicStreamLink += this.model.event.streamLoop ? '&loop=1' : '&loop=0';
+    return publicStreamLink + '&playlist=' + this.model.event.publicStreamLink;
+  }
+
   @action
   async createNewUserViaEmail(email, password) {
     this.set('isLoading', true);

app/models/event.js

@@ -33,7 +33,9 @@ export default class Event extends ModelBase.extend(CustomPrimaryKeyMixin, {
   locationName           : attr('string'),
   searchableLocationName : attr('string'),
 
-  publicStreamLink: attr('string'),
+  publicStreamLink : attr('string'),
+  streamLoop       : attr('boolean', { defaultValue: false }),
+  streamAutoplay   : attr('boolean', { defaultValue: false }),
 
   longitude : attr('number', { defaultValue: 0.0 }),
   latitude  : attr('number', { defaultValue: 0.0 }),

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

@@ -74,12 +74,23 @@
     <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>
+    <div class="field mt-4 mb-4">
+      <label for="stream">{{t 'Public Stream VideoId'}}</label>
       <Input
         @type="text"
         @id="stream"
         @value={{this.data.event.publicStreamLink}} />
+      <label class="mt-4">{{t 'Autoplay'}}</label>
+      <UiCheckbox
+          @class="toggle"
+          @checked={{this.data.event.streamAutoplay}}
+          @onChange={{action (mut this.data.event.streamAutoplay) }} />
+      <br>
+      <label class="mt-4">{{t 'Loop'}}</label>
+      <UiCheckbox
+          @class="toggle"
+            @checked={{this.data.event.streamLoop}}
+            @onChange={{action (mut this.data.event.streamLoop) }} />
     </div>
   {{/if}}
  <br>

app/templates/public/index.hbs

@@ -1,7 +1,7 @@
 <div class="event">
   {{#if this.model.event.publicStreamLink}}
-    <div class="iframe-container">
-      <iframe class="responsive-iframe" title="{{this.model.event.name}}" src="{{this.model.event.publicStreamLink}}" allowfullscreen></iframe>
+    <div class="iframe-container mb-4">
+      <iframe class="responsive-iframe" title="{{this.model.event.name}}" src="{{this.publicStreamLink}}" allowfullscreen></iframe>
     </div>
   {{/if}}
   {{#if this.model.event.description}}