seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

* resize session based on track content VRFS-2819

This commit is contained in:
Seth Call 2015-03-27 15:36:09 -05:00
parent 9ee31aad2c
commit 23fdf51110
5 changed files with 248 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/assets/javascripts/layout.js
View File

@ -95,6 +95,8 @@
layoutHeader(width, height);
layoutNotify(width, height);
layoutFooter(width, height);
$(document).triggerHandler('layout_resized');
}
function layoutCurtain(screenWidth, screenHeight) {

49
web/app/assets/javascripts/session.js
View File

@ -116,6 +116,11 @@
var $metronomePlaybackSelect = null;
var $metronomePlaybackHelp = null;
var $templatePendingMetronome = null;
var $myTracks = null;
var $liveTracks = null;
var $audioTracks = null;
var $fluidTracks = null;
var mediaTrackGroups = [ChannelGroupIds.MediaTrackGroup, ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup];
var muteBothMasterAndPersonalGroups = [ChannelGroupIds.AudioInputMusicGroup, ChannelGroupIds.MediaTrackGroup, ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup];
@ -612,6 +617,8 @@
$('.session-recordings .recording-controls').hide();
$closePlaybackRecording.show();
$('.session-recordings .session-recording-name').text('(No audio loaded)')
$('.session-recordings').attr('media-state', 'closed')
$('.session-livetracks').attr('media-state', 'closed')
}
}
function didSelfOpenMedia() {
@ -643,7 +650,7 @@
}
checkPendingMetronome();
resetOtherAudioContent();
resizeFluid();
/**
if ($('.session-recordings .track').length === 0) {
$('.session-recordings .when-empty').show();
@ -1893,6 +1900,39 @@
function otherAudioFilled() {
$('.session-recordings .when-empty').hide();
$('.session-recording-name-wrapper').show();
$('.session-recordings').attr('media-state', 'open');
$('.session-livetracks').attr('media-state', 'open');
}
function resizeFluid() {
var trackWidth = 78; // 70 width + 8 margin
var trackPadding = 30; // 15px left and right
var numLiveTracks = $liveTracks.find('.track').length;
var numAudioTracks = $audioTracks.find('.track').length;
var totalWidth = $fluidTracks.width();
// calculate desired audio tracks width
var minimumLiveTrackWidth = numLiveTracks * trackWidth + trackPadding;
var otherAudioWidth = numAudioTracks * trackWidth + trackPadding;
var liveTrackWidth = totalWidth - otherAudioWidth;
// live tracks get precedence over audio tracks, if there is a content over width usage
if(liveTrackWidth < minimumLiveTrackWidth) {
logger.debug("live track width trumping mode")
liveTrackWidth = minimumLiveTrackWidth;
otherAudioWidth = totalWidth - liveTrackWidth;
}
var otherAudioWidthPct = Math.floor(100 * otherAudioWidth/totalWidth);
var liveTrackWidthPct = Math.ceil(100 * liveTrackWidth/totalWidth);
logger.debug("resizeFluid: ", minimumLiveTrackWidth, otherAudioWidth, otherAudioWidthPct, liveTrackWidthPct, liveTrackWidthPct)
$audioTracks.css('width', otherAudioWidthPct + '%');
$liveTracks.css('width', liveTrackWidthPct + '%');
}
function _addRecordingTrack(trackData, mixer, oppositeMixer) {
@ -2977,6 +3017,9 @@
$(document).on("change", ".metronome-select", onMetronomeChanged)
$metronomePlaybackSelect.metronomePlaybackMode().on(EVENTS.METRONOME_PLAYBACK_MODE_SELECTED, metronomePlaybackModeChanged)
context.JK.helpBubble($metronomePlaybackHelp, 'metromone-playback-modes', {} , {offsetParent: $screen, width:'400px'});
$(document).on('layout_resized', function() {
resizeFluid();
});
}
this.initialize = function(localRecordingsDialogInstance, recordingFinishedDialogInstance, friendSelectorDialog) {
@ -3010,6 +3053,10 @@
$metronomePlaybackSelect = $('#metronome-playback-select')
$metronomePlaybackHelp = $('#metronome-playback-help')
$templatePendingMetronome = $('#template-pending-metronome');
$myTracks = $screen.find('.session-mytracks');
$liveTracks = $screen.find('.session-livetracks');
$audioTracks = $screen.find('.session-recordings');
$fluidTracks = $screen.find('.session-fluidtracks')
events();

220
web/app/assets/stylesheets/client/session.css.scss
View File

@ -13,6 +13,7 @@
background-color:#4c4c4c;
min-height:20px;
position:relative;
min-width:690px;
}
.pending-metronome {
@ -55,7 +56,11 @@
.recording-position {
display:inline-block;
width:80%;
width:calc(100% - 27px - 47px); // 27 accounts for play arrow, 47px acconts for the total time (0:00)
position:absolute;
left:0;
margin-left:27px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
@ -150,6 +155,7 @@
.session-add {
margin-top:9px;
margin-right:10px;
}
.session-add a {
vertical-align:top;
@ -193,6 +199,139 @@
color:#ffcc00;
cursor:help;
}
.leave {
margin-right:25px;
}
$mytracks-minwidth: 180px;
$livetracks-minwidth:180px;
$otheraudio-minwidth:195px;
$otheraudio-open-minwidth:230px;
.session-mytracks {
padding-left:15px;
float:left;
display:inline-block;
width:$mytracks-minwidth;
border-right:solid 1px #666;
@include border_box_sizing;
}
.session-fluidtracks {
width:calc(100% - #{$mytracks-minwidth});
position:relative;
float:left;
@include border_box_sizing;
}
.session-livetracks {
padding-left:15px;
padding-right:15px;
float:left;
display:inline-block;
min-width:$livetracks-minwidth;
max-width:calc(100% - #{$otheraudio-minwidth});
width:calc(100% - #{$otheraudio-minwidth});
border-right:solid 1px #666;
@include border_box_sizing;
&[media-state="open"] {
width:calc(100% - #{$otheraudio-open-minwidth});
max-width:calc(100% - #{$otheraudio-open-minwidth});
min-width:#{$livetracks-minwidth};
}
.recording {
left: 50%;
margin-left: -67px;
}
.recording-controls {
min-width:230px;
}
}
.session-recordings {
padding-left:15px;
padding-right:15px;
display:inline-block;
max-width:calc(100% - #{$livetracks-minwidth});
min-width:#{$otheraudio-minwidth};
width:#{$otheraudio-minwidth};
float:left;
@include border_box_sizing;
&[media-state="open"] {
width:$otheraudio-open-minwidth;
min-width:$otheraudio-open-minwidth;
max-width:calc(100% - #{$livetracks-minwidth});
}
.recording.metronome-mode {
margin-left:-100px;
}
}
#tracks .when-empty.livetracks {
margin: 0px;
padding:0px;
display:block;
padding-top: 125px;
vertical-align:middle;
text-align:center;
}
#tracks .when-empty.recordings {
//padding-top: 137px;
text-align:left;
padding-top:6px;
margin:0;
}
#tracks .when-empty a {
text-decoration: underline;
color: inherit;
}
.session-add {
margin-top:9px;
margin-bottom:8px;
font-size:16px;
height: 22px;
min-height: 22px;
max-height: 22px;
}
.session-add a {
color:#ccc;
text-decoration: none;
}
.session-add a img {
vertical-align:bottom;
}
.session-tracks-scroller {
position:relative;
overflow-x:auto;
overflow-y:hidden;
width:100%;
height:370px;
float:left;
white-space:nowrap;
}
.play-controls-holder {
width:100%;
text-align:center;
.recording {
left:50%;
margin-left:-46.5%;
}
}
}
@ -334,84 +473,6 @@ table.vu td {
margin-left:15px;
}
.leave {
margin-right:25px;
}
.session-mytracks {
margin-left:15px;
float:left;
display:inline-block;
width:19%;
min-width:165px;
border-right:solid 1px #666;
}
.session-livetracks {
margin-left:15px;
float:left;
display:inline-block;
width:35%;
min-width:220px;
border-right:solid 1px #666;
}
.session-recordings {
margin-left:15px;
display:inline-block;
width:35%;
min-width:220px;
}
#tracks .when-empty.livetracks {
margin: 0px;
padding:0px;
display:block;
padding-top: 125px;
vertical-align:middle;
text-align:center;
}
#tracks .when-empty.recordings {
//padding-top: 137px;
text-align:left;
padding-top:6px;
margin:0;
}
#tracks .when-empty a {
text-decoration: underline;
color: inherit;
}
.session-add {
margin-top:9px;
margin-bottom:8px;
font-size:16px;
height: 22px;
min-height: 22px;
max-height: 22px;
}
.session-add a {
color:#ccc;
text-decoration: none;
}
.session-add a img {
vertical-align:bottom;
}
.session-tracks-scroller {
position:relative;
overflow-x:auto;
overflow-y:hidden;
width:100%;
height:370px;
float:left;
white-space:nowrap;
}
@ -750,7 +811,6 @@ table.vu td {
margin-top:15px;
padding:3px;
height:19px;
width:95%;
background-color:#242323;
position:absolute;
text-align:center;

2
web/app/assets/stylesheets/web/audioWidgets.css.scss
View File

@ -30,6 +30,8 @@
&.metronome-mode {
width:200px;
margin-left:-100px;
left:50%;
.recording-position, .recording-current, .playback-mode-buttons {
display:none;
}

110
web/app/views/clients/_session.html.slim
View File

@ -46,61 +46,63 @@
| CHAT
.voicechat-gain
.voicechat-mute.enabled[control="mute" mixer-id=""]
.session-livetracks
h2
| live tracks
.session-add[layout-link="select-invites"]
a#session-invite-musicians[href="#"]
= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"}
|   Invite Musicians
.session-tracks-scroller
#session-livetracks-container
.when-empty.livetracks
| No other musicians
br
| are in your session
br[clear="all"]
#recording-start-stop.recording
a
= image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"}
|   
span#recording-status
| Make a Recording
.session-recordings
h2
| other audio
.session-recording-name-wrapper
.session-recording-name.left
| (No audio loaded)
.session-add.right
a#close-playback-recording[href="#"]
= image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"}
|   Close
.session-tracks-scroller
#session-recordedtracks-container
.when-empty.recordings
span.open-media-file-header
= image_tag "content/icon_folder.png", {width:22, height:20}
| Open:
ul.open-media-file-options
li
a#open-a-recording[href="#"]
| Recording
- if Rails.application.config.jam_tracks_available || (current_user && current_user.admin)
.session-fluidtracks
.session-livetracks
h2
| live tracks
.session-add[layout-link="select-invites"]
a#session-invite-musicians[href="#"]
= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"}
|   Invite Musicians
.session-tracks-scroller
#session-livetracks-container
.when-empty.livetracks
| No other musicians
br
| are in your session
br[clear="all"]
#recording-start-stop.recording
a
= image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"}
|   
span#recording-status
| Make a Recording
.session-recordings
h2
| other audio
.session-recording-name-wrapper
.session-recording-name.left
| (No audio loaded)
.session-add.right
a#close-playback-recording[href="#"]
= image_tag "content/icon_close.png", {:width => 18, :height => 20, :align => "texttop"}
|   Close
.session-tracks-scroller
#session-recordedtracks-container
.when-empty.recordings
span.open-media-file-header
= image_tag "content/icon_folder.png", {width:22, height:20}
| Open:
ul.open-media-file-options
li
a#open-a-jamtrack[href="#"]
| JamTrack
- if Rails.application.config.backing_tracks_available
li
a#open-a-backingtrack[href="#"]
| Audio File
.when-empty.use-metronome-header
- if Rails.application.config.metronome_available
= image_tag "content/icon_metronome.png", {width:22, height:20}
a#open-a-metronome[href="#"]
| Use Metronome
br[clear="all"]
= render "play_controls"
a#open-a-recording[href="#"]
| Recording
- if Rails.application.config.jam_tracks_available || (current_user && current_user.admin)
li
a#open-a-jamtrack[href="#"]
| JamTrack
- if Rails.application.config.backing_tracks_available
li
a#open-a-backingtrack[href="#"]
| Audio File
.when-empty.use-metronome-header
- if Rails.application.config.metronome_available
= image_tag "content/icon_metronome.png", {width:22, height:20}
a#open-a-metronome[href="#"]
| Use Metronome
br[clear="all"]
.play-controls-holder
= render "play_controls"
= render "configureTrack"
= render "addTrack"
= render "addNewGear"