jam-cloud/web/app/assets/javascripts/react-components/PopupHowToUseVideo.js.jsx.c...

105 lines
2.9 KiB
CoffeeScript

context = window
logger = context.JK.logger
mixins = []
# make sure this is actually us opening the window, not someone else (by checking for MixerStore)
accessOpener = false
if window.opener?
try
m = window.opener.MixerStore
accessOpener = true
catch e
if accessOpener
VideoActions = window.opener.VideoActions
VideoStore = window.opener.VideoStore
#mixins.push(Reflux.listenTo(VideoStore, 'onVideoStateChanged'))
@PopupHowToUseVideo = React.createClass({
render: () ->
`<div className="how-to-use-video">
<div className="popup-contents">
<div className="control-holder">
<a className="control start-video" onClick={this.startVideo}>
<span className="helper" />
<img src="/assets/content/webcam-icon-gray.png" width="20" height="20" />
<span id="recording-status">Start Webcam</span>
</a>
</div>
<div className="important-note">
<h5>
Important Note
</h5>
<div className="contents">
You can start and stop your webcam at any time by navigating to the Webcam menu of the video window and selecting Start/Stop Webcam.
</div>
</div>
</div>
<div className="field">
<input type="checkbox" name="dont_show" /><label htmlFor="dont_show">Don't show this again</label>
</div>
<div className="close-behavior">
<a className="button-orange close-link" onClick={this.close}>CLOSE</a>
</div>
</div>`
close: () ->
$root = jQuery(this.getDOMNode())
$dontShow = $root.find('input[name="dont_show"]')
VideoActions.howToUseVideoPopupClosed($dontShow.is(':checked'))
window.close()
startVideo: (e) ->
e.preventDefault
VideoActions.startVideo()
windowUnloaded: () ->
$root = jQuery(this.getDOMNode())
$dontShow = $root.find('input[name="dont_show"]')
VideoActions.howToUseVideoPopupClosed($dontShow.is(':checked'))
componentDidMount: () ->
$(window).unload(@windowUnloaded)
$root = jQuery(this.getDOMNode())
$dontShow = $root.find('input[name="dont_show"]')
context.JK.checkbox($dontShow)
@resizeWindow()
# this is necessary due to whatever the client's rendering behavior is.
setTimeout(@resizeWindow, 300)
componentDidUpdate: () ->
@resizeWindow()
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
# 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
window.resizeTo(width, height + offset)
})