seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

looking OK without whitelabel support

This commit is contained in:
Seth Call 2020-04-18 15:12:45 -05:00
parent a088d73b22
commit ec7651c8a7
11 changed files with 230 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ruby/lib/jam_ruby/models/live_stream.rb
View File

@ -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

2
web/app/assets/javascripts/events/react-components/EventList.js.jsx
View File

@ -49,7 +49,7 @@ context.EventList = React.createClass({
var title = event.title ? event.title : 'Missing event title'
title = <a className="title-link" href={"/events/" + event.slug}>{title}</a>
var when = event.starts_at ? new Date(event.starts_at).toLocaleString() : 'Unknown start time'
var when = event.starts_at ? <div className="when">{new Date(event.starts_at).toLocaleString()}</div> : null
var item = <div className={dynamic} key={event.id}>
{thumb}
<div className="detail">

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

@ -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 <div className="header">
<div className="title">No event found.</div>
</div>
}
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 = <div className="description">{description}</div>
}
return <div className="header">
<div className="title">{title}</div>
<div className="description">{description}</div>
<div className="starts-at">{startsAt}</div>
var startsAt = this.startsAt()
var startsAtElement = null
if(startsAt)
{
startsAtElement = <div className="starts-at">{startsAt}</div>
}
var back = <a href="/events" id="back-link" >&#x25c0; Back</a>
return <div className="header">
<div className="title">{back}{title}</div>
{descriptionElement}
{startsAtElement}
</div>
}
else {
return <div className="header">
<div className="title">Loading ...</div>
return <div className="header">
<div className="title">{back}Loading ...</div>
</div>
}
},
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 = <div id="player" className="video player">
// <div id="video" data-plyr-provider="youtube" data-plyr-embed-id={this.videoCode()}></div>
//</div>
var videoCode = this.videoCode()
if(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%"} } allow="accelerometer; encrypted-media; gyroscope; autoplay" allowFullScreen={true}></iframe>
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>
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>
var onceDone = <li>Enter your EventBrite order code at the <a href="https://www.jamkazam.com/events" target="_blank"> JamKazam Event Registration</a> page when done registering.</li>
var onceDone = <li>Enter your EventBrite order code at the <a href="https://www.jamkazam.com/events"
target="_blank"> JamKazam Event
Registration</a> page when done registering.</li>
var eventBriteUrl = this.state.event.event_brite_registration_url
if(eventBriteUrl) {
if (eventBriteUrl) {
var meat = <div>
{notRegistered}
<ol>
<li>Please register at <a target="_blank" href={eventBriteUrl}>EventBrite</a> to see this video</li>
<li>Please register at <a target="_blank" href={eventBriteUrl}>EventBrite</a> to see this
video
</li>
{onceDone}
</ol>
</div>
@ -171,10 +203,13 @@ context.EventPage = React.createClass({
var meat = <div>
{notRegistered}
<ol>
<li>Please find your event at <a target="_blank" href="https://www.eventbrite.com/d/online/jamkazam/">EventBrite</a> and register for this event.</li>
<li>Please find your event at <a target="_blank"
href="https://www.eventbrite.com/d/online/jamkazam/">EventBrite</a>
and register for this event.
</li>
{onceDone}
</ol>
</div>
</div>
}
video = <div id="no-player" className="no-code">
{meat}
@ -198,11 +233,18 @@ context.EventPage = React.createClass({
<div id="header">
<div className="logo-holder"><img src="/assets/logo.png"/></div>
</div>
<div id="top-container">
{header}
</div>
<div className="listing">
{body}
<div id="body-content">
<div id="top-container">
{header}
</div>
<div></div>
<div></div>
<div className="listing" id="listing">
<div className="listing-content">
{body}
</div>
</div>
<div></div>
</div>
</div>
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})
}
})

2
web/app/assets/javascripts/events/react-components/EventsPage.js.jsx
View File

@ -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) {

45
web/app/assets/stylesheets/events/events.scss
View File

@ -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;
}

9
web/app/assets/stylesheets/events/react-components/EventList.scss
View File

@ -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%;
}
}

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

@ -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;
}
}
}

2
web/app/assets/stylesheets/events/react-components/EventsPage.scss
View File

@ -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;

2
web/app/controllers/api_live_streams_controller.rb
View File

@ -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

5
web/app/views/events/event.slim
View File

@ -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'

10
web/app/views/layouts/events.html.erb
View File

@ -26,7 +26,15 @@
<%= javascript_include_tag "events/events" %>
<div class="wrapper">
<%= yield %>
<div id="rt-e617b4394e0e49e1c234c63161bb2e15"></div> <script src="https://rumbletalk.com/client/?VHi@pnno"></script>
<div id="footer">
<!-- copyright -->
<div id="copyright">Copyright &copy; <%= Time.now.year %> JamKazam, Inc. All Rights Reserved</div>
<!-- footer links -->
<div id="footer-links"><%= link_to "about", corp_about_path %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "news", corp_news_path %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "media", corp_media_center_path %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "contact", corp_contact_path %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "privacy", corp_privacy_path %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "terms of service", corp_terms_path %>&nbsp;&nbsp;|&nbsp;&nbsp;<%= link_to "help", corp_help_path %></div>
</div>
</div>
</div>
<%= render "clients/help" %>