in session recording dialog box remove the video opts

with the newly invented webRTC based video recording system we can drop this options.
Only enable the video recording radio button if the backend has sent the relevant event.
This commit is contained in:
Nuwan 2023-04-18 04:42:40 +05:30
parent 0beb922db5
commit 6498485548
7 changed files with 426 additions and 60 deletions

View File

@ -527,6 +527,11 @@
logger.log(error);
}
break;
case '3010': //JKVideoSession
logger.log(`3010 JKVideoSession: ${response['JKVideoSession']['connect']}`);
const vidConnect = response['JKVideoSession']['connect'];
context.ExternalVideoActions.setVideoEnabled(vidConnect);
break;
default:
break;
}

View File

@ -0,0 +1,335 @@
# context = window
# logger = context.JK.logger
# NoVideoRecordActive = 0
# WebCamRecordActive = 1
# ScreenRecordActive = 2
# WebCam2RecordActive = 3
# DesktopRecordActive = 4
# recording_sources = [WebCamRecordActive, WebCam2RecordActive, ScreenRecordActive, DesktopRecordActive]
# recording_data = {
# 2: {key: 'video-window', text: 'Record session video window'},
# 1: {key: 'webcam-only', text: 'Record my webcam only'},
# 3: {key: 'webcam-only-2', text: 'Record my 2nd webcam only'},
# 4: {key: 'desktop-only', text: 'Record my computer desktop'}
# }
# 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
# MixerStore = reactContext.MixerStore
# RecordingStore = reactContext.RecordingStore
# VideoStore = reactContext.VideoStore
# if accessOpener
# mixins.push(Reflux.listenTo(RecordingStore,"onRecordingStateChanged"))
# # mixins.push(Reflux.listenTo(MixerStore,"onMixersChanged"))
# @PopupRecordingStartStop = React.createClass({
# mixins: mixins
# #onMixersChanged: (mixers) ->
# # this.setState(chatMixer: mixers.chatMixer)
# onRecordingStateChanged: (recordingState) ->
# if @unloaded
# #console.log("PopupMediaControls unloaded. ignore onMixersChnaged")
# return
# this.setState(isRecording: recordingState.isRecording, recordedOnce: this.state.recordedOnce || recordingState.isRecording)
# startStopRecording: () ->
# if this.state.isRecording
# window.opener.RecordingActions.stopRecording()
# else
# recordChat = false
# recordVideo = NoVideoRecordActive
# $root = $(this.getDOMNode())
# if @inputType != 'audio-only'
# selection = $root.find('#recording-selection').val()
# if selection == 'video-window'
# recordVideo = ScreenRecordActive
# else if selection == 'webcam-only'
# recordVideo = WebCamRecordActive
# else if selection == 'webcam-only-2'
# recordVideo = WebCam2RecordActive
# else
# recordVideo = DesktopRecordActive
# recordChat = $root.find('#include-chat').is(':checked')
# # if the video window isn't open, but a video option was selected...
# window.opener.VideoActions.refreshVideoState.trigger()
# if recordVideo != NoVideoRecordActive && !VideoStore.anyVideoOpen
# #if recordVideo != NoVideoRecordActive && !VideoStore.videoShared
# logger.debug("prevent video from opening", VideoStore)
# context.JK.prodBubble($root.find('.control'), 'video-window-not-open', {}, {positions:['bottom']})
# return
# if recordVideo == WebCamRecordActive && !VideoStore.openVideoSources.webcam1
# context.JK.prodBubble($root.find('.control'), 'no-webcam-1', {}, {positions:['bottom']})
# return
# if recordVideo == WebCam2RecordActive && !VideoStore.openVideoSources.webcam2
# context.JK.prodBubble($root.find('.control'), 'no-webcam-2', {}, {positions:['bottom']})
# return
# if recordVideo == DesktopRecordActive && !VideoStore.openVideoSources.screen_capture
# context.JK.prodBubble($root.find('.control'), 'no-screen-capture', {}, {positions:['bottom']})
# return
# logger.debug("@inputType, @udiotye", recordChat, recordVideo)
# window.opener.RecordingActions.startRecording(recordVideo, recordChat)
# onNoteShowHide: () ->
# $root = $(this.getDOMNode())
# audioVideoValue = $root.find('input[name="recording-input-type"]').val()
# console.log("audio video value", audioVideoValue)
# this.setState(showNote: !this.state.showNote)
# getInitialState: () ->
# {isRecording: window.ParentIsRecording, showNote: true, recordedOnce: false, chatMixer: MixerStore.mixers?.chatMixer, openWindows: []}
# render: () ->
# recordingVerb = if this.state.isRecording then 'Stop' else 'Start'
# recordingBtnClasses = classNames({
# "currently-recording" : this.state.isRecording,
# "control" : true
# })
# noteJSX = `<div className="important-note">
# <h5>
# Important Note
# </h5>
# <div className="contents">
# While playing in your session, you are listening to your own personal mix. This recording will use the master mix,
# which may sound very different. To hear and adjust your master mix settings, click the MIXER button in the session toolbar.
# </div>
# </div>`
# chatHelp = `<a href="#" onClick={this.onChatHelp} className="chat-help">[?]</a>`
# options = []
# for source in recording_sources
# if this.state.openWindows?
# found = this.state.openWindows.indexOf(source) > -1
# if found
# data = recording_data[source]
# options.push(`<option value={data.key}>{data.text}</option>`)
# recordingJSX =
# `<div className="recording-options">
# <div className="video-settings">
# <h3>Recording Type</h3>
# <div className="field">
# <input type="radio" name="recording-input-type" id="recording-input-audio" value="audio-only" defaultChecked="checked" />
# <label htmlFor="recording-input-audio">Audio only</label>
# <div className="clearall"></div>
# </div>
# <div className="field">
# <input type="radio" name="recording-input-type" id="recording-input-both" value="audio-video" />
# <label htmlFor="recording-input-both">Audio and video</label>
# <div className="clearall"></div>
# </div>
# <div className="field">
# <select className="easydropdown" name="recording-selection" id="recording-selection">
# {options}
# </select>
# </div>
# </div>
# <div className="audio-settings">
# <input type="checkbox" name="include-chat" id="include-chat" /><label htmlFor="include-chat">Include voice chat in recorded audio {chatHelp}</label>
# </div>
# </div>`
# if this.state.showNote
# noteText = 'hide note'
# else
# noteText = 'show note'
# noteShowHideJSX = `<a href="#" className="note-show-hide" onClick={this.onNoteShowHide}>{noteText}</a>`
# note = null
# recordingOptions = null
# noteShowHide = null
# if this.state.showNote && !this.state.isRecording && !this.state.recordedOnce
# # should we show the note itself? Only if not recording, too
# note = noteJSX
# if !this.state.isRecording && !this.state.recordedOnce
# noteShowHide = noteShowHideJSX
# if gon.global.video_available == "full"
# recordingOptions = recordingJSX
# `<div className="recording-start-stop">
# <div className="control-holder">
# <a className={recordingBtnClasses} onClick={this.startStopRecording}>
# <span className="helper" />
# <img src="/assets/content/recordbutton-off.png" width="20" height="20" />
# <span id="recording-status">{recordingVerb} Recording</span>
# </a>
# </div>
# {recordingOptions}
# {note}
# {noteShowHide}
# </div>`
# windowUnloaded: () ->
# @unloaded = true
# window.unloaded = true
# window.opener.RecordingActions.recordingControlsClosed()
# onChatHelp: (e) ->
# e.preventDefault()
# context.JK.prodBubble($(e.target), 'vid-record-chat-input', {}, {positions:['left']})
# trackInputType: (e) ->
# $checkedType = $(e.target);
# @inputType = $checkedType.val()
# logger.debug("updated @inputType",e.target, @inputType)
# trackAudioType: (e) ->
# $checkedType = $(e.target);
# @audioType = $checkedType.val()
# logger.debug("updated @audioType", @inputType)
# # componentDidMount: () ->
# # $(window).unload(@windowUnloaded)
# # $root = jQuery(this.getDOMNode())
# # $recordingType = $root.find('input[type="radio"]')
# # context.JK.checkbox($recordingType)
# # @inputType = 'audio-only'
# # @audioType = 'audio-only'
# # $root.find('input[name="recording-input-type"]').on('ifChanged', @trackInputType)
# # $root.find('input[name="recording-input-chat-option"]').on('ifChanged', @trackAudioType)
# # $recordingRegion = $root.find('#recording-selection')
# # #console.log("$recordingou", $recordingRegion)
# # #context.JK.dropdown($recordingRegion)
# # $includeChat = $root.find('#include-chat')
# # context.JK.checkbox($includeChat)
# # openWindows = window.opener.jamClient.getOpenVideoSources()
# # console.log("open video sources", openWindows)
# # fixedwindows = []
# # if openWindows?
# # for key, value of openWindows
# # fixedwindows.push(value)
# # this.setState({openWindows: fixedwindows})
# # @resizeWindow()
# # # this is necessary due to whatever the client's rendering behavior is.
# # setTimeout(@resizeWindow, 300)
# componentDidMount: `async function() {
# $(window).unload(this.windowUnloaded);
# const $root = jQuery(this.getDOMNode());
# const $recordingType = $root.find('input[type="radio"]');
# context.JK.checkbox($recordingType);
# this.inputType = 'audio-only';
# this.audioType = 'audio-only';
# $root.find('input[name="recording-input-type"]').on('ifChanged', this.trackInputType);
# $root.find('input[name="recording-input-chat-option"]').on('ifChanged', this.trackAudioType);
# const $recordingRegion = $root.find('#recording-selection');
# //console.log("$recordingou", $recordingRegion)
# //context.JK.dropdown($recordingRegion)
# const $includeChat = $root.find('#include-chat');
# context.JK.checkbox($includeChat);
# const openWindows = await window.opener.jamClient.getOpenVideoSources();
# console.log("open video sources", openWindows);
# const fixedwindows = [];
# if (openWindows != null) {
# for (let key in openWindows) {
# const value = openWindows[key];
# fixedwindows.push(value);
# }
# }
# this.setState({openWindows: fixedwindows});
# this.resizeWindow();
# //this is necessary due to whatever the client rendering behavior is.
# return setTimeout(this.resizeWindow, 300);
# }`
# componentDidUpdate: () ->
# @resizeWindow()
# $root = jQuery(this.getDOMNode())
# $includeChat = $root.find('#include-chat')
# shouldComponentUpdate: () ->
# return !@unloaded
# 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)
# })

