fixing some more style issues, dont select the same light twice in random lights mode
This commit is contained in:
Egor Philippov
parent
6705d7239c
commit
c51d297c14
5 changed files with 149 additions and 131 deletions
|
|
@ -7,7 +7,7 @@ Music awesomeness for hue lights.
|
|||
- save beat detection settings per song
|
||||
- app intro with intro.js
|
||||
- music visualizations with three.js
|
||||
- integrate with youtube
|
||||
- integrate with soundcloud
|
||||
- display player time when hovering over seek bar
|
||||
|
||||
## BUGS
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
|
||||
actions: {
|
||||
toggleDimming: function(){
|
||||
this.toggleProperty('dimmerEnabled');
|
||||
this.changePlayerControl('dimmerEnabled', !this.get('dimmerEnabled'));
|
||||
},
|
||||
useLocalAudio: function(){
|
||||
var audioStream = this.get('audioStream');
|
||||
|
|
@ -47,6 +47,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}
|
||||
},
|
||||
slideTogglePlayerBottom(){
|
||||
this.$('#playerBottom').slideToggle();
|
||||
this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
|
||||
},
|
||||
saveSongSettings() {
|
||||
|
|
@ -98,6 +99,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
if (this.get('playing')) {
|
||||
dancer.pause();
|
||||
clearInterval(this.get('incrementElapseTimeHandle'));
|
||||
|
||||
if(!replayPause){
|
||||
this.set('timeElapsed', Math.floor(dancer.getTime()));
|
||||
}
|
||||
|
|
@ -121,8 +123,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
this.set('dimmerOn', true);
|
||||
}
|
||||
|
||||
this.setProperties('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000));
|
||||
this.set('incrementElapseTimeHandle', window.setInterval(this.incrementElapseTime.bind(this), 1000));
|
||||
}
|
||||
|
||||
this.toggleProperty('playing');
|
||||
}
|
||||
},
|
||||
|
|
@ -131,6 +134,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
if(this.get('playing')) {
|
||||
this.get('dancer').setVolume(value/100);
|
||||
}
|
||||
|
||||
if(this.get('volume') > 0 && this.get('volumeMuted')){
|
||||
this.changePlayerControl('volumeMuted', false);
|
||||
}
|
||||
},
|
||||
next() {
|
||||
var playQueuePointer = this.get('playQueuePointer'), playQueueLength = this.get('playQueue.length');
|
||||
|
|
@ -228,6 +235,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
onBeatBriAndColorChanged(value){
|
||||
this.set('onBeatBriAndColor', value);
|
||||
},
|
||||
dimmerEnabledChanged(value){
|
||||
this.set('dimmerEnabled', value);
|
||||
},
|
||||
audioModeChanged(value){
|
||||
if(value === 1) {
|
||||
this.startUsingMic();
|
||||
|
|
@ -394,15 +404,25 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
if(activeLights.length > 0){
|
||||
var lastLightBopIndex = this.get('lastLightBopIndex'),
|
||||
randomTransition = this.get('randomTransition'),
|
||||
lightBopIndex,
|
||||
light;
|
||||
|
||||
if(randomTransition) {
|
||||
light = Math.floor(Math.random() * activeLights.length) + 1;
|
||||
lightBopIndex = Math.floor(Math.random() * activeLights.length) + 1;
|
||||
|
||||
// let's try not to select the same light twice in a row
|
||||
if(activeLights.length > 1) {
|
||||
while(lightBopIndex === lastLightBopIndex) {
|
||||
lightBopIndex = Math.floor(Math.random() * activeLights.length) + 1;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
light = activeLights[lastLightBopIndex];
|
||||
this.set('lastLightBopIndex', (lastLightBopIndex+1) % activeLights.length);
|
||||
lightBopIndex = (lastLightBopIndex + 1) % activeLights.length;
|
||||
}
|
||||
|
||||
light = activeLights[lightBopIndex];
|
||||
this.set('lastLightBopIndex', lightBopIndex);
|
||||
|
||||
if(onBeatBriAndColor) {
|
||||
color = Math.floor(Math.random() * 65535);
|
||||
}
|
||||
|
|
@ -484,7 +504,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
this.set('usingMicSupported', false);
|
||||
}
|
||||
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode'].forEach(function (item) {
|
||||
['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled'].forEach(function (item) {
|
||||
if (localStorage.getItem('huegasm.' + item)) {
|
||||
var itemVal = localStorage.getItem('huegasm.' + item);
|
||||
if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold' || item === 'transitionTime' || item === 'audioMode') {
|
||||
|
|
@ -534,5 +554,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
if(!this.get('playerBottomDisplayed')) {
|
||||
Em.$('#playerBottom').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -270,6 +270,16 @@ export default Em.Mixin.create({
|
|||
|
||||
}.observes('dimmerEnabled'),
|
||||
|
||||
onDimmerOnChange: function() {
|
||||
var opacity = 0;
|
||||
|
||||
if(this.get('dimmerOn')) {
|
||||
opacity = 0.8;
|
||||
}
|
||||
|
||||
this.$('#dimmer').fadeTo(400, opacity);
|
||||
}.observes('dimmerOn'),
|
||||
|
||||
onSpeakerViewedChange: function(){
|
||||
localStorage.setItem('huegasm.speakerViewed', this.get('speakerViewed'));
|
||||
this.get('beatHistory').clear();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<div class="row antiDimmer">
|
||||
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
|
||||
<div id="playNotification"
|
||||
class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
|
||||
<div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
|
||||
<div id="playerControls">
|
||||
{{#if usingLocalAudio}}
|
||||
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
|
||||
|
|
@ -24,14 +23,11 @@
|
|||
{{/if}}
|
||||
|
||||
<span class="pull-right">
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
||||
data-title="Dim on play" {{action "toggleDimming"}}>{{paper-icon icon="brightness-high" class=dimmingClass}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Dim on play" {{action "toggleDimming"}}>{{paper-icon icon="brightness-high" class=dimmingClass}}
|
||||
</span>
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
||||
data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
|
||||
</span>
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
||||
data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -42,19 +38,13 @@
|
|||
|
||||
<div id="playListControls">
|
||||
{{#if usingLocalAudio}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music"
|
||||
class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
|
||||
id="shuffleTooltip"
|
||||
data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
|
||||
id="repeatTooltip"
|
||||
data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if usingMicSupported}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
|
||||
data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
@ -86,8 +76,8 @@
|
|||
{{else}}
|
||||
{{item.filename}}
|
||||
{{/if}}
|
||||
<div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist"
|
||||
class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div>
|
||||
<div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -102,98 +92,88 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{#if playerBottomDisplayed}}
|
||||
<div id="playerBottom" class="row antiDimmer {{if dimmerOn "dimmerFriendly"}}">
|
||||
<div id="beatArea" class="col-sm-7 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{threshold}}</div>
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto"
|
||||
data-title="Maximum intensity of the sound that may be registered as a beat"
|
||||
class="optionDescription bootstrapTooltip">Max. Intensity</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{decay}}</div>
|
||||
{{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto"
|
||||
data-title="The rate at which the previously registered beat's intensity is reduced to find the next beat"
|
||||
class="optionDescription bootstrapTooltip">Decay Rate</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}}
|
||||
,{{/unless}}{{/each}}
|
||||
]
|
||||
</div>
|
||||
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto"
|
||||
data-title="The frequency range of sound to listen on for the beat"
|
||||
class="optionDescription bootstrapTooltip">Frequency Range</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{transitionTime}} sec</div>
|
||||
{{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto"
|
||||
data-title="The time it takes for a light to change color or brightness"
|
||||
class="optionDescription bootstrapTooltip">Transition Time</span>
|
||||
</div>
|
||||
<div id="playerBottom" class="row antiDimmer {{if dimmerOn "dimmerFriendly"}}">
|
||||
<div id="beatArea" class="col-sm-7 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{threshold}}</div>
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Maximum intensity of the sound that may be registered as a beat" class="optionDescription bootstrapTooltip">Max. Intensity</span>
|
||||
</div>
|
||||
|
||||
<div id="beatOptionButtonGroup" class="row">
|
||||
<div class="beatOption col-xs-6">
|
||||
{{#paper-switch checked=randomTransition disabled=trial}}<span data-toggle="tooltip"
|
||||
data-placement="bottom auto"
|
||||
data-title="The transition order of lights on beat"
|
||||
class="optionDescription bootstrapTooltip">{{randomTransitionLabel}}</span>{{/paper-switch}}
|
||||
</div>
|
||||
<div class="beatOption col-xs-6">
|
||||
{{#paper-switch checked=onBeatBriAndColor disabled=trial}}<span data-toggle="tooltip"
|
||||
data-placement="bottom auto"
|
||||
data-title="The properties of the lights to change on beat"
|
||||
class="optionDescription bootstrapTooltip"> {{onBeatBriAndColorLabel}}</span>{{/paper-switch}}
|
||||
</div>
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{decay}}</div>
|
||||
{{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The rate at which the previously registered beat's intensity is reduced to find the next beat" class="optionDescription bootstrapTooltip">Decay Rate</span>
|
||||
</div>
|
||||
|
||||
<div id="playerButtonGroup" class="row">
|
||||
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
|
||||
{{#if usingLocalAudio}}
|
||||
{{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}}
|
||||
{{/if}}
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}}
|
||||
,{{/unless}}{{/each}}
|
||||
]
|
||||
</div>
|
||||
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The frequency range of sound to listen on for the beat" class="optionDescription bootstrapTooltip">Frequency Range</span>
|
||||
</div>
|
||||
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{transitionTime}} sec</div>
|
||||
{{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="The time it takes for a light to change color or brightness" class="optionDescription bootstrapTooltip">Transition Time</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="beatContainer" class="col-sm-5 col-xs-12">
|
||||
{{#if speakerViewed}}
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
<div class="rivet3"></div>
|
||||
<div class="rivet4"></div>
|
||||
<div class="rivet5"></div>
|
||||
<div class="rivet6"></div>
|
||||
<div class="rivet7"></div>
|
||||
<div class="rivet8"></div>
|
||||
<div id="beatOptionButtonGroup" class="row">
|
||||
<div class="beatOption col-xs-6">
|
||||
{{#paper-switch checked=randomTransition disabled=trial}}<span data-toggle="tooltip"
|
||||
data-placement="bottom auto"
|
||||
data-title="The transition order of lights on beat"
|
||||
class="optionDescription bootstrapTooltip">{{randomTransitionLabel}}</span>{{/paper-switch}}
|
||||
</div>
|
||||
<div class="beatOption col-xs-6">
|
||||
{{#paper-switch checked=onBeatBriAndColor disabled=trial}}<span data-toggle="tooltip"
|
||||
data-placement="bottom auto"
|
||||
data-title="The properties of the lights to change on beat"
|
||||
class="optionDescription bootstrapTooltip"> {{onBeatBriAndColorLabel}}</span>{{/paper-switch}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="beatSpeakerCenterOuter">
|
||||
<div id="beatSpeakerCenterInner" class="cursorPointer" {{action "clickSpeaker"}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div id="beatHistory">
|
||||
{{#each beatHistory as |item|}}
|
||||
<p>{{{item}}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div id="playerButtonGroup" class="row">
|
||||
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
|
||||
{{#if usingLocalAudio}}
|
||||
{{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}}
|
||||
{{/if}}
|
||||
|
||||
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="beatContainer" class="col-sm-5 col-xs-12">
|
||||
{{#if speakerViewed}}
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
<div class="rivet3"></div>
|
||||
<div class="rivet4"></div>
|
||||
<div class="rivet5"></div>
|
||||
<div class="rivet6"></div>
|
||||
<div class="rivet7"></div>
|
||||
<div class="rivet8"></div>
|
||||
|
||||
<div id="beatSpeakerCenterOuter">
|
||||
<div id="beatSpeakerCenterInner" class="cursorPointer" {{action "clickSpeaker"}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div id="beatHistory">
|
||||
{{#each beatHistory as |item|}}
|
||||
<p>{{{item}}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ember-notify closeAfter=5000}}
|
||||
<div id="dimmer" class="{{if dimmerOn "show"}}"></div>
|
||||
<div id="dimmer" {{action "toggleDimming"}}></div>
|
||||
|
|
@ -28,6 +28,7 @@ body {
|
|||
#settings {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.settingsItem {
|
||||
|
|
@ -462,7 +463,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
}
|
||||
|
||||
.playerControllIcon.active {
|
||||
color: white !important;
|
||||
color: #F12B24 !important;
|
||||
}
|
||||
|
||||
.playerControllIcon:hover {
|
||||
|
|
@ -472,9 +473,11 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
#playNotification {
|
||||
position: relative;
|
||||
color: white;
|
||||
top: 45%;
|
||||
left: 45%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 0;
|
||||
background: black;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
|
|
@ -490,7 +493,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
|
||||
to {
|
||||
opacity: 0;
|
||||
font-size: 50px;
|
||||
transform: scale(3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -674,7 +677,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
#beatArea {
|
||||
height: $playerBottomHeight;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
#beatArea * .noUi-target {
|
||||
|
|
@ -711,9 +714,11 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
border: 1px solid black;
|
||||
width: 100%;
|
||||
background: white;
|
||||
height: $playerBottomHeight;
|
||||
}
|
||||
|
||||
#beatContainer {
|
||||
-webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering
|
||||
padding: 0;
|
||||
height: $playerBottomHeight;
|
||||
md-switch {
|
||||
|
|
@ -721,7 +726,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
position: absolute;
|
||||
margin-left: 0;
|
||||
z-index: 3;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -758,8 +763,8 @@ $center1size: 250px;
|
|||
$bezelsize: 285px;
|
||||
$vibratesize: $centersize*1.06;
|
||||
$vibratemargin:-$vibratesize/2;
|
||||
$vibrateblur: 2px;
|
||||
$vibrateblur1:1px;
|
||||
$vibrateblurinner: 3px;
|
||||
$vibrateblurouter: 2px;
|
||||
|
||||
/* Extenders */
|
||||
%base {
|
||||
|
|
@ -777,16 +782,16 @@ $vibrateblur1:1px;
|
|||
/* Keyframes */
|
||||
@keyframes vibrateInner {
|
||||
50% {
|
||||
-webkit-filter: blur($vibrateblur);
|
||||
filter: blur($vibrateblur);
|
||||
transform: scale(1.1);
|
||||
-webkit-filter: blur($vibrateblurinner);
|
||||
filter: blur($vibrateblurinner);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vibrateOuter {
|
||||
0% {
|
||||
-webkit-filter: blur($vibrateblur1);
|
||||
filter: blur($vibrateblur1);
|
||||
-webkit-filter: blur($vibrateblurouter);
|
||||
filter: blur($vibrateblurouter);
|
||||
border: 15px solid #333;
|
||||
}
|
||||
30% {
|
||||
|
|
@ -795,8 +800,8 @@ $vibrateblur1:1px;
|
|||
border: 17px solid #333;
|
||||
}
|
||||
50% {
|
||||
-webkit-filter: blur($vibrateblur1);
|
||||
filter: blur($vibrateblur1);
|
||||
-webkit-filter: blur($vibrateblurouter);
|
||||
filter: blur($vibrateblurouter);
|
||||
border: 15px solid #333;
|
||||
}
|
||||
65% {
|
||||
|
|
@ -805,18 +810,18 @@ $vibrateblur1:1px;
|
|||
border: 17px solid #333;
|
||||
}
|
||||
70% {
|
||||
-webkit-filter: blur($vibrateblur1);
|
||||
filter: blur($vibrateblur1);
|
||||
-webkit-filter: blur($vibrateblurouter);
|
||||
filter: blur($vibrateblurouter);
|
||||
border: 15px solid #333;
|
||||
}
|
||||
80% {
|
||||
-webkit-filter: blur($vibrateblur1);
|
||||
filter: blur($vibrateblur1);
|
||||
-webkit-filter: blur($vibrateblurouter);
|
||||
filter: blur($vibrateblurouter);
|
||||
border: 17px solid #333;
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: blur($vibrateblur1);
|
||||
filter: blur($vibrateblur1);
|
||||
-webkit-filter: blur($vibrateblurouter);
|
||||
filter: blur($vibrateblurouter);
|
||||
border: 15px solid #333;
|
||||
}
|
||||
}
|
||||
|
|
@ -925,7 +930,6 @@ $vibrateblur1:1px;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
opacity: 0.7;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
|
|
|
|||
Reference in a new issue