diff --git a/web/app/assets/javascripts/events/react-components/EventPage.js.jsx b/web/app/assets/javascripts/events/react-components/EventPage.js.jsx
index 12fb8a854..5cd54ad75 100644
--- a/web/app/assets/javascripts/events/react-components/EventPage.js.jsx
+++ b/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 =
{startsAt}
}
- var back = ◀ Back
+ var back = All Events
return
{back}{title}
{descriptionElement}
@@ -165,21 +191,33 @@ context.EventPage = React.createClass({
//
var videoCode = this.videoCode()
- if (videoCode) {
- var src = "https://www.youtube.com/embed/" + this.videoCode() + "?modestbranding=true&autoplay=0&rel=0"
- video =
-
+ >
+
+ }
+ else {
+ video =
+
+
+ }
}
else {
video =
}
-
}
else {
var notRegistered = You are not registered for this event!
diff --git a/web/app/assets/stylesheets/events/react-components/EventPage.scss b/web/app/assets/stylesheets/events/react-components/EventPage.scss
index 2105d7856..43efd6422 100644
--- a/web/app/assets/stylesheets/events/react-components/EventPage.scss
+++ b/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 {
diff --git a/web/app/views/layouts/events.html.erb b/web/app/views/layouts/events.html.erb
index 3b505262a..dc725c8bd 100644
--- a/web/app/views/layouts/events.html.erb
+++ b/web/app/views/layouts/events.html.erb
@@ -22,7 +22,7 @@
-
+
<%= javascript_include_tag "events/events" %>
<%= yield %>