View File

@ -7,14 +7,14 @@ ScreenRecordActive = 2
WebCam2RecordActive = 3
DesktopRecordActive = 4
recording_sources = [WebCamRecordActive, WebCam2RecordActive, ScreenRecordActive, DesktopRecordActive]
#recording_sources = [WebCamRecordActive, WebCam2RecordActive, ScreenRecordActive, DesktopRecordActive]
recording_data = {
2: {key: 'video-window', text: 'Record session video window'},
1: {key: 'webcam-only', text: 'Record my webcam only'},
3: {key: 'webcam-only-2', text: 'Record my 2nd webcam only'},
4: {key: 'desktop-only', text: 'Record my computer desktop'}
}
# recording_data = {
# 2: {key: 'video-window', text: 'Record session video window'},
# 1: {key: 'webcam-only', text: 'Record my webcam only'},
# 3: {key: 'webcam-only-2', text: 'Record my 2nd webcam only'},
# 4: {key: 'desktop-only', text: 'Record my computer desktop'}
# }
mixins = []
@ -34,18 +34,29 @@ if window.opener?
MixerStore = reactContext.MixerStore
RecordingStore = reactContext.RecordingStore
VideoStore = reactContext.VideoStore
ExternalVideoStore = reactContext.ExternalVideoStore
if accessOpener
mixins.push(Reflux.listenTo(ExternalVideoStore, "onExternalVideoStateChanged"))
mixins.push(Reflux.listenTo(RecordingStore,"onRecordingStateChanged"))
# mixins.push(Reflux.listenTo(MixerStore,"onMixersChanged"))
mixins.push(Reflux.listenTo(MixerStore,"onMixersChanged"))
@PopupRecordingStartStop = React.createClass({
mixins: mixins
#onMixersChanged: (mixers) ->
# this.setState(chatMixer: mixers.chatMixer)
getInitialState: () ->
{ videoEnabled: false }
onExternalVideoStateChanged: (videoState) ->
unless videoState.videoEnabled
$root = $(this.getDOMNode())
$root.find('#recording-input-audio').iCheck('check').attr('checked', 'checked')
this.setState(videoState)
onMixersChanged: (mixers) ->
this.setState(chatMixer: mixers.chatMixer)
onRecordingStateChanged: (recordingState) ->
if @unloaded
@ -64,42 +75,25 @@ if accessOpener
$root = $(this.getDOMNode())
if @inputType != 'audio-only'
console.log('==DEBUG==', this.state.videoEnabled)
return unless this.state.videoEnabled
selection = $root.find('#recording-selection').val()
if selection == 'video-window'
recordVideo = ScreenRecordActive
else if selection == 'webcam-only'
recordVideo = WebCamRecordActive
else if selection == 'webcam-only-2'
recordVideo = WebCam2RecordActive
else
recordVideo = DesktopRecordActive
# selection = $root.find('#recording-selection').val()
# if selection == 'video-window'
# recordVideo = ScreenRecordActive
# else if selection == 'webcam-only'
# recordVideo = WebCamRecordActive
# else if selection == 'webcam-only-2'
# recordVideo = WebCam2RecordActive
# else
# recordVideo = DesktopRecordActive
recordVideo = WebCamRecordActive
recordChat = $root.find('#include-chat').is(':checked')
# if the video window isn't open, but a video option was selected...
window.opener.VideoActions.refreshVideoState.trigger()
if recordVideo != NoVideoRecordActive && !VideoStore.anyVideoOpen
#if recordVideo != NoVideoRecordActive && !VideoStore.videoShared
logger.debug("prevent video from opening", VideoStore)
context.JK.prodBubble($root.find('.control'), 'video-window-not-open', {}, {positions:['bottom']})
return
if recordVideo == WebCamRecordActive && !VideoStore.openVideoSources.webcam1
context.JK.prodBubble($root.find('.control'), 'no-webcam-1', {}, {positions:['bottom']})
return
if recordVideo == WebCam2RecordActive && !VideoStore.openVideoSources.webcam2
context.JK.prodBubble($root.find('.control'), 'no-webcam-2', {}, {positions:['bottom']})
return
if recordVideo == DesktopRecordActive && !VideoStore.openVideoSources.screen_capture
context.JK.prodBubble($root.find('.control'), 'no-screen-capture', {}, {positions:['bottom']})
return
#window.opener.VideoActions.refreshVideoState.trigger()
logger.debug("@inputType, @udiotye", recordChat, recordVideo)
window.opener.RecordingActions.startRecording(recordVideo, recordChat)
@ -111,8 +105,7 @@ if accessOpener
console.log("audio video value", audioVideoValue)
this.setState(showNote: !this.state.showNote)
getInitialState: () ->
{isRecording: window.ParentIsRecording, showNote: true, recordedOnce: false, chatMixer: MixerStore.mixers?.chatMixer, openWindows: []}
render: () ->
@ -136,14 +129,14 @@ if accessOpener
chatHelp = `<a href="#" onClick={this.onChatHelp} className="chat-help">[?]</a>`
options = []
for source in recording_sources
if this.state.openWindows?
found = this.state.openWindows.indexOf(source) > -1
# options = []
# for source in recording_sources
# if this.state.openWindows?
# found = this.state.openWindows.indexOf(source) > -1
if found
data = recording_data[source]
options.push(`<option value={data.key}>{data.text}</option>`)
# if found
# data = recording_data[source]
# options.push(`<option value={data.key}>{data.text}</option>`)
recordingJSX =
`<div className="recording-options">
@ -155,15 +148,10 @@ if accessOpener
<div className="clearall"></div>
</div>
<div className="field">
<input type="radio" name="recording-input-type" id="recording-input-both" value="audio-video" />
<input type="radio" name="recording-input-type" id="recording-input-both" value="audio-video" disabled={!this.state.videoEnabled} />
<label htmlFor="recording-input-both">Audio and video</label>
<div className="clearall"></div>
</div>
<div className="field">
<select className="easydropdown" name="recording-selection" id="recording-selection">
{options}
</select>
</div>
</div>
<div className="audio-settings">

View File

@ -0,0 +1,5 @@
context = window
@ExternalVideoActions = Reflux.createActions({
setVideoEnabled: {}
})

View File

@ -0,0 +1,22 @@
context = window
@ExternalVideoStore = Reflux.createStore(
{
listenables: ExternalVideoActions
state : null
init: () ->
this.listenTo(context.AppStore, this.onAppInit)
this.state = {
videoEnabled: false
}
onAppInit: (@app) ->
# on app init
onSetVideoEnabled: (enable) ->
console.log('ExternalVideoStore.onSetVideoEnabled', enable)
@state.videoEnabled = enable
this.trigger(this.state)
}
)

View File

@ -108,6 +108,7 @@ BackendToFrontendFPS = {
videoShared: this.videoShared,
videoOpen: this.videoOpen,
videoEnabled,
externalVideoEnabled,
everDisabled: this.everDisabled
};
this.trigger(this.state);
@ -134,6 +135,12 @@ BackendToFrontendFPS = {
//return this.onRefresh();
}`
onSetExternalVideoEnabled: (enable) ->
console.log("onSetExternalVideoEnabled", enable)
if @state
console.log("setting externalVideoEnabled", enable)
@state.externalVideoEnabled = enable;
# onStartVideo: ->
# return unless context.jamClient.SessStartVideoSharing?

View File

@ -16,6 +16,10 @@
var firstTimeShown = false;
var MAX_GENRES = 1;
alert('createSession')
var createSessionSettings = {
createType: '<%= MusicSession::CREATE_TYPE_START_SCHEDULED %>',
timezone: {},
@ -246,12 +250,12 @@
}
}
function clickQuickStartSolo () {
async function clickQuickStartSolo () {
logger.debug("user clicked quick start solo")
createSessionSettings.createType = '<%= MusicSession::CREATE_TYPE_QUICK_START %>'
createSessionSettings.friends_can_join = false
next();
await next();
return false;
}
@ -272,10 +276,10 @@
return false;
}
function clickStartOrSchedule () {
async function clickStartOrSchedule () {
logger.debug("user clicked start or scheduled")
toggleCreateType(null, '<%= MusicSession::CREATE_TYPE_IMMEDIATE %>')
next();
await next();
return false;
}