another pass at mobile

web/app/assets/javascripts/events/react-components/EventPage.js.jsx

@@ -36,6 +36,28 @@ context.EventPage = React.createClass({
     componentDidUpdate: function () {
         if((this.isReady() || this.isErrored()) && !this.once) {
 
+            if(!this.isErrored()) {
+                try {
+
+                    if (this.isWhiteLabel()) {
+                        const player = new Plyr('#player', {
+                            controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'pip', 'airplay', 'fullscreen'],
+                            pip: true,
+                            fullscreen: {
+                                enabled: true,
+                                fallback: true,
+                                iosNative: false
+                            }, title: this.title()
+                        });
+                        player.pip = true
+                        player.playsinline = true
+                    }
+                }
+                catch(e) {
+                    console.log("error initializing video player", e)
+                }
+            }
+
             if(this.isAuthorized()) {
                 var listing = document.getElementById("body-content")
 
@@ -105,6 +127,10 @@ context.EventPage = React.createClass({
         return this.state.event.youtube_code
     },
 
+    isWhiteLabel() {
+        return this.state.event.white_label_player
+    },
+
     title() {
         return this.state.event.title ? this.state.event.title : 'Unknown title'
     },
@@ -139,7 +165,7 @@ context.EventPage = React.createClass({
                 startsAtElement = <div className="starts-at">{startsAt}</div>
             }
 
-            var back = <a href="/events" id="back-link" >&#x25c0; Back</a>
+            var back = <a href="/events" id="back-link">All Events</a>
             return <div className="header">
                 <div className="title">{back}{title}</div>
                 {descriptionElement}
@@ -165,21 +191,33 @@ context.EventPage = React.createClass({
                 //</div>
 
                 var videoCode = this.videoCode()
-                if (videoCode) {
-                    var src = "https://www.youtube.com/embed/" + this.videoCode() + "?modestbranding=true&autoplay=0&rel=0"
-                    video = <div id="player">
-                        <iframe src={src} frameBorder="0"
-                                style={ { position:"absolute", top:0,left:0,width:"100%", height:"100%"} }
+
+                var src = "https://www.youtube.com/embed/" + this.videoCode() + "?modestbranding=true&autoplay=1&rel=0&playsinline=1&enablejsapi=1"
+
+                if(videoCode) {
+                    if(this.isWhiteLabel()) {
+                        video = <div class="plyr__video-embed" id="player">
+                            <iframe
+                                src={src}
+                                allowFullScreen={true}
                                 allow="accelerometer; encrypted-media; gyroscope; autoplay"
-                                allowFullScreen={true}></iframe>
-                    </div>
+                                ></iframe>
+                        </div>
+                    }
+                    else {
+                        video = <div id="player">
+                            <iframe src={src} frameBorder="0"
+                                    style={ { position:"absolute", top:0,left:0,width:"100%", height:"100%"} }
+                                    allow="accelerometer; encrypted-media; gyroscope; autoplay"
+                                    allowFullScreen={true}></iframe>
+                        </div>
+                    }
                 }
                 else {
                     video = <div id="no-player" className="no-code">
                         <div>No video yet</div>
                     </div>
                 }
-
             }
             else {
                 var notRegistered = <span className="no-register">You are not registered for this event!</span>

web/app/assets/stylesheets/events/react-components/EventPage.scss

@@ -90,6 +90,7 @@
       text-align:left;
     }
   }
+
   #body-content {
     background-color:black;
     display:grid;
@@ -98,12 +99,10 @@
     margin-bottom:6rem;
     padding:0 1rem;
   }
+
   #top-container {
-    #width:67%;
     background-color:black;
-    #display: grid;
     justify-content:center;
-    #padding:2rem 0 7rem 0;
     padding:2rem 0 2rem 0;
     text-align:center;
   }
@@ -118,15 +117,9 @@
   }
 
   .listing {
-    #width:67%;
-
-    //display:grid;
-    //justify-content: center;
   }
 
   .listing-content {
-    #width:50%;
-    #margin:auto;
   }
 
   #back-link {
@@ -134,6 +127,10 @@
     position:absolute;
     left:1rem;
     text-decoration: none;
+
+    &:before {
+        content:"◀ ";
+    }
   }
 
   @media (min-width:1px) and (max-width: 1200px) {
@@ -162,6 +159,11 @@
 
     #back-link {
       top:-3rem;
+      font-size:1rem;
+
+      &:before {
+        content:'< ';
+      }
     }
 
     #body-content {

web/app/views/layouts/events.html.erb

@@ -22,7 +22,7 @@
 </head>
 <body class="events <%= yield(:page_name) %>">
 <div id="basic-container">
-  <!--<script src="https://cdn.plyr.io/3.5.10/plyr.polyfilled.js"></script>-->
+  <script src="https://cdn.plyr.io/3.5.10/plyr.polyfilled.js"></script>
   <%=  javascript_include_tag "events/events" %>
   <div class="wrapper">
     <%= yield %>