bug fixes, switching over to use ember-paper menus, mobile improvements
This commit is contained in:
Egor
parent
e9ac1d162b
commit
decc0de04c
38 changed files with 447 additions and 5600 deletions
|
|
@ -7,6 +7,9 @@ It lives at http://www.huegasm.com
|
|||
## Current priorities
|
||||
- create a hybrid app with Cardova
|
||||
|
||||
## Bugs
|
||||
- HackTimer not working? Slowness when switching to another browser tab, etc...
|
||||
|
||||
## POSSIBLE FUTURE FEATURES
|
||||
- decode the hue color better
|
||||
- better visualizations
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export default Component.extend({
|
|||
element: '#dimmer',
|
||||
intro: 'And that\'s it...Hope you enjoy the application. ;)<br><br>' +
|
||||
'<i><b>TIP</b>: click on the icon to switch to a darker theme.</i>',
|
||||
position: 'top'
|
||||
position: 'bottom'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
@ -227,12 +227,6 @@ export default Component.extend({
|
|||
$('#lights-tab').addClass('hidden');
|
||||
$('.navigation-item').eq(0).removeClass('active');
|
||||
$('.navigation-item').eq(1).addClass('active');
|
||||
|
||||
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){
|
||||
playerBottom.show();
|
||||
} else {
|
||||
playerBottom.hide();
|
||||
}
|
||||
}, onExit = ()=>{
|
||||
let dimmer = $('#dimmer');
|
||||
|
||||
|
|
|
|||
|
|
@ -6,29 +6,26 @@
|
|||
<span class="navigation-item text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
{{/each}}
|
||||
|
||||
<div id="settings">
|
||||
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
|
||||
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=28}}
|
||||
</span>
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=true}}
|
||||
{{paper-icon "settings-icon" class=dimmerOnClass size=28}}
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content width=3 as |content|}}
|
||||
{{#content.menu-item onClick="clearBridge"}}
|
||||
{{paper-icon "compare arrows" class=dimmerOnClass}} Switch bridge
|
||||
{{/content.menu-item}}
|
||||
|
||||
<ul id="settings-menu" class="dropdown-menu">
|
||||
<li {{action "clearBridge"}}>
|
||||
<a href="#">
|
||||
Switch bridge
|
||||
</a>
|
||||
</li>
|
||||
<li {{action "startIntro"}}>
|
||||
<a href="#">
|
||||
Restart tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li {{action "clearAllSettings"}}>
|
||||
<a href="#">
|
||||
Reset settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{#content.menu-item onClick="startIntro"}}
|
||||
{{paper-icon "cached" class=dimmerOnClass}} Restart tutorial
|
||||
{{/content.menu-item}}
|
||||
|
||||
{{#content.menu-item onClick="clearAllSettings"}}
|
||||
{{paper-icon "settings backup restore" class=dimmerOnClass}} Reset settings
|
||||
{{/content.menu-item}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
</div>
|
||||
|
||||
{{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#if bridgeUsername}}
|
||||
{{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage}}
|
||||
{{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
|
||||
{{else}}
|
||||
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
|
||||
{{/if}}
|
||||
|
|
@ -9,12 +9,10 @@ const {
|
|||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['col-sm-8', 'col-sm-offset-2', 'col-xs-12'],
|
||||
classNames: ['col-xs-12'],
|
||||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'lights-tab',
|
||||
|
||||
colorPickerDisplayed: false,
|
||||
|
||||
rgb: [255, 255, 255],
|
||||
|
||||
lightsOn: false,
|
||||
|
|
@ -30,14 +28,6 @@ export default Component.extend({
|
|||
return this.get('colorLoopOn') ? 'On' : 'Off';
|
||||
}),
|
||||
|
||||
colorRowAction: computed('strobeOn', function() {
|
||||
if (this.get('trial')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return 'toggleColorPicker';
|
||||
}),
|
||||
|
||||
// determines the average brightness of the hue system for the brightness slider
|
||||
lightsBrightness: computed('lightsData', function(){
|
||||
let lightsData = this.get('lightsData'),
|
||||
|
|
@ -173,24 +163,6 @@ export default Component.extend({
|
|||
});
|
||||
}),
|
||||
|
||||
didInsertElement() {
|
||||
$(document).click((event)=>{
|
||||
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('#color-picker, #color-row').length) {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '#color-row', () => {
|
||||
this.send('toggleColorPicker');
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
toggleColorPicker() {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
},
|
||||
|
||||
// **************** STROBE LIGHT START ****************
|
||||
strobeOn: false,
|
||||
|
||||
|
|
|
|||
|
|
@ -8,22 +8,26 @@
|
|||
{{#paper-item}}
|
||||
{{paper-icon "brightness-4" class=dimmerOnClass}}
|
||||
<p>Brightness</p>
|
||||
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
|
||||
{{paper-slider flex=true min=1 max=254 value=lightsBrightness disabled=brightnessControlDisabled}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item elementId="color-row"}}
|
||||
{{#paper-item class="color-row"}}
|
||||
{{paper-icon "color-lens" class=dimmerOnClass}}
|
||||
<p>Color</p>
|
||||
{{#paper-menu offset="0 -100" as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=false}}
|
||||
{{paper-button raised=true class="color" disabled=trial}}
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content class="color-content" width=8 as |content|}}
|
||||
{{#content.menu-item}}
|
||||
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
{{/content.menu-item}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
{{/paper-item}}
|
||||
|
||||
<div class="relative">
|
||||
{{paper-button raised=true class="color" onClick=(action "toggleColorPicker") disabled=trial}}
|
||||
|
||||
{{#if colorPickerDisplayed}}
|
||||
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon "flare" class=dimmerOnClass}}
|
||||
<p>Strobe</p>
|
||||
|
|
|
|||
|
|
@ -349,6 +349,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super();
|
||||
|
||||
let self = this;
|
||||
|
||||
// file input code
|
||||
|
|
@ -376,6 +378,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
// demo tracks
|
||||
if(this.get('firstVisit')){
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/dillistone/dillistone-lili-n-rude');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me');
|
||||
|
|
@ -598,7 +601,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
if(isEmpty($('#player-controls:hover')) && this.get('playQueuePointer') !== -1 ){
|
||||
this.send('play');
|
||||
|
||||
$('#play-notification').velocity({opacity: 0.8, scale: 1}, 0).velocity({opacity: 0, scale: 3}, 500);
|
||||
$('#play-notification').velocity({opacity: 1, scale: 1}, 0).velocity({opacity: 0, scale: 3}, 500);
|
||||
}
|
||||
},
|
||||
play(replayPause) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const {
|
|||
} = Ember;
|
||||
|
||||
export default Mixin.create({
|
||||
classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'],
|
||||
classNames: ['col-xs-12'],
|
||||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'music-tab',
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ export default Mixin.create({
|
|||
usingLocalAudio: computed.equal('audioMode', 0),
|
||||
usingMicAudio: computed.equal('audioMode', 1),
|
||||
|
||||
playerBottomDisplayed: false,
|
||||
playerBottomDisplayed: true,
|
||||
dragging: false,
|
||||
draggingOverPlayListArea: false,
|
||||
dragLeaveTimeoutHandle: null,
|
||||
|
|
@ -189,7 +189,7 @@ export default Mixin.create({
|
|||
}),
|
||||
|
||||
largeArtworkPic: computed('playQueuePointer', 'usingMicAudio', 'currentVisName', function(){
|
||||
let pic = null,
|
||||
let pic = '',
|
||||
currentVisName = this.get('currentVisName'),
|
||||
usingMicAudio = this.get('usingMicAudio'),
|
||||
playQueuePointer = this.get('playQueuePointer'),
|
||||
|
|
@ -237,6 +237,14 @@ export default Mixin.create({
|
|||
}
|
||||
}),
|
||||
|
||||
playerAreaClickIcon: computed('playing', function() {
|
||||
if(this.get('playing')){
|
||||
return 'play-arrow';
|
||||
} else {
|
||||
return 'pause';
|
||||
}
|
||||
}),
|
||||
|
||||
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
|
||||
let classes = 'pointer';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<div class="row" id="step1">
|
||||
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
|
||||
<canvas id="visualization"></canvas>
|
||||
<div id="artwork"><img src={{largeArtworkPic}}></div>
|
||||
<div id="play-notification" class="material-icons {{if playing "play-arrow" "pause"}}"></div>
|
||||
<div id="player-area" class="col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
|
||||
<canvas id="visualization"></canvas>
|
||||
|
||||
<div id="artwork">
|
||||
<img src={{largeArtworkPic}}>
|
||||
</div>
|
||||
|
||||
{{paper-icon playerAreaClickIcon id="play-notification"}}
|
||||
|
||||
<div id="player-controls">
|
||||
{{#if usingLocalAudio}}
|
||||
|
|
@ -21,50 +25,54 @@
|
|||
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
||||
{{/if}}
|
||||
|
||||
<span class="pull-right">
|
||||
{{#if scUrl}}
|
||||
<a href="#" class="sound-cloud-link"{{action "gotoSCURL" scUrl}}>
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=true}}
|
||||
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content width=2 as |content|}}
|
||||
{{#each visNames as |name|}}
|
||||
{{#content.menu-item onClick=(action "setVisName" name)}}
|
||||
{{name}}
|
||||
|
||||
{{#if (eq currentVisName name)}}
|
||||
{{paper-icon "check" classNames=dimmerOnClass}}
|
||||
{{/if}}
|
||||
{{/content.menu-item}}
|
||||
{{/each}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
|
||||
{{#if scUrl}}
|
||||
<a href={{scUrl}} class="sound-cloud-link"{{action "gotoSCURL" scUrl}}>
|
||||
<img src="assets/images/sc-white.png" class="hidden-xs" />
|
||||
<img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
|
||||
</a>
|
||||
{{/if}}
|
||||
<span class="dropup">
|
||||
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span>
|
||||
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<ul class="dropdown-menu visualizers-menu">
|
||||
{{#each visNames as |name|}}
|
||||
<li>
|
||||
<a href="#" {{action "setVisName" name}}>{{name}}
|
||||
{{#if (eq currentVisName name)}}
|
||||
{{paper-icon "check" classNames=dimmerOnClass}}
|
||||
{{/if}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playlist" class="col-sm-4 col-xs-12">
|
||||
<div id="playlist" class="col-xs-12">
|
||||
<input id="file-input" type="file" accept="audio/*" multiple="true"/>
|
||||
|
||||
<div id="play-list-controls">
|
||||
{{#if usingLocalAudio}}
|
||||
<button class="dropdown-toggle pull-right add-new-music" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
Add new music
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
|
||||
<ul id="add-music-choices" class="dropdown-menu">
|
||||
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
|
||||
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
||||
</ul>
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=false}}
|
||||
{{paper-icon "playlist add" class="player-control-icon"}} Add new music
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content width=3 as |content|}}
|
||||
{{#content.menu-item onClick="addLocalAudio"}}
|
||||
{{paper-icon "attachment" class=shuffleClass}} Local file
|
||||
{{/content.menu-item}}
|
||||
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal"}}
|
||||
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
|
||||
{{/content.menu-item}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
{{/if}}
|
||||
|
||||
{{#if usingMicSupported}}
|
||||
|
|
@ -125,13 +133,13 @@
|
|||
</div>
|
||||
|
||||
<div id="slide-toggle" class="text-center row" {{action "slideTogglePlayerBottom"}}>
|
||||
<div class="col-xs-offset-5 col-xs-2">
|
||||
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
</div>
|
||||
<div class="col-xs-offset-5 col-xs-2">
|
||||
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
|
||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
<div id="beat-area" class="col-xs-12">
|
||||
{{#if usingBeatPreferences}}
|
||||
<span id="save-beat-preferences-star">
|
||||
{{paper-icon "star" class=dimmerOnClass}}
|
||||
|
|
@ -139,7 +147,7 @@
|
|||
{{/if}}
|
||||
|
||||
<div class="row" id="beat-option-row">
|
||||
<div class="beat-option col-xs-4">
|
||||
<div class="beat-option col-xs-6">
|
||||
<span class="option-description">
|
||||
Sensitivity
|
||||
</span>
|
||||
|
|
@ -147,7 +155,7 @@
|
|||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-xs-4">
|
||||
<div class="beat-option col-xs-6">
|
||||
<span class="option-description">
|
||||
Hue Range
|
||||
</span>
|
||||
|
|
@ -164,20 +172,18 @@
|
|||
{{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range on-slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="light-option" class="beat-option col-xs-4">
|
||||
<span>
|
||||
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
|
||||
</span>
|
||||
|
||||
<span>
|
||||
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="beat-container" class="col-sm-5 col-xs-12">
|
||||
<div class="beat-option col-xs-6">
|
||||
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-xs-6">
|
||||
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
|
||||
</div>
|
||||
|
||||
<div id="beat-container" class="col-xs-12">
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
|
|
|
|||
|
|
@ -40,11 +40,11 @@ button.md-warn {
|
|||
|
||||
div.ember-modal-dialog {
|
||||
padding: 20px;
|
||||
color: black;
|
||||
color: $blackish;
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
input {
|
||||
color: black !important;
|
||||
input.md-input[type="text"] {
|
||||
color: $blackish !important;
|
||||
}
|
||||
}
|
||||
md-input-container label {
|
||||
|
|
@ -59,12 +59,6 @@ div.ember-modal-dialog {
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: 14px;
|
||||
a {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
}
|
||||
// fancy webkit scrollbars
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
|
|
@ -26,30 +26,19 @@ body.dimmerOn {
|
|||
.color {
|
||||
border: 1px solid white;
|
||||
}
|
||||
.playlist-item, .dropdown-menu, .add-new-music {
|
||||
color: $whitish;
|
||||
background-color: $dimmerOnButtonColor;
|
||||
}
|
||||
.dropdown-menu {
|
||||
a {
|
||||
.playlist-item, .ember-basic-dropdown-content md-menu-content {
|
||||
color: $whitish;
|
||||
background-color: $dimmerOnButtonColor;
|
||||
}
|
||||
.ember-basic-dropdown-content a {
|
||||
color: $whitish;
|
||||
&:hover {
|
||||
background-color: darken($dimmerOnButtonColor, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.playlist-item {
|
||||
&.active {
|
||||
background: darken($dimmerOnButtonColor, 15%) !important;
|
||||
}
|
||||
&:hover {
|
||||
background: darken($dimmerOnButtonColor, 10%);
|
||||
}
|
||||
.audio-remove-button .paper-icon {
|
||||
color: $whitish !important;
|
||||
&:hover {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
|
|
@ -62,7 +51,7 @@ body.dimmerOn {
|
|||
background: darken($dimmerOnButtonColor, 5%);
|
||||
}
|
||||
.popover-content {
|
||||
color: black !important;
|
||||
color: $blackish !important;
|
||||
}
|
||||
.md-bar {
|
||||
background-color: darken(white, 60%) !important;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
#lights-tab {
|
||||
min-height: 350px;
|
||||
.paper-icon {
|
||||
line-height: 0.8 !important;
|
||||
}
|
||||
md-slider {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#hue-controls {
|
||||
|
|
@ -28,16 +30,14 @@
|
|||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.color {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
top: -53px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-row .md-list-item-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#color-picker {
|
||||
|
|
@ -53,6 +53,13 @@
|
|||
z-index: 3;
|
||||
}
|
||||
|
||||
.color-content {
|
||||
box-shadow: none !important;
|
||||
md-menu-content, md-menu-item {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
#loop-addition {
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
|
|
@ -60,42 +67,9 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
#settings {
|
||||
#navigation .ember-basic-dropdown-trigger {
|
||||
z-index: 3;
|
||||
text-align: right;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
position: absolute;
|
||||
box-shadow: 1px 10px 15px 1px rgba(0, 0, 0, 0.3);
|
||||
left: -135px;
|
||||
top: 25px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#settings-icon {
|
||||
transition: 0.1s all ease-in-out;
|
||||
&:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:before {
|
||||
transition: 0.1s all ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
#lights-tab {
|
||||
font-size: 20px;
|
||||
min-height: 450px;
|
||||
.paper-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
.md-list-item-inner {
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.introjs-overlay {
|
||||
background: black;
|
||||
background: $blackish;
|
||||
}
|
||||
|
||||
#settings.introjs-fixParent {
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.introjs-tooltip {
|
||||
color: black;
|
||||
color: $blackish;
|
||||
}
|
||||
|
||||
.introjs-skipbutton {
|
||||
|
|
|
|||
|
|
@ -34,10 +34,6 @@
|
|||
transition-property: transform;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
img:hover {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.ember-modal-overlay.translucent {
|
||||
|
|
|
|||
|
|
@ -2,42 +2,40 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#beat-option-row {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#light-option {
|
||||
text-align: left !important;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
#music-tab {
|
||||
padding: 0;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
#slide-toggle {
|
||||
font-size: 26px;
|
||||
color: $playerDefaultIconColor;
|
||||
background: #730B07;
|
||||
div .paper-icon {
|
||||
color: inherit !important;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#slide-toggle:hover{
|
||||
color: lighten($playerDefaultIconColor, 30%) !important;;
|
||||
}
|
||||
|
||||
#player-controls {
|
||||
transition: all 0.2s ease-in-out;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 5px 10px;
|
||||
padding: 15px 10px;
|
||||
width: 100%;
|
||||
color: white !important;
|
||||
z-index: 20;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
|
||||
.ember-basic-dropdown-trigger {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
}
|
||||
md-menu-item > .md-button md-icon {
|
||||
margin: auto 0 5px 10px;
|
||||
}
|
||||
.play-arrow, .pause, .replay {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
|
@ -53,24 +51,21 @@
|
|||
.player-control-icon {
|
||||
color: $playerDefaultIconColor !important;
|
||||
transition-duration: 0.1s;
|
||||
margin-right: 5px;
|
||||
margin-right: 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.player-control-icon.active {
|
||||
color: $secondaryThemeColor !important;
|
||||
}
|
||||
|
||||
.player-control-icon:hover {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#play-notification {
|
||||
position: relative;
|
||||
color: white;
|
||||
color: white !important;
|
||||
background: black;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
background: black;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -88,18 +83,18 @@
|
|||
}
|
||||
|
||||
#player-area * .noUi-origin {
|
||||
background-color: black;
|
||||
background-color: $blackish;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#player-area * .noUi-base {
|
||||
background-color: black;
|
||||
background-color: $blackish;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#volume-bar {
|
||||
width: 5em;
|
||||
height: 0.4em;
|
||||
height: 0.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -108,17 +103,12 @@
|
|||
}
|
||||
|
||||
#seek-slider {
|
||||
height: 6px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
#seek-slider:hover {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#seek-slider:hover * .noUi-handle {
|
||||
opacity: 1;
|
||||
.noUi-handle {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#seek-slider * .noUi-handle {
|
||||
|
|
@ -135,17 +125,28 @@
|
|||
}
|
||||
|
||||
#play-list-controls {
|
||||
min-height: 30px;
|
||||
min-height: 40px;
|
||||
margin-top: 5px;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
button .player-control-icon {
|
||||
margin: 0 5px 1px 3px;
|
||||
}
|
||||
.ember-basic-dropdown-trigger {
|
||||
float: right;
|
||||
color: $whitish;
|
||||
.paper-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#play-list-area, #play-area-mic {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
margin: 10px auto 0 auto;
|
||||
margin: 5px auto;
|
||||
border-radius: 5px;
|
||||
transition: 0.1s all ease-in-out;
|
||||
position: relative;
|
||||
|
|
@ -184,7 +185,7 @@
|
|||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 0 20px 0 5px;
|
||||
position: relative;
|
||||
color: black;
|
||||
color: $blackish;
|
||||
background: darken(white, 5%);
|
||||
.close {
|
||||
font-size: 18px;
|
||||
|
|
@ -224,7 +225,6 @@
|
|||
}
|
||||
|
||||
#beat-area {
|
||||
height: $playerBottomHeight;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
.option-description {
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
}
|
||||
button {
|
||||
margin-top: 0;
|
||||
|
|
@ -249,15 +249,19 @@
|
|||
}
|
||||
|
||||
#player-bottom {
|
||||
color: black;
|
||||
color: $blackish;
|
||||
border: 1px solid black;
|
||||
width: 100%;
|
||||
background: white;
|
||||
padding-bottom: 20px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px
|
||||
}
|
||||
|
||||
#beat-container {
|
||||
padding: 0;
|
||||
height: $playerBottomHeight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#beat-area .light-group {
|
||||
|
|
@ -285,12 +289,10 @@
|
|||
border: none;
|
||||
}
|
||||
|
||||
.add-new-music:hover {
|
||||
background: darken(#f8f8f8, 5%);
|
||||
}
|
||||
|
||||
.sound-cloud-link {
|
||||
margin-right: 5px;
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
bottom: 22px;
|
||||
}
|
||||
|
||||
#visualization {
|
||||
|
|
@ -303,6 +305,7 @@
|
|||
position: absolute;
|
||||
top: 3px;
|
||||
z-index: 1000;
|
||||
right: 5px;
|
||||
md-icon {
|
||||
color: $secondaryThemeColor !important;
|
||||
font-size: 25px;
|
||||
|
|
@ -343,32 +346,9 @@
|
|||
font-size: 18px !important;
|
||||
color: rgb(51, 51, 51);
|
||||
text-shadow: none;
|
||||
&:hover {
|
||||
color: darken(#333333, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ember-notify-default.ember-notify-cn {
|
||||
top: 0;
|
||||
bottom: initial;
|
||||
}
|
||||
|
||||
// mobile overrides
|
||||
@media(max-width:767px) {
|
||||
#seek-slider {
|
||||
height: 8px;
|
||||
.noUi-handle {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
#seek-slider {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.beat-option {
|
||||
text-align: center !important;
|
||||
}
|
||||
#save-beat-preferences-star {
|
||||
right: 5px;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,6 @@
|
|||
background: $playerDefaultIconColor !important;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle:hover {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.noUi-target {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@ md-checkbox.md-default-theme.md-checked .md-icon {
|
|||
|
||||
md-checkbox .md-label {
|
||||
width: 125px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.md-button {
|
||||
|
|
@ -42,9 +39,3 @@ md-icon {
|
|||
md-switch.md-default-theme.md-checked .md-thumb {
|
||||
background-color: $secondaryThemeColor;
|
||||
}
|
||||
|
||||
@media(max-width:500px) {
|
||||
md-checkbox .md-label {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "huegasm",
|
||||
"dependencies": {
|
||||
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.0.0",
|
||||
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.1.0",
|
||||
"JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
|
||||
"bootstrap-sass": "^3.3.5",
|
||||
"ember": "beta",
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
|
|||
module.exports = function(defaults) {
|
||||
var app = new EmberApp(defaults);
|
||||
|
||||
app.import('bower_components/HackTimer/HackTimer.js');
|
||||
|
||||
app.import('vendor/dancer.js');
|
||||
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js');
|
||||
app.import('bower_components/HackTimer/HackTimer.js');
|
||||
app.import('bower_components/intro.js/intro.js');
|
||||
app.import('bower_components/intro.js/introjs.css');
|
||||
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"scripts": {
|
||||
"start": "ember server",
|
||||
"build": "ember build",
|
||||
"test": "ember test"
|
||||
"test": "ember test",
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10.0"
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
"ember-cli-sri": "^2.1.0",
|
||||
"ember-cli-test-loader": "^1.1.0",
|
||||
"ember-cli-uglify": "^1.2.0",
|
||||
"ember-cordova": "0.3.5",
|
||||
"ember-cordova": "^0.3.5",
|
||||
"ember-export-application-global": "^1.0.4",
|
||||
"ember-load-initializers": "^0.5.0",
|
||||
"ember-modal-dialog": "^0.9.0",
|
||||
"ember-notify": "^5.0.4",
|
||||
"ember-paper": "^1.0.0-alpha.5",
|
||||
"ember-paper": "^1.0.0-alpha.7",
|
||||
"ember-resolver": "^2.0.3",
|
||||
"ember-truth-helpers": "^1.2.0",
|
||||
"loader.js": "^4.0.7"
|
||||
|
|
|
|||
|
|
@ -3,34 +3,33 @@
|
|||
{{#each tabData as |tab|}}
|
||||
<span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
{{/each}}
|
||||
<div id="settings">
|
||||
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
|
||||
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=28}}
|
||||
</span>
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=true}}
|
||||
{{paper-icon "settings-icon" class=dimmerOnClass size=28}}
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content width=3 as |content|}}
|
||||
{{#content.menu-item onClick="clearBridge"}}
|
||||
{{paper-icon "compare arrows" class=dimmerOnClass}} Switch bridge
|
||||
{{/content.menu-item}}
|
||||
|
||||
<ul id="settings-menu" class="dropdown-menu">
|
||||
<li {{action "clearBridge"}}>
|
||||
<a href="#">
|
||||
Switch bridge
|
||||
</a>
|
||||
</li>
|
||||
<li {{action "startIntro"}}>
|
||||
<a href="#">
|
||||
Restart tutorial
|
||||
</a>
|
||||
</li>
|
||||
<li {{action "clearAllSettings"}}>
|
||||
<a href="#">
|
||||
Reset settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{#content.menu-item onClick="startIntro"}}
|
||||
{{paper-icon "cached" class=dimmerOnClass}} Restart tutorial
|
||||
{{/content.menu-item}}
|
||||
|
||||
{{#content.menu-item onClick="clearAllSettings"}}
|
||||
{{paper-icon "settings backup restore" class=dimmerOnClass}} Reset settings
|
||||
{{/content.menu-item}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
</div>
|
||||
|
||||
{{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}
|
||||
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
<div class="row">
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
|
||||
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
|
||||
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -13,8 +13,6 @@ export default Component.extend({
|
|||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'lights-tab',
|
||||
|
||||
colorPickerDisplayed: false,
|
||||
|
||||
rgb: [255, 255, 255],
|
||||
|
||||
lightsOn: false,
|
||||
|
|
@ -30,14 +28,6 @@ export default Component.extend({
|
|||
return this.get('colorLoopOn') ? 'On' : 'Off';
|
||||
}),
|
||||
|
||||
colorRowAction: computed('strobeOn', function() {
|
||||
if (this.get('trial')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return 'toggleColorPicker';
|
||||
}),
|
||||
|
||||
// determines the average brightness of the hue system for the brightness slider
|
||||
lightsBrightness: computed('lightsData', function(){
|
||||
let lightsData = this.get('lightsData'),
|
||||
|
|
@ -173,24 +163,6 @@ export default Component.extend({
|
|||
});
|
||||
}),
|
||||
|
||||
didInsertElement() {
|
||||
$(document).click((event)=>{
|
||||
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('#color-picker, #color-row').length) {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '#color-row', () => {
|
||||
this.send('toggleColorPicker');
|
||||
});
|
||||
},
|
||||
|
||||
actions: {
|
||||
toggleColorPicker() {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
},
|
||||
|
||||
// **************** STROBE LIGHT START ****************
|
||||
strobeOn: false,
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +1,43 @@
|
|||
{{#paper-list}}
|
||||
{{#paper-item}}
|
||||
{{paper-icon "power-settings-new" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
|
||||
<p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
|
||||
{{paper-switch value=lightsOn onChange=(action (mut lightsOn)) disabled=trial skipProxy=trial label=lightsOnTxt}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon "brightness-4" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The brightness level of the selected lights">Brightness</p>
|
||||
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
|
||||
<p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The brightness level of the selected lights">Brightness</p>
|
||||
{{paper-slider flex=true min=1 max=254 value=lightsBrightness disabled=brightnessControlDisabled}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item elementId="color-row"}}
|
||||
{{paper-icon "color-lens" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p>
|
||||
<p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p>
|
||||
|
||||
{{#paper-menu offset="0 -50" as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=false}}
|
||||
{{paper-button raised=true class="color" disabled=trial}}
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content class="color-content" width=0 as |content|}}
|
||||
{{#content.menu-item}}
|
||||
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
{{/content.menu-item}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
{{/paper-item}}
|
||||
|
||||
<div class="relative">
|
||||
{{paper-button raised=true class="color" onClick=(action "toggleColorPicker") disabled=trial}}
|
||||
|
||||
{{#if colorPickerDisplayed}}
|
||||
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon "flare" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
|
||||
<p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
|
||||
{{paper-switch value=strobeOn onChange=(action (mut strobeOn)) disabled=trial skipProxy=trial label=strobeOnTxt}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "loop" id="loop-addition" class=dimmerOnClass}}
|
||||
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
|
||||
<p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
|
||||
{{paper-switch value=colorLoopOn onChange=(action (mut colorLoopOn)) disabled=trial skipProxy=trial label=colorloopOnTxt}}
|
||||
{{/paper-item}}
|
||||
{{/paper-list}}
|
||||
|
|
@ -363,6 +363,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
},
|
||||
|
||||
didInsertElement() {
|
||||
this._super();
|
||||
|
||||
let self = this;
|
||||
|
||||
// file input code
|
||||
|
|
@ -409,6 +411,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
// demo tracks
|
||||
if(this.get('firstVisit')){
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/dillistone/dillistone-lili-n-rude');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler');
|
||||
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me');
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default Mixin.create({
|
|||
usingLocalAudio: computed.equal('audioMode', 0),
|
||||
usingMicAudio: computed.equal('audioMode', 1),
|
||||
|
||||
playerBottomDisplayed: false,
|
||||
playerBottomDisplayed: true,
|
||||
dragging: false,
|
||||
draggingOverPlayListArea: false,
|
||||
dragLeaveTimeoutHandle: null,
|
||||
|
|
@ -190,7 +190,7 @@ export default Mixin.create({
|
|||
}),
|
||||
|
||||
largeArtworkPic: computed('playQueuePointer', 'usingMicAudio', 'currentVisName', function(){
|
||||
let pic = null,
|
||||
let pic = '',
|
||||
currentVisName = this.get('currentVisName'),
|
||||
usingMicAudio = this.get('usingMicAudio'),
|
||||
playQueuePointer = this.get('playQueuePointer'),
|
||||
|
|
@ -238,6 +238,14 @@ export default Mixin.create({
|
|||
}
|
||||
}),
|
||||
|
||||
playerAreaClickIcon: computed('playing', function() {
|
||||
if(this.get('playing')){
|
||||
return 'play-arrow';
|
||||
} else {
|
||||
return 'pause';
|
||||
}
|
||||
}),
|
||||
|
||||
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
|
||||
let classes = 'pointer';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,55 +1,60 @@
|
|||
<div class="row" id="step1">
|
||||
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
|
||||
<canvas id="visualization"></canvas>
|
||||
<div id="artwork"><img src={{largeArtworkPic}}></div>
|
||||
<div id="play-notification" class="material-icons {{if playing "play-arrow" "pause"}}"></div>
|
||||
|
||||
<div id="player-controls">
|
||||
{{#if usingLocalAudio}}
|
||||
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-slide="seekChanged"}}
|
||||
<div id="artwork">
|
||||
<img src={{largeArtworkPic}}>
|
||||
</div>
|
||||
|
||||
{{#if playQueueNotEmpty}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
|
||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
|
||||
-->{{#if playQueueMultiple}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
|
||||
data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
|
||||
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
|
||||
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar"}}
|
||||
{{paper-icon playerAreaClickIcon id="play-notification"}}
|
||||
|
||||
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
||||
{{/if}}
|
||||
<div id="player-controls">
|
||||
{{#if usingLocalAudio}}
|
||||
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-slide="seekChanged"}}
|
||||
|
||||
<span class="pull-right">
|
||||
{{#if scUrl}}
|
||||
<a href="#" data-toggle="tooltip" data-placement="top" class="sound-cloud-link bootstrap-tooltip" data-title="Listen on SoundCloud" {{action "gotoSCURL" scUrl}}><img src="assets/images/sc-white.png" class="hidden-xs" /><img src="assets/images/sc-white-sm.png" class="visible-xs-inline" /></a>
|
||||
{{/if}}
|
||||
<span class="dropup">
|
||||
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
|
||||
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
||||
</span>
|
||||
</span>
|
||||
{{#if playQueueNotEmpty}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
|
||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
|
||||
-->{{#if playQueueMultiple}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
|
||||
data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
|
||||
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
|
||||
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
|
||||
|
||||
<ul class="dropdown-menu visualizers-menu">
|
||||
{{#each visNames as |name|}}
|
||||
<li>
|
||||
<a href="#" {{action "setVisName" name}}>{{name}}
|
||||
{{#if (eq currentVisName name)}}
|
||||
{{paper-icon "check" classNames=dimmerOnClass}}
|
||||
{{/if}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
||||
{{/if}}
|
||||
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=true}}
|
||||
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content width=2 as |content|}}
|
||||
{{#each visNames as |name|}}
|
||||
{{#content.menu-item onClick=(action "setVisName" name)}}
|
||||
{{name}}
|
||||
|
||||
{{#if (eq currentVisName name)}}
|
||||
{{paper-icon "check" classNames=dimmerOnClass}}
|
||||
{{/if}}
|
||||
{{/content.menu-item}}
|
||||
{{/each}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
|
||||
{{#if scUrl}}
|
||||
<a href={{scUrl}} class="sound-cloud-link"{{action "gotoSCURL" scUrl}}>
|
||||
<img src="assets/images/sc-white.png" class="hidden-xs" />
|
||||
<img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playlist" class="col-sm-4 col-xs-12">
|
||||
|
|
@ -57,25 +62,31 @@
|
|||
|
||||
<div id="play-list-controls">
|
||||
{{#if usingLocalAudio}}
|
||||
<button class="dropdown-toggle pull-right add-new-music" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
Add new music
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
|
||||
<ul id="add-music-choices" class="dropdown-menu">
|
||||
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
|
||||
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
||||
</ul>
|
||||
{{#paper-menu as |menu|}}
|
||||
{{#menu.trigger}}
|
||||
{{#paper-button iconButton=false}}
|
||||
{{paper-icon "playlist add" class="player-control-icon"}} <span id="add-new-music-label">Add new music</span>
|
||||
{{/paper-button}}
|
||||
{{/menu.trigger}}
|
||||
{{#menu.content width=3 as |content|}}
|
||||
{{#content.menu-item onClick="addLocalAudio"}}
|
||||
{{paper-icon "attachment" class=shuffleClass}} Local file
|
||||
{{/content.menu-item}}
|
||||
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal"}}
|
||||
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
|
||||
{{/content.menu-item}}
|
||||
{{/menu.content}}
|
||||
{{/paper-menu}}
|
||||
{{/if}}
|
||||
|
||||
{{#if usingMicSupported}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="using-mic-audio-tooltip" data-title={{usingMicAudioTooltipTxt}} {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="using-mic-audio-tooltip" data-title={{usingMicAudioTooltipTxt}} {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if usingLocalAudio}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
@ -102,7 +113,7 @@
|
|||
{{#if item.picture}}
|
||||
<img class="album-art" src={{item.picture}}>
|
||||
{{else}}
|
||||
<img class="album-art" src="assets/images/missingArtwork.png">
|
||||
<img class="album-art" src="assets/images/missingArtwork.png">
|
||||
{{/if}}
|
||||
|
||||
<div class="song-info">
|
||||
|
|
@ -120,7 +131,7 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -130,30 +141,30 @@
|
|||
</div>
|
||||
|
||||
<div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
|
||||
<div class="col-xs-offset-5 col-xs-2">
|
||||
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
</div>
|
||||
<div class="col-xs-offset-5 col-xs-2">
|
||||
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
|
||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
{{#if usingBeatPreferences}}
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||
{{paper-icon "star" class=dimmerOnClass}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
<div class="row" id="beat-option-row">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="option-description bootstrap-tooltip">
|
||||
<div class="beat-option col-sm-4 col-xs-6">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="option-description bootstrap-tooltip">
|
||||
Sensitivity
|
||||
</span>
|
||||
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="option-description bootstrap-tooltip">
|
||||
<div class="beat-option col-sm-4 col-xs-6">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The range of hues ( colors ) that the lights may change to on beat." class="option-description bootstrap-tooltip">
|
||||
Hue Range
|
||||
</span>
|
||||
|
||||
|
|
@ -162,7 +173,7 @@
|
|||
|
||||
{{#if usingMicAudio}}
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="option-description bootstrap-tooltip">
|
||||
<span data-toggle="tooltip" data-placement="top" data-title="The coefficient to boost the microphone signal by" class="option-description bootstrap-tooltip">
|
||||
Mic Boost
|
||||
</span>
|
||||
|
||||
|
|
@ -170,12 +181,12 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="light-option" class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
<div id="light-option" class="beat-option col-sm-4 col-xs-12">
|
||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
|
||||
</span>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
|
||||
</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,16 +16,6 @@
|
|||
@import 'music-tab';
|
||||
@import 'noui-slider';
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-bottom: $footerHeight;
|
||||
position: static;
|
||||
}
|
||||
|
||||
body, button {
|
||||
font-family: 'Slabo 27px', serif;
|
||||
}
|
||||
|
|
@ -35,12 +25,8 @@ body, button {
|
|||
}
|
||||
|
||||
#footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: $footerHeight;
|
||||
}
|
||||
|
||||
#footer-text {
|
||||
|
|
@ -71,25 +57,17 @@ button.md-warn {
|
|||
|
||||
div.ember-modal-dialog {
|
||||
padding: 20px;
|
||||
color: black;
|
||||
color: $blackish;
|
||||
md-input-container {
|
||||
width: 100%;
|
||||
.md-input {
|
||||
color: black !important;
|
||||
input.md-input[type="text"] {
|
||||
color: $blackish !important;
|
||||
}
|
||||
}
|
||||
md-input-container label {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: 14px;
|
||||
a {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
}
|
||||
// fancy webkit scrollbars
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
|
|
@ -30,8 +30,11 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
#bridge-finder .md-bar {
|
||||
background-color: $secondaryThemeColor !important;
|
||||
#bridge-finder {
|
||||
min-height: 500px;
|
||||
.md-bar {
|
||||
background-color: $secondaryThemeColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
// preloading image
|
||||
|
|
|
|||
|
|
@ -26,17 +26,12 @@ body.dimmerOn {
|
|||
.color {
|
||||
border: 1px solid white;
|
||||
}
|
||||
.playlist-item, .dropdown-menu, .add-new-music {
|
||||
.playlist-item, .ember-basic-dropdown-content md-menu-content {
|
||||
color: $whitish;
|
||||
background-color: $dimmerOnButtonColor;
|
||||
}
|
||||
.dropdown-menu {
|
||||
a {
|
||||
.ember-basic-dropdown-content a {
|
||||
color: $whitish;
|
||||
&:hover {
|
||||
background-color: darken($dimmerOnButtonColor, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.playlist-item {
|
||||
&.active {
|
||||
|
|
@ -62,14 +57,13 @@ body.dimmerOn {
|
|||
background: darken($dimmerOnButtonColor, 5%);
|
||||
}
|
||||
.popover-content {
|
||||
color: black !important;
|
||||
color: $blackish !important;
|
||||
}
|
||||
.md-bar {
|
||||
background-color: darken(white, 60%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.paper-icon.dimmerOn {
|
||||
color: inherit !important;
|
||||
text-shadow: $glowingText;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
.paper-icon {
|
||||
line-height: 0.8 !important;
|
||||
}
|
||||
md-slider {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.lights-control-tooltip + .tooltip {
|
||||
|
|
@ -11,6 +14,9 @@
|
|||
|
||||
#color-row {
|
||||
cursor: pointer;
|
||||
.md-list-item-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#hue-controls {
|
||||
|
|
@ -44,9 +50,10 @@
|
|||
|
||||
.color {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
position: absolute;
|
||||
top: -53px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-row .md-list-item-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#color-picker {
|
||||
|
|
@ -62,6 +69,13 @@
|
|||
z-index: 3;
|
||||
}
|
||||
|
||||
.color-content {
|
||||
box-shadow: none !important;
|
||||
md-menu-content, md-menu-item {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
#picker {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
|
@ -73,34 +87,13 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
#settings {
|
||||
#navigation .ember-basic-dropdown-trigger {
|
||||
z-index: 3;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
position: absolute;
|
||||
box-shadow: 1px 10px 15px 1px rgba(0, 0, 0, 0.3);
|
||||
left: -135px;
|
||||
top: 25px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#settings-icon {
|
||||
transition: 0.1s all ease-in-out;
|
||||
&:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
&:before {
|
||||
transition: 0.1s all ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
#lights-tab {
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
$playerHeight: 400px;
|
||||
$playerDefaultIconColor: #BBBBBB;
|
||||
$footerHeight: 50px;
|
||||
$playerBottomHeight: 255px;
|
||||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.introjs-overlay {
|
||||
background: black;
|
||||
background: $blackish;
|
||||
}
|
||||
|
||||
#settings.introjs-fixParent {
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.introjs-tooltip {
|
||||
color: black;
|
||||
color: $blackish;
|
||||
}
|
||||
|
||||
.introjs-skipbutton {
|
||||
|
|
|
|||
|
|
@ -2,28 +2,20 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#beat-option-row {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#light-option {
|
||||
text-align: left !important;
|
||||
top: 20%;
|
||||
.tooltip {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#music-tab {
|
||||
padding: 0;
|
||||
margin: 10px 0 $footerHeight + 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#slide-toggle {
|
||||
font-size: 28px;
|
||||
color: $playerDefaultIconColor;
|
||||
background: #730B07;
|
||||
div .paper-icon {
|
||||
color: inherit !important;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,17 +28,26 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 5px 10px;
|
||||
padding: 15px 10px;
|
||||
width: 100%;
|
||||
color: white !important;
|
||||
z-index: 20;
|
||||
cursor: default;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
|
||||
.ember-basic-dropdown-trigger {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 13px;
|
||||
}
|
||||
.tooltip.top {
|
||||
margin-top: -17px;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
display: none;
|
||||
}
|
||||
md-menu-item > .md-button md-icon {
|
||||
margin: auto 0 5px 10px;
|
||||
}
|
||||
.play-arrow, .pause, .replay {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
|
@ -62,7 +63,9 @@
|
|||
.player-control-icon {
|
||||
color: $playerDefaultIconColor !important;
|
||||
transition-duration: 0.1s;
|
||||
margin-right: 5px;
|
||||
margin-right: 10px;
|
||||
margin-top: 4px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.player-control-icon.active {
|
||||
|
|
@ -75,11 +78,11 @@
|
|||
|
||||
#play-notification {
|
||||
position: relative;
|
||||
color: white;
|
||||
color: white !important;
|
||||
background: black;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
background: black;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -88,6 +91,7 @@
|
|||
background-color: black;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#playlist {
|
||||
|
|
@ -97,18 +101,18 @@
|
|||
}
|
||||
|
||||
#player-area * .noUi-origin {
|
||||
background-color: black;
|
||||
background-color: $blackish;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#player-area * .noUi-base {
|
||||
background-color: black;
|
||||
background-color: $blackish;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#volume-bar {
|
||||
width: 5em;
|
||||
height: 0.4em;
|
||||
height: 0.5em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -117,9 +121,12 @@
|
|||
}
|
||||
|
||||
#seek-slider {
|
||||
height: 6px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 15px;
|
||||
transition-duration: 0.2s;
|
||||
height: 8px;
|
||||
.noUi-handle {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#seek-slider:hover {
|
||||
|
|
@ -144,17 +151,27 @@
|
|||
}
|
||||
|
||||
#play-list-controls {
|
||||
min-height: 30px;
|
||||
min-height: 40px;
|
||||
margin-top: 5px;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
position: relative;
|
||||
button .player-control-icon {
|
||||
margin: 0 5px 1px 3px;
|
||||
}
|
||||
.ember-basic-dropdown-trigger {
|
||||
float: right;
|
||||
color: $whitish;
|
||||
.paper-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#play-list-area, #play-area-mic {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
margin: 10px auto 0 auto;
|
||||
margin: 5px auto;
|
||||
border-radius: 5px;
|
||||
transition: 0.1s all ease-in-out;
|
||||
position: relative;
|
||||
|
|
@ -203,7 +220,7 @@
|
|||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 0 20px 0 5px;
|
||||
position: relative;
|
||||
color: black;
|
||||
color: $blackish;
|
||||
background: darken(white, 5%);
|
||||
.close {
|
||||
font-size: 18px;
|
||||
|
|
@ -260,14 +277,21 @@
|
|||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
#light-option {
|
||||
margin-top: 14%;
|
||||
}
|
||||
|
||||
.beat-option {
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
md-checkbox {
|
||||
padding: 10px 0;
|
||||
}
|
||||
md-switch {
|
||||
margin: 0;
|
||||
}
|
||||
.option-description {
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
button {
|
||||
margin-top: 0;
|
||||
|
|
@ -278,15 +302,19 @@
|
|||
}
|
||||
|
||||
#player-bottom {
|
||||
color: black;
|
||||
color: $blackish;
|
||||
border: 1px solid black;
|
||||
width: 100%;
|
||||
background: white;
|
||||
padding-bottom: 20px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px
|
||||
}
|
||||
|
||||
#beat-container {
|
||||
padding: 0;
|
||||
height: $playerBottomHeight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#beat-area .light-group {
|
||||
|
|
@ -319,7 +347,9 @@
|
|||
}
|
||||
|
||||
.sound-cloud-link {
|
||||
margin-right: 5px;
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
bottom: 22px;
|
||||
}
|
||||
|
||||
#visualization {
|
||||
|
|
@ -385,8 +415,24 @@
|
|||
bottom: initial;
|
||||
}
|
||||
|
||||
@media(min-width:767px) and (max-width:1000px) {
|
||||
#add-new-music-label {
|
||||
display: none;
|
||||
}
|
||||
#play-list-controls .paper-button {
|
||||
border: 1px solid $whitish;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// mobile overrides
|
||||
@media(max-width:767px) {
|
||||
#light-option {
|
||||
margin-top: 0;
|
||||
}
|
||||
#beat-area {
|
||||
height: initial;
|
||||
}
|
||||
#seek-slider {
|
||||
height: 8px;
|
||||
.noUi-handle {
|
||||
|
|
@ -406,4 +452,7 @@
|
|||
right: 5px;
|
||||
left: initial;
|
||||
}
|
||||
md-checkbox {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@ md-checkbox.md-default-theme.md-checked .md-icon {
|
|||
|
||||
md-checkbox .md-label {
|
||||
width: 125px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.md-button {
|
||||
|
|
@ -56,9 +54,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
}
|
||||
|
||||
@media(max-width:500px) {
|
||||
md-checkbox .md-label {
|
||||
width: 70px;
|
||||
}
|
||||
#save-beat-preferences-star {
|
||||
right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "huegasm",
|
||||
"dependencies": {
|
||||
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.0.0",
|
||||
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.1.0",
|
||||
"JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
|
||||
"bootstrap-sass": "^3.3.5",
|
||||
"ember": "beta",
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
|
|||
module.exports = function(defaults) {
|
||||
var app = new EmberApp(defaults);
|
||||
|
||||
app.import('bower_components/HackTimer/HackTimer.js');
|
||||
|
||||
app.import('vendor/dancer.js');
|
||||
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js');
|
||||
app.import('bower_components/HackTimer/HackTimer.js');
|
||||
app.import('bower_components/intro.js/intro.js');
|
||||
app.import('bower_components/intro.js/introjs.css');
|
||||
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
"ember-load-initializers": "^0.5.0",
|
||||
"ember-modal-dialog": "^0.9.0",
|
||||
"ember-notify": "^5.0.4",
|
||||
"ember-paper": "^1.0.0-alpha.5",
|
||||
"ember-paper": "^1.0.0-alpha.7",
|
||||
"ember-resolver": "^2.0.3",
|
||||
"ember-truth-helpers": "^1.2.0",
|
||||
"loader.js": "^4.0.7"
|
||||
|
|
|
|||
5069
web/yarn.lock
5069
web/yarn.lock
File diff suppressed because it is too large
Load diff
Reference in a new issue