From 6498485548dcc387dc1cb9ad011e94bef01d838b Mon Sep 17 00:00:00 2001 From: Nuwan Date: Tue, 18 Apr 2023 04:42:40 +0530 Subject: [PATCH] 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. --- web/app/assets/javascripts/asyncJamClient.js | 5 + .../PopupRecordingStartStop-bk.js.jsx.coffee | 335 ++++++++++++++++++ .../PopupRecordingStartStop.js.jsx.coffee | 100 +++--- .../actions/ExternalVideoActions.js.coffee | 5 + .../stores/ExternalVideoStore.js.coffee | 22 ++ .../stores/VideoStore.js.coffee | 7 + .../javascripts/scheduled_session.js.erb | 12 +- 7 files changed, 426 insertions(+), 60 deletions(-) create mode 100644 web/app/assets/javascripts/react-components/PopupRecordingStartStop-bk.js.jsx.coffee create mode 100644 web/app/assets/javascripts/react-components/actions/ExternalVideoActions.js.coffee create mode 100644 web/app/assets/javascripts/react-components/stores/ExternalVideoStore.js.coffee diff --git a/web/app/assets/javascripts/asyncJamClient.js b/web/app/assets/javascripts/asyncJamClient.js index b3e015dbf..19ae776a4 100644 --- a/web/app/assets/javascripts/asyncJamClient.js +++ b/web/app/assets/javascripts/asyncJamClient.js @@ -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; } diff --git a/web/app/assets/javascripts/react-components/PopupRecordingStartStop-bk.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupRecordingStartStop-bk.js.jsx.coffee new file mode 100644 index 000000000..6545627f7 --- /dev/null +++ b/web/app/assets/javascripts/react-components/PopupRecordingStartStop-bk.js.jsx.coffee @@ -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 = `
+#
+# Important Note +#
+#
+# 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. +#
+#
` + + +# chatHelp = `[?]` + +# 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(``) + +# recordingJSX = +# `
+#
+#

Recording Type

+#
+# +# +#
+#
+#
+# +# +#
+#
+#
+# +#
+#
+ +#
+# +#
+#
` + +# if this.state.showNote +# noteText = 'hide note' +# else +# noteText = 'show note' + +# noteShowHideJSX = `{noteText}` + +# 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 + + +# `
+#
+# +# +# +# {recordingVerb} Recording +# +#
+ +# {recordingOptions} + +# {note} + +# {noteShowHide} + +#
` + +# 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) +# }) \ No newline at end of file diff --git a/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee b/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee index 74d73a3db..c951f7c27 100644 --- a/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/PopupRecordingStartStop.js.jsx.coffee @@ -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 = `[?]` - 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(``) + # if found + # data = recording_data[source] + # options.push(``) recordingJSX = `
@@ -155,15 +148,10 @@ if accessOpener
- +
-
- -
diff --git a/web/app/assets/javascripts/react-components/actions/ExternalVideoActions.js.coffee b/web/app/assets/javascripts/react-components/actions/ExternalVideoActions.js.coffee new file mode 100644 index 000000000..ceeb16b17 --- /dev/null +++ b/web/app/assets/javascripts/react-components/actions/ExternalVideoActions.js.coffee @@ -0,0 +1,5 @@ +context = window + +@ExternalVideoActions = Reflux.createActions({ + setVideoEnabled: {} +}) \ No newline at end of file diff --git a/web/app/assets/javascripts/react-components/stores/ExternalVideoStore.js.coffee b/web/app/assets/javascripts/react-components/stores/ExternalVideoStore.js.coffee new file mode 100644 index 000000000..0f973dae1 --- /dev/null +++ b/web/app/assets/javascripts/react-components/stores/ExternalVideoStore.js.coffee @@ -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) + } +) \ No newline at end of file diff --git a/web/app/assets/javascripts/react-components/stores/VideoStore.js.coffee b/web/app/assets/javascripts/react-components/stores/VideoStore.js.coffee index 3f6b7bdc4..5681a8e44 100644 --- a/web/app/assets/javascripts/react-components/stores/VideoStore.js.coffee +++ b/web/app/assets/javascripts/react-components/stores/VideoStore.js.coffee @@ -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? diff --git a/web/app/assets/javascripts/scheduled_session.js.erb b/web/app/assets/javascripts/scheduled_session.js.erb index 90a9637af..da64d09fe 100644 --- a/web/app/assets/javascripts/scheduled_session.js.erb +++ b/web/app/assets/javascripts/scheduled_session.js.erb @@ -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; }