From ec7651c8a79b9bfa3770bb121e3833c0b9a24ea8 Mon Sep 17 00:00:00 2001 From: Seth Call Date: Sat, 18 Apr 2020 15:12:45 -0500 Subject: [PATCH] looking OK without whitelabel support --- ruby/lib/jam_ruby/models/live_stream.rb | 2 +- .../events/react-components/EventList.js.jsx | 2 +- .../events/react-components/EventPage.js.jsx | 146 +++++++++++------- .../events/react-components/EventsPage.js.jsx | 2 + web/app/assets/stylesheets/events/events.scss | 45 +++++- .../events/react-components/EventList.scss | 9 +- .../events/react-components/EventPage.scss | 76 ++++++++- .../events/react-components/EventsPage.scss | 2 +- .../api_live_streams_controller.rb | 2 +- web/app/views/events/event.slim | 5 +- web/app/views/layouts/events.html.erb | 10 +- 11 files changed, 230 insertions(+), 71 deletions(-) diff --git a/ruby/lib/jam_ruby/models/live_stream.rb b/ruby/lib/jam_ruby/models/live_stream.rb index 9e0b3cf74..ad0601600 100644 --- a/ruby/lib/jam_ruby/models/live_stream.rb +++ b/ruby/lib/jam_ruby/models/live_stream.rb @@ -15,7 +15,7 @@ class JamRuby::LiveStream < ActiveRecord::Base end def self.upcoming - LiveStream.where(listed: true).where("starts_at > ?", 2.days.ago).order('starts_at DESC') + LiveStream.where(listed: true).order('starts_at DESC') #.where("starts_at > ?", 2.days.ago) end def sanitize_active_admin diff --git a/web/app/assets/javascripts/events/react-components/EventList.js.jsx b/web/app/assets/javascripts/events/react-components/EventList.js.jsx index 465cc9fa6..9a19cef2b 100644 --- a/web/app/assets/javascripts/events/react-components/EventList.js.jsx +++ b/web/app/assets/javascripts/events/react-components/EventList.js.jsx @@ -49,7 +49,7 @@ context.EventList = React.createClass({ var title = event.title ? event.title : 'Missing event title' title = {title} - var when = event.starts_at ? new Date(event.starts_at).toLocaleString() : 'Unknown start time' + var when = event.starts_at ?
{new Date(event.starts_at).toLocaleString()}
: null var item =
{thumb}
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 0417246d6..12fb8a854 100644 --- a/web/app/assets/javascripts/events/react-components/EventPage.js.jsx +++ b/web/app/assets/javascripts/events/react-components/EventPage.js.jsx @@ -6,69 +6,81 @@ context.EventPage = React.createClass({ mixins: [Reflux.listenTo(EventStore, "onEventsChanged")], + once: false, + getInitialState: function () { return {submitting: false, error: null, event: null} }, - parseSlug: function() { + parseSlug: function () { var path = window.location.pathname - console.log("slug path: ", path) - var pathPart = path.substring('/events/'.length) - console.log("slug part", pathPart) var query = pathPart.indexOf('?') - if(query > -1) { + if (query > -1) { var slug = pathPart.substring(0, query) } else { var slug = pathPart } - - - console.log("slug", slug) return slug; }, componentDidMount: function () { EventActions.single(this.parseSlug()) - // new Plyr('#video'); + // new Plyr('#video'); }, - componentDidUpdate: function() { + componentDidUpdate: function () { + if((this.isReady() || this.isErrored()) && !this.once) { + if(this.isAuthorized()) { + var listing = document.getElementById("body-content") + + var chatElement = document.getElementById("rt-e617b4394e0e49e1c234c63161bb2e15") + + listing.appendChild(chatElement) + } + else { + + var chatElement = document.getElementById("rt-e617b4394e0e49e1c234c63161bb2e15") + + chatElement.parentNode.removeChild(chatElement) + } + this.once = true + } }, - authorizeDone: function(response) { - this.setState({submitting:false}) + authorizeDone: function (response) { + this.setState({submitting: false}) EventActions.addAuthorization(response) }, - authorizeFailed: function(e) { - if(e instanceof SyntaxError) { + authorizeFailed: function (e) { + if (e instanceof SyntaxError) { this.setState({error: 'Server error. Please try again or contact support@jamkazam.com.'}) } - else if(e instanceof Error) { + else if (e instanceof Error) { this.setState({error: 'Please enter a valid Eventbrite Order ID'}) } else { - console.log("heheh", e) + console.log("heheh", e) } - this.setState({submitting:false}) + this.setState({submitting: false}) }, - handleSubmit: function(event) { + handleSubmit: function (event) { var value = document.getElementById("order-input").value - if(value) { + if (value) { context.JK.Rest2.authorizeLiveStream({order: value}).then((response) => { if (!response.ok) { throw Error(response.statusText); } return response.json() }).then((response) => this.authorizeDone(response)).catch((jqXHR) => this.authorizeFailed(jqXHR)) - this.setState({submitting: true, error:null}) + this.setState({submitting: true, error: null}) } event.preventDefault(); }, @@ -82,7 +94,7 @@ context.EventPage = React.createClass({ }, isAuthorized() { - return this.state.event.authorization || this.state.event.allow_in + return this.isReady() ? (this.state.event.authorization || this.state.event.allow_in) : false }, isNotAuthorized() { @@ -98,71 +110,91 @@ context.EventPage = React.createClass({ }, description() { - return this.state.event.description ? this.state.event.description : '' + return this.state.event.description ? this.state.event.description : null }, startsAt() { - return this.state.event.starts_at? "Starts at " + new Date(this.state.event.starts_at).toLocaleString() : 'Unknown start time' + return this.state.event.starts_at ? "Starts at " + new Date(this.state.event.starts_at).toLocaleString() : null }, header() { - if(this.isErrored()) { + if (this.isErrored()) { return
No event found.
} - else if(this.isReady()) { + else if (this.isReady()) { var title = this.title() var description = this.description() - var startsAt = this.startsAt() + var descriptionElement = null + if(description) { + descriptionElement =
{description}
+ } - return
-
{title}
-
{description}
-
{startsAt}
+ var startsAt = this.startsAt() + var startsAtElement = null + if(startsAt) + { + startsAtElement =
{startsAt}
+ } + + var back = ◀ Back + return
+
{back}{title}
+ {descriptionElement} + {startsAtElement}
} else { - return
-
Loading ...
+ return
+
{back}Loading ...
} }, - body: function() { + body: function () { var video = null - if(this.isErrored()) { + if (this.isErrored()) { video = null } - else if(this.isReady()) { - if(this.isAuthorized()) { + else if (this.isReady()) { + if (this.isAuthorized()) { //video =
//
//
var videoCode = this.videoCode() - if(videoCode) { + if (videoCode) { var src = "https://www.youtube.com/embed/" + this.videoCode() + "?modestbranding=true&autoplay=0&rel=0" - video =
- + video =
+
} else { - video =
No video yet
+ video =
+
No video yet
+
} } else { var notRegistered = You are not registered for this event! - var onceDone =
  • Enter your EventBrite order code at the JamKazam Event Registration page when done registering.
    • + var onceDone =
  • Enter your EventBrite order code at the JamKazam Event + Registration page when done registering.
    • var eventBriteUrl = this.state.event.event_brite_registration_url - if(eventBriteUrl) { + if (eventBriteUrl) { var meat =
    {notRegistered}
      -
    1. Please register at EventBrite to see this video
      2. +
    2. Please register at EventBrite to see this + video +
      3. {onceDone}
    @@ -171,10 +203,13 @@ context.EventPage = React.createClass({ var meat =
    {notRegistered}
      -
    1. Please find your event at EventBrite and register for this event.
      2. +
    2. Please find your event at EventBrite + and register for this event. +
      3. {onceDone}
    -
    +
    } video =
    {meat} @@ -198,11 +233,18 @@ context.EventPage = React.createClass({ -
    - {header} -
    -
    - {body} +
    +
    + {header} +
    +
    +
    +
    +
    + {body} +
    +
    +
    return response @@ -210,11 +252,11 @@ context.EventPage = React.createClass({ onEventsChanged: function (allEvents) { var event = null; - if(allEvents && allEvents.events && allEvents.events.entries && allEvents.events.entries.length > 0){ + if (allEvents && allEvents.events && allEvents.events.entries && allEvents.events.entries.length > 0) { event = allEvents.events.entries[0] } console.log("event change", event, allEvents) - this.setState({event: event, error:allEvents.events_error}) + this.setState({event: event, error: allEvents.events_error}) } }) \ No newline at end of file diff --git a/web/app/assets/javascripts/events/react-components/EventsPage.js.jsx b/web/app/assets/javascripts/events/react-components/EventsPage.js.jsx index 67b673499..ad2df7390 100644 --- a/web/app/assets/javascripts/events/react-components/EventsPage.js.jsx +++ b/web/app/assets/javascripts/events/react-components/EventsPage.js.jsx @@ -14,6 +14,8 @@ context.EventsPage = React.createClass({ authorizeDone: function(response) { this.setState({submitting:false}) EventActions.addAuthorization(response) + + window.location.href ="/events/" + response.slug }, authorizeFailed: function(e) { diff --git a/web/app/assets/stylesheets/events/events.scss b/web/app/assets/stylesheets/events/events.scss index 05719c098..ad26944d6 100644 --- a/web/app/assets/stylesheets/events/events.scss +++ b/web/app/assets/stylesheets/events/events.scss @@ -10,7 +10,8 @@ html, body { min-height: 100%; overflow:auto; - background-color:$jamkazam-background; + #background-color:$jamkazam-background; + background-color:black; color:white; } @@ -24,3 +25,45 @@ body { font-family: Raleway, Arial, Helvetica, sans-serif; } + +#footer { + display:inline-block; + margin-top: 30px; + padding-top: 10px; + border-top:solid 1px #444; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + color: white; + text-align: center; + background-color:#323232; +} + +#copyright { + float:left; + font-size:11px; + color:#ccc; +} + +#footer-links { + float:right; + font-size:11px; + color:#ccc; +} + +#footer-links a { + color:#ccc; + text-decoration:none; +} + +#footer-links a:hover { + color:#fff; + text-decoration:underline; +} + +#version { + font-size:11px; + color:#ccc; + text-align: center; +} \ No newline at end of file diff --git a/web/app/assets/stylesheets/events/react-components/EventList.scss b/web/app/assets/stylesheets/events/react-components/EventList.scss index 09cde5513..bf2679587 100644 --- a/web/app/assets/stylesheets/events/react-components/EventList.scss +++ b/web/app/assets/stylesheets/events/react-components/EventList.scss @@ -15,7 +15,7 @@ } .event-section { - padding: 10px; + padding: 0 1rem; //s border-width: 0 0 $chunkyBorderWidth; //border-style: solid; //border-color: $copy-color-on-dark; @@ -27,9 +27,10 @@ .event { display:grid; - grid-template-columns: 10rem 20rem; + grid-template-columns: 33% 67%; align-content:center; - height:8rem; + min-height:8rem; + padding:0.5rem 0; border-style: solid; border-width: 2px 0 2px 0; border-color: $copy-color-on-dark; @@ -45,7 +46,7 @@ } &.no-image { - grid-template-columns: 30rem; + grid-template-columns: 100%; } } diff --git a/web/app/assets/stylesheets/events/react-components/EventPage.scss b/web/app/assets/stylesheets/events/react-components/EventPage.scss index cb5abbda7..2105d7856 100644 --- a/web/app/assets/stylesheets/events/react-components/EventPage.scss +++ b/web/app/assets/stylesheets/events/react-components/EventPage.scss @@ -2,6 +2,15 @@ @import "client/common.scss"; +#rt-e617b4394e0e49e1c234c63161bb2e15 { + width:38%; + position:absolute; +} +#body-content #rt-e617b4394e0e49e1c234c63161bb2e15 { + position:static; + width:100%; +} + [data-react-class="EventPage"] { width:100%; @@ -48,7 +57,7 @@ padding-top:30px; height:0; overflow:hidden; - top:-5rem; + #top:-5rem; border-width: $chunkyBorderWidth; border-style: solid; border-color: $copy-color-on-dark; @@ -65,7 +74,7 @@ .no-register { text-decoration: underline; font-weight:bold; - margin-top:2rem; + #margin-top:2rem; display:block; } @@ -81,11 +90,21 @@ text-align:left; } } - #top-container { + #body-content { background-color:black; - display: grid; + display:grid; + grid-template-columns: 60% 2% 38%; justify-content:center; - padding:2rem 0 7rem 0; + 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; } @@ -99,16 +118,57 @@ } .listing { - width:50%; - margin:auto; + #width:67%; + //display:grid; //justify-content: center; } + .listing-content { + #width:50%; + #margin:auto; + } - @media (min-width:1px) and (max-width: 1199px) { + #back-link { + color:#fc0; + position:absolute; + left:1rem; + text-decoration: none; + } + + @media (min-width:1px) and (max-width: 1200px) { html { font-size: 100%; } + + + .title { + position:relative; + + } + + #player, #no-player { + + margin-bottom:3rem; + } + + #top-container { + margin-top:3rem; + } + + html { + font-size: 100%; + } + + #back-link { + top:-3rem; + } + + #body-content { + grid-template-columns: 100%; + } + #body-content #rt-e617b4394e0e49e1c234c63161bb2e15 { + height:400px; + } } } \ No newline at end of file diff --git a/web/app/assets/stylesheets/events/react-components/EventsPage.scss b/web/app/assets/stylesheets/events/react-components/EventsPage.scss index 2c50fdcda..5c1bf7416 100644 --- a/web/app/assets/stylesheets/events/react-components/EventsPage.scss +++ b/web/app/assets/stylesheets/events/react-components/EventsPage.scss @@ -120,7 +120,7 @@ background-color: black; position:relative; top: -2rem; - min-width: 400px; + min-width: 300px; @include border_box_sizing; border-width: 0 $chunkyBorderWidth $chunkyBorderWidth; border-style: solid; diff --git a/web/app/controllers/api_live_streams_controller.rb b/web/app/controllers/api_live_streams_controller.rb index 2993171fd..b45092962 100644 --- a/web/app/controllers/api_live_streams_controller.rb +++ b/web/app/controllers/api_live_streams_controller.rb @@ -34,7 +34,7 @@ class ApiLiveStreamsController < ApiController render :json => {}, :status => 404, layout: nil else EventBriteOrder.where(id: event_brite_order.id).update_all(times_claimed: event_brite_order.times_claimed + 1) - render :json => {event_id: event_brite_order.live_stream.id, order_id: event_brite_order.order_id, event_type: 'eventbrite'}, :status => :ok, layout: nil + render :json => {event_id: event_brite_order.live_stream.id, order_id: event_brite_order.order_id, event_type: 'eventbrite', slug: event_brite_order.live_stream.slug}, :status => :ok, layout: nil end end diff --git a/web/app/views/events/event.slim b/web/app/views/events/event.slim index 7ddad31ba..8021b068c 100644 --- a/web/app/views/events/event.slim +++ b/web/app/views/events/event.slim @@ -3,4 +3,7 @@ - provide(:title, @title) #root - = react_component 'EventPage' + #chat + div id="rt-e617b4394e0e49e1c234c63161bb2e15" class="rumble-chat" + script src="https://rumbletalk.com/client/?VHi@pnno" + = react_component 'EventPage' \ No newline at end of file diff --git a/web/app/views/layouts/events.html.erb b/web/app/views/layouts/events.html.erb index 1f7d46b6b..3b505262a 100644 --- a/web/app/views/layouts/events.html.erb +++ b/web/app/views/layouts/events.html.erb @@ -26,7 +26,15 @@ <%= javascript_include_tag "events/events" %>
    <%= yield %> -
    +
    <%= render "clients/help" %>