From f1ef1de83c4e9eecc14bde2ce55628e683f330fd Mon Sep 17 00:00:00 2001 From: Seth Call Date: Thu, 3 Apr 2014 15:11:23 +0100 Subject: [PATCH] * wip new ftue --- ruby/Gemfile | 2 +- web/Gemfile | 2 +- web/app/assets/javascripts/ftue.js | 2 +- web/app/assets/javascripts/gear_wizard.js | 41 ++ .../javascripts/jquery.listenRecording.js | 2 +- web/app/assets/javascripts/layout.js | 21 +- .../assets/javascripts/notificationPanel.js | 17 +- .../assets/javascripts/textMessageDialog.js | 4 + web/app/assets/stylesheets/client/client.css | 1 + .../stylesheets/client/gearWizard.css.scss | 364 ++++++++++++++++++ .../views/clients/_account_identity.html.erb | 1 + web/app/views/clients/_gear_wizard.html.haml | 7 + web/app/views/clients/index.html.erb | 15 +- 13 files changed, 465 insertions(+), 14 deletions(-) create mode 100644 web/app/assets/javascripts/gear_wizard.js create mode 100644 web/app/assets/stylesheets/client/gearWizard.css.scss create mode 100644 web/app/views/clients/_gear_wizard.html.haml diff --git a/ruby/Gemfile b/ruby/Gemfile index cd4bca5ec..b9ebfbded 100644 --- a/ruby/Gemfile +++ b/ruby/Gemfile @@ -29,7 +29,7 @@ gem 'will_paginate' gem 'actionmailer', '3.2.13' gem 'sendgrid', '1.2.0' gem 'aws-sdk', '1.29.1' -gem 'carrierwave' +gem 'carrierwave', '0.9.0' gem 'aasm', '3.0.16' gem 'devise', '>= 1.1.2' gem 'postgres-copy' diff --git a/web/Gemfile b/web/Gemfile index f2cdab689..8c719b4b9 100644 --- a/web/Gemfile +++ b/web/Gemfile @@ -50,7 +50,7 @@ gem 'recaptcha', '0.3.4' gem 'filepicker-rails', '0.1.0' gem 'aws-sdk', '1.29.1' gem 'aasm', '3.0.16' -gem 'carrierwave' +gem 'carrierwave', '0.9.0' gem 'carrierwave_direct' gem 'fog' gem 'haml-rails' diff --git a/web/app/assets/javascripts/ftue.js b/web/app/assets/javascripts/ftue.js index 698a3995d..a82b8885e 100644 --- a/web/app/assets/javascripts/ftue.js +++ b/web/app/assets/javascripts/ftue.js @@ -497,7 +497,7 @@ * Load available drivers and populate the driver select box. */ function loadAudioDrivers() { - var drivers = jamClient.FTUEGetDevices(false); + var drivers = context.jamClient.FTUEGetDevices(false); var chatDrivers = jamClient.FTUEGetChatInputs(); var optionsHtml = ''; var chatOptionsHtml = ''; diff --git a/web/app/assets/javascripts/gear_wizard.js b/web/app/assets/javascripts/gear_wizard.js new file mode 100644 index 000000000..bb148d5b0 --- /dev/null +++ b/web/app/assets/javascripts/gear_wizard.js @@ -0,0 +1,41 @@ + +(function (context, $) { + + "use strict"; + + context.JK = context.JK || {}; + context.JK.GearWizard = function (app) { + + var $dialog = null; + + function beforeShow() { + } + + function afterShow() { + + } + + function afterHide() { + + } + + function events() { + } + + function initialize() { + + var dialogBindings = { beforeShow: beforeShow, afterShow: afterShow, afterHide: afterHide }; + + app.bindDialog('gear-wizard', dialogBindings); + + $dialog = $('#gear-wizard-dialog'); + + events(); + } + + this.initialize = initialize; + + return this; + }; + +})(window, jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/jquery.listenRecording.js b/web/app/assets/javascripts/jquery.listenRecording.js index 6bd55e648..84a7628f7 100644 --- a/web/app/assets/javascripts/jquery.listenRecording.js +++ b/web/app/assets/javascripts/jquery.listenRecording.js @@ -52,7 +52,7 @@ else { audioDomElement.play(); audioDomElement.pause(); - //loaded.resolve(); + //loaded.resolve(); // will be resolved by 'canplay' even } } diff --git a/web/app/assets/javascripts/layout.js b/web/app/assets/javascripts/layout.js index 555cc0d6d..0d4ec3dbe 100644 --- a/web/app/assets/javascripts/layout.js +++ b/web/app/assets/javascripts/layout.js @@ -552,6 +552,19 @@ } } + // payload is a notification event from websocket gateway + function isNoisyNotification(payload) { + var openDialog = currentDialog(); + if(!openDialog) return false; + + if(typeof openDialog.isNoisyNotification === 'function') { + return !openDialog.isNoisyNotification(payload); + } + else { + return true; + } + } + /** * Responsible for keeping N dialogs in correct stacked order, * also moves the .dialog-overlay such that it hides/obscures all dialogs except the highest one @@ -875,8 +888,12 @@ showDialog(dialog, options); }; - this.dialogObscuredNotification = function() { - return dialogObscuredNotification(); + this.dialogObscuredNotification = function(payload) { + return dialogObscuredNotification(payload); + } + + this.isNoisyNotification= function(payload) { + return isNoisyNotification(payload); } this.isDialogShowing = function() { diff --git a/web/app/assets/javascripts/notificationPanel.js b/web/app/assets/javascripts/notificationPanel.js index 90e9d5d5c..9e183324b 100644 --- a/web/app/assets/javascripts/notificationPanel.js +++ b/web/app/assets/javascripts/notificationPanel.js @@ -52,7 +52,7 @@ $count.addClass('highlighted'); } - function queueNotificationSeen(notificationId, notificationCreatedAt) { + function queueNotificationSeen(notificationId, notificationCreatedAt, type) { var time = new Date(notificationCreatedAt); @@ -80,10 +80,17 @@ app.updateNotificationSeen(payload.notification_id, payload.created_at); } else { - queueNotificationSeen(payload.notification_id, payload.created_at); - highlightCount(); - incrementNotificationCount(); - missedNotificationsWhileAway = true; + if(app.layout.isNoisyNotification(payload) && !missedNotificationsWhileAway) { + // this handles a special case--if a notification is too noisy while away, then don't bother + // incrementing anything on the sidebar or otherwise distracting the user + app.updateNotificationSeen(payload.notification_id, payload.created_at); + } + else { + queueNotificationSeen(payload.notification_id, payload.created_at, payload.description); + highlightCount(); + incrementNotificationCount(); + missedNotificationsWhileAway = true; + } } } diff --git a/web/app/assets/javascripts/textMessageDialog.js b/web/app/assets/javascripts/textMessageDialog.js index 3bcc2c5c2..3e3049880 100644 --- a/web/app/assets/javascripts/textMessageDialog.js +++ b/web/app/assets/javascripts/textMessageDialog.js @@ -128,6 +128,10 @@ return showing && payload.description == "TEXT_MESSAGE" && payload.sender_id == otherId; } + function isNoisyNotification(payload) { + return handledNotification(payload); + } + function afterShow(args) { $textBox.focus(); } diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css index e69b9848b..acdbd914a 100644 --- a/web/app/assets/stylesheets/client/client.css +++ b/web/app/assets/stylesheets/client/client.css @@ -33,6 +33,7 @@ *= require ./account *= require ./search *= require ./ftue + *= require ./gearWizard *= require ./whatsNextDialog *= require ./invitationDialog *= require ./shareDialog diff --git a/web/app/assets/stylesheets/client/gearWizard.css.scss b/web/app/assets/stylesheets/client/gearWizard.css.scss new file mode 100644 index 000000000..100a37424 --- /dev/null +++ b/web/app/assets/stylesheets/client/gearWizard.css.scss @@ -0,0 +1,364 @@ +/* Custom Styles for the FTUE Dialogs */ + +@import "client/common.css.scss"; +@charset "UTF-8"; + + +.dialog.gear-wizard { + min-width: 800px; + max-width: 800px; + min-height: 400px; + max-height: 400px; + + .ftue-inner { + line-height: 1.3em; + width:750px; + padding:25px; + font-size:15px; + color:#aaa; + + a { + text-decoration: underline; + } + + p { + margin-top: 12px; + } + + .device_type ul { + list-style:disc; + } + + .device_type li { + margin: 15px 12px 15px 36px; + } + + select { + max-width: 220px; + } + + .settings-profile { + margin-top: 12px; + } + + p.intro { + margin-top:0px; + } + + .easydropdown-wrapper { + width:100%; + max-width:220px; + } + .ftue-new { + clear:both; + position:relative; + width:100%; + height: 54px; + margin-top: 12px; + select { + font-size: 15px; + padding: 3px; + } + .latency { + position: absolute; + top: 120px; + font-size: 12px; + .report { + color:#fff; + position: absolute; + top: 20px; + left: 0px; + width: 105px; + height: 50px; + background-color: #72a43b; + padding: 10px; + text-align: center; + .ms-label { + padding-top: 10px; + font-size: 34px; + font-family: Arial, sans-serif; + } + p { + margin-top: 4px; + } + } + .report.neutral, .report.start, .report.unknown { + background-color: #666; + } + .report.good { + background-color: #72a43b; + } + .report.acceptable { + background-color: #D6A800; + } + .report.bad { + background-color: #7B0C00; + } + .instructions { + color:#fff; + position: absolute; + top: 20px; + left: 125px; + width: 595px; + height: 50px; + padding: 10px; + background-color: #666; + } + .instructions p.start, .instructions p.neutral { + padding-top: 4px; + } + .instructions p.unknown { + margin-top:0px; + padding-top: 4px; + } + .instructions p.good { + padding-top: 4px; + } + .instructions p.acceptable { + margin-top: -6px; + } + .instructions p.bad { + margin-top: -6px; + line-height: 16px; + } + .instructions p a { + font-weight: bold; + } + } + .column { + position:absolute; + width: 220px; + height: 50px; + margin-right:8px; + } + .settings-2-device { + left:0px; + } + .settings-2-center { + left:50%; + margin-left: -110px; + .buttons { + margin-top: 14px; + a { + margin-right: 0px; + } + } + } + .settings-2-voice { + top: 0px; + right:0px; + } + .controls { + margin-top: 16px; + background-color: #222; + height: 48px; + width: 220px; + } + .ftue-vu-left { + position:relative; + top: 0px; + } + .ftue-vu-right { + position:relative; + top: 22px; + } + .ftue-fader { + position:relative; + top: 14px; + left: 8px; + } + .gain-label { + color: $ColorScreenPrimary; + position:absolute; + top: 76px; + right: 6px; + } + + .subcolumn { + position:absolute; + top: 60px; + font-size: 12px !important; + width: 68px; + height: 48px; + } + .subcolumn select { + width: 68px; + } + .subcolumn.first { + left:0px; + } + .subcolumn.second { + left:50%; + margin-left:-34px; + } + .subcolumn.third { + right:0px; + } + } + + .asio-settings { + clear:both; + position:relative; + width:100%; + height: 54px; + margin-top: 8px; + .column { + position:absolute; + width: 220px; + height: 50px; + margin-right:8px; + } + .settings-driver { + left:0px; + } + .settings-asio { + left:50%; + margin-left: -110px; + } + .settings-asio.mac { + left:0px; + margin-left: 0px; + } + .settings-asio-button { + right:0px; + height: 45px; + .bottom { + position:absolute; + bottom:0px; + } + } + .settings-asio-button.mac { + right:auto; + left:50%; + margin-left: -110px; + } + .subcolumn { + position:absolute; + width: 68px; + height: 48px; + } + .subcolumn select { + width: 68px; + } + .subcolumn.first { + left:0px; + } + .subcolumn.second { + left:50%; + margin-left:-34px; + } + .subcolumn.third { + right:0px; + } + + } + .settings-controls { + + clear:both; + position:relative; + width: 100%; + height: 100px; + + div.section { + position:absolute; + width: 220px; + height: 100px; + + select { + display:block; + width: 100%; + } + } + .audio-input { + left:0px; + } + .voice-chat-input { + left:50%; + margin-left: -110px; + } + .audio-output { + right:0px; + } + .ftue-controls { + margin-top: 16px; + position:relative; + height: 48px; + width: 220px; + background-color: #222; + } + .ftue-vu-left { + position:relative; + top: 0px; + } + .ftue-vu-right { + position:relative; + top: 22px; + } + .ftue-fader { + position:relative; + top: 14px; + left: 8px; + } + .gain-label { + color: $ColorScreenPrimary; + position:absolute; + top: 14px; + right: 6px; + } + } + + .buttonbar { + position:absolute; + bottom: 24px; + right: 0px; + a { + color: darken(#fff, 5); + text-decoration: none; + } + + .spinner-small { + display:none; + margin-top: 3px; + position: relative; + top: 12px; + } + } + + input[type=text], input[type=password] { + padding:3px; + font-size:13px; + width:145px; + } + + select.audiodropdown { + width:223px; + color:#666; + } + + a { + color:#ccc; + } + + a:hover { + color:#fff; + } + + .ftue-instrumentlist { + width:340px; + height:178px; + background-color:#c5c5c5; + border:none; + -webkit-box-shadow: inset 2px 2px 3px 0px #888; + box-shadow: inset 2px 2px 3px 0px #888; + color:#666; + overflow:auto; + font-size:14px; + } + + .ftue-instrumentlist select, .ftue-instrumentlist .easydropdown { + width:100%; + color:#666; + } + + } +} \ No newline at end of file diff --git a/web/app/views/clients/_account_identity.html.erb b/web/app/views/clients/_account_identity.html.erb index 439ae6138..c0514284e 100644 --- a/web/app/views/clients/_account_identity.html.erb +++ b/web/app/views/clients/_account_identity.html.erb @@ -74,6 +74,7 @@ +
diff --git a/web/app/views/clients/_gear_wizard.html.haml b/web/app/views/clients/_gear_wizard.html.haml new file mode 100644 index 000000000..2ce2b422e --- /dev/null +++ b/web/app/views/clients/_gear_wizard.html.haml @@ -0,0 +1,7 @@ +.dialog.gear-wizard{ layout: 'dialog', 'layout-id' => 'gear-wizard', id: 'gear-wizard-dialog'} + .content-head + %h1 audio gear setup + + .ftue-inner{ 'layout-wizard' => 'gear-wizard' } + .wizard-step{ 'layout-wizard-step' => "0", 'dialog-title' => "audio gear settings", 'dialog-purpose' => "Intro", 'style'=>"display:block;" } + %iframe{width:320, height:195, src: '//www.youtube.com/embed/ylYcvTY9CVo?html5=1&wmode=transparent&rel=0', frameborder: 0, allowfullscreen: true, wmode: "Opaque", playsinline:'inline'} \ No newline at end of file diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb index be7ba434c..f3742ae20 100644 --- a/web/app/views/clients/index.html.erb +++ b/web/app/views/clients/index.html.erb @@ -14,6 +14,7 @@ <%= render "faders" %> <%= render "vu_meters" %> <%= render "ftue" %> +<%= render "gear_wizard" %> <%= render "terms" %> <%= render "leaveSessionWarning" %> <%= render "alert" %> @@ -235,6 +236,9 @@ var ftueWizard = new JK.FtueWizard(JK.app); ftueWizard.initialize(); + var gearWizard = new JK.GearWizard(JK.app); + gearWizard.initialize(); + var testBridgeScreen = new JK.TestBridgeScreen(JK.app); testBridgeScreen.initialize(); @@ -263,10 +267,15 @@ interceptedJamClient[jsKey] = function() { var original = originalJamClient[key] var start = new Date(); - var returnVal = original.apply(originalJamClient, arguments) + if(key == "FTUEGetDevices()") { + var returnVal = eval('originalJamClient.FTUEGetDevices(' + arguments[0] + ')'); + } + else { + var returnVal = original.apply(originalJamClient, arguments); + } var time = new Date().getTime() - start.getTime(); - if(time > 0) { // if 0, you'll see ALL bridge calls. If you set it to a higher value, you'll only see calls that are beyond that threshold - console.error(time + "ms jamClient." + jsKey); + if(time >= 0) { // if 0, you'll see ALL bridge calls. If you set it to a higher value, you'll only see calls that are beyond that threshold + console.error(time + "ms jamClient." + jsKey + ' returns=', returnVal); } return returnVal;