215 lines
7.6 KiB
CoffeeScript
215 lines
7.6 KiB
CoffeeScript
context = window
|
|
logger = context.JK.logger
|
|
rest = context.JK.Rest()
|
|
|
|
NoVideoRecordActive = 0
|
|
WebCamRecordActive = 1
|
|
ScreenRecordActive = 2
|
|
|
|
mixins = []
|
|
|
|
# make sure this is actually us opening the window, not someone else (by checking for MixerStore)
|
|
|
|
# this check ensures we attempt to listen if this component is created in a popup
|
|
reactContext = if window.opener? then window.opener else window
|
|
|
|
accessOpener = false
|
|
if window.opener?
|
|
try
|
|
m = window.opener.MixerStore
|
|
accessOpener = true
|
|
catch e
|
|
reactContext = window
|
|
|
|
VideoUploaderStore = reactContext.VideoUploaderStore
|
|
VideoUploaderActions = reactContext.VideoUploaderActions
|
|
AppActions = reactContext.AppActions
|
|
|
|
if accessOpener
|
|
mixins.push(Reflux.listenTo(VideoUploaderStore,"onVideoUploadChanged"))
|
|
|
|
@PopupVideoUploader = React.createClass({
|
|
mixins: mixins
|
|
|
|
onVideoUploadChanged: (uploadState) ->
|
|
this.setState({uploadState: uploadState})
|
|
|
|
render: () ->
|
|
|
|
# there are a few initial states: if auth is null, we don't know yet (and are checking against the server)
|
|
# if auth is set, then we can show the upload btn
|
|
# and if auth == false, then we need the user to try and log in
|
|
|
|
|
|
if @state.recording
|
|
|
|
name = @state.recording.my?.name
|
|
description = @state.recording.my?.description
|
|
created = @state.recording.created_at
|
|
|
|
if @state.deleteMe
|
|
action = `<div><a className="button-grey close-btn" onClick={this.onCloseRequested}>CANCEL</a> <a className="button-orange close-btn" onClick={this.onDeleteVideo}>DELETE</a></div>`
|
|
instructions = `<p>Save space and delete your video from your computer?</p>`
|
|
else if @state.recording.video_url?
|
|
action = `<a className="button-orange close-btn" onClick={this.onCloseRequested}>CLOSE</a>`
|
|
instructions = `<p>Your video has been uploaded previously. <a className="video-url" onClick={this.watchVideo} href={this.state.recording.video_url}>{this.state.uploadState.videoUrl}</a></p>`
|
|
else if @state.uploadState.errorReason
|
|
action = `<a className="button-orange upload-btn" onClick={this.onUploadRequested}>UPLOAD</a>`
|
|
instructions = `<p>The upload failed. You can try again. ({this.state.uploadState.errorReason})</p>`
|
|
else if @state.uploadState.done
|
|
action = `<a className="button-orange close-btn" onClick={this.onNextToDeletion}>OK</a>`
|
|
instructions = `<p>Your video has been uploaded successfully. <a className="video-url" onClick={this.watchVideo} href={this.state.uploadState.videoUrl}>{this.state.uploadState.videoUrl}</a></p>`
|
|
else if @state.uploadState.paused
|
|
action = `<a className="button-orange resume-btn" onClick={this.onResumeRequested}>RESUME</a>`
|
|
instructions = `<p>Press the RESUME button at any time to continue uploading your video.</p>`
|
|
else if @state.uploadState.uploading
|
|
action = `<div><a className="button-grey cancel-btn" onClick={this.onCancelRequested}>CANCEL</a> <a className="button-grey pause-btn" onClick={this.onPauseRequested}>PAUSE</a></div>`
|
|
width = ((@state.uploadState.bytesSent / @state.uploadState.bytesTotal) * 100)
|
|
progressWidth = width.toString() + "%";
|
|
progressStyle = {width:progressWidth}
|
|
rounded = Math.round(width)
|
|
instructions = `<p>Press the PAUSE button at any time to pause the upload of your video, or CANCEL to end this upload completely.
|
|
<div className="progress-bar" style={progressStyle}><div className="percentage-progress">{rounded}%</div></div>
|
|
</p>`
|
|
else if @state.auth == false
|
|
action = `<input className="google_login_button" type='image' src="/assets/google_signin.png" height="30px" onClick={this.startGoogleLogin}/>`
|
|
instructions = `<p>To upload this recording to YouTube, you must give JamKazam the necessary access to your YouTube account by clicking the button below.</p>`
|
|
else if @state.auth?
|
|
action = `<a className="button-orange upload-btn" onClick={this.onUploadRequested}>UPLOAD</a>`
|
|
instructions = `<p>Press the UPLOAD button to start uploading your video to YouTube. When the upload is done, a link to your video will appear.</p>`
|
|
else
|
|
name = null
|
|
action = null
|
|
else
|
|
name = null
|
|
action = null
|
|
|
|
`<div className="video-uploader">
|
|
<h3>Upload Video<br/>"{name}"</h3>
|
|
<h3></h3>
|
|
{instructions}
|
|
<div className="control-holder">
|
|
{action}
|
|
<div className="video-terms"><a href="https://www.jamkazam.com/corp/privacy" onClick={this.openPrivacyPolicy}>JamKazam Privacy Policy</a></div>
|
|
</div>
|
|
</div>`
|
|
|
|
openPrivacyPolicy: (e) ->
|
|
e.preventDefault()
|
|
$link = $(e.target)
|
|
AppActions.openExternalUrl($link.attr('href'))
|
|
|
|
getInitialState: () ->
|
|
{auth: null, uploadState: VideoUploaderStore.getState(), deleteMe: false}
|
|
|
|
watchVideo: (e) ->
|
|
e.preventDefault()
|
|
$link = $(e.target)
|
|
AppActions.openExternalUrl($link.attr('href'))
|
|
|
|
onNextToDeletion: (e) ->
|
|
e.preventDefault();
|
|
@setState({deleteMe: true})
|
|
|
|
onCloseRequested: (e) ->
|
|
e.preventDefault()
|
|
window.close()
|
|
|
|
onDeleteVideo: (e) ->
|
|
e.preventDefault();
|
|
VideoUploaderActions.delete(gon.recording_id)
|
|
window.close()
|
|
|
|
startGoogleLogin: (e) ->
|
|
e.preventDefault()
|
|
|
|
logger.debug("Starting google login")
|
|
window._oauth_win = window.open("/auth/google_login", "Log In to Google", "height=700,width=500,menubar=no,resizable=no,status=no");
|
|
|
|
window._oauth_callback = @oauthCallback
|
|
|
|
oauthCallback: () ->
|
|
window._oauth_win.close()
|
|
@checkAuth()
|
|
|
|
onUploadRequested: (e) ->
|
|
e.preventDefault()
|
|
VideoUploaderActions.uploadVideo(gon.recording_id)
|
|
|
|
onResumeRequested: (e) ->
|
|
e.preventDefault()
|
|
VideoUploaderActions.resume(gon.recording_id)
|
|
|
|
onPauseRequested: (e) ->
|
|
e.preventDefault()
|
|
VideoUploaderActions.pause(gon.recording_id)
|
|
|
|
onCancelRequested: (e) ->
|
|
e.preventDefault()
|
|
VideoUploaderActions.cancel(gon.recording_id)
|
|
|
|
checkAuth:() ->
|
|
rest.getGoogleAuth()
|
|
.done((auth) =>
|
|
if auth.auth?
|
|
@setState({auth: auth.auth})
|
|
else
|
|
@setState({auth: false})
|
|
)
|
|
.fail(() =>
|
|
@setState({errorReason: 'Unable to fetch user authorization'})
|
|
)
|
|
|
|
checkRecording:() ->
|
|
rest.getRecording({id: gon.recording_id})
|
|
.done((response) =>
|
|
logger.debug("recording info fetched #{response}")
|
|
@setState({recording:response})
|
|
)
|
|
.fail((jqXHR) =>
|
|
logger.debug("recording info fetch failed #{jqXHR.responseText}")
|
|
@setState({errorReason: 'Unable to fetch recording info'})
|
|
)
|
|
|
|
componentDidMount: () ->
|
|
|
|
$(window).unload(@windowUnloaded)
|
|
|
|
|
|
@checkAuth()
|
|
@checkRecording()
|
|
VideoUploaderActions.newVideo(gon.recording_id)
|
|
|
|
@resizeWindow()
|
|
|
|
# this is necessary due to whatever the client's rendering behavior is.
|
|
setTimeout(@resizeWindow, 300)
|
|
|
|
componentDidUpdate: () ->
|
|
@resizeWindow()
|
|
setTimeout(@resizeWindow, 1000)
|
|
|
|
resizeWindow: () =>
|
|
$container = $('#minimal-container')
|
|
width = $container.width()
|
|
height = $container.height()
|
|
|
|
# there is 20px or so of unused space at the top of the page. can't figure out why it's there. (above #minimal-container)
|
|
#mysteryTopMargin = 20
|
|
mysteryTopMargin = 0
|
|
# deal with chrome in real browsers
|
|
offset = (window.outerHeight - window.innerHeight) + mysteryTopMargin
|
|
|
|
# handle native client chrome that the above outer-inner doesn't catch
|
|
#if navigator.userAgent.indexOf('JamKazam') > -1
|
|
|
|
#offset += 25
|
|
|
|
width = 100 if width < 100
|
|
height = 100 if height < 100
|
|
|
|
window.resizeTo(width, height + offset)
|
|
|
|
windowUnloaded: () ->
|
|
VideoUploaderActions.uploaderClosed()
|
|
}) |