* wip new ftue

This commit is contained in:
Seth Call 2014-04-03 15:11:23 +01:00
parent 90eb0bc081
commit f1ef1de83c
13 changed files with 465 additions and 14 deletions

View File

@ -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'

View File

@ -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'

View File

@ -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 = '<option selected="selected" value="">Choose...</option>';
var chatOptionsHtml = '<option selected="selected" value="">Choose...</option>';

View File

@ -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);

View File

@ -52,7 +52,7 @@
else {
audioDomElement.play();
audioDomElement.pause();
//loaded.resolve();
//loaded.resolve(); // will be resolved by 'canplay' even
}
}

View File

@ -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() {

View File

@ -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;
}
}
}

View File

@ -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();
}

View File

@ -33,6 +33,7 @@
*= require ./account
*= require ./search
*= require ./ftue
*= require ./gearWizard
*= require ./whatsNextDialog
*= require ./invitationDialog
*= require ./shareDialog

View File

@ -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;
}
}
}

View File

@ -74,6 +74,7 @@
<input type="submit" style="display:none"/>
</form>
</div>
<iframe width='320' height='195' src='//www.youtube.com/embed/ylYcvTY9CVo' frameborder='0' allowfullscreen='true'></iframe>
<br clear="all" />
</div>
<!-- end content wrapper -->

View File

@ -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'}

View File

@ -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;