diff --git a/public/css/master.css b/public/css/master.css index 2cb86dc..e8f97bf 100755 --- a/public/css/master.css +++ b/public/css/master.css @@ -250,16 +250,7 @@ ul.jp-controls li { .noPaddingLeft { padding-left: 0 !important; } -.jplay { - position: fixed; - bottom: 0; - width: 100%; } -.jp-audio { - width: 100% !important; - position: fixed; - bottom: 0; - left: 0; } h3 { padding: 10px 10px 0; @@ -300,18 +291,7 @@ h3 { margin: 0; max-width: none; } -.scraper { - padding: 5px; - background: #F5F5F5; - border: solid 1px #EEE; - overflow: hidden; - border-radius: 3px; } - .scraper label { - color: #6666ff; - float: right; - margin: 0; } - .scraper input { - margin: 0 5px 0 0; } + .closeit { float: right; @@ -337,21 +317,8 @@ h3 { margin-left: -20px; margin-top: 8px; } } -.jp-current-time { - position: relative; - left: 110px; - top: 10px; } -.jp-duration { - position: relative; - right: 110px; - top: 10px; } -.play1 { - display: block; - padding: 10px; - width: calc(100% - 29px); - float: left; } @media (min-width: 644px) { .content { @@ -449,3 +416,10 @@ h3 { display: block; margin: auto; } + + + +.mstream-player{ + position:fixed; + bottom:0; +} diff --git a/public/css/mstream-player.css b/public/css/mstream-player.css index 4d76164..90ec2cb 100644 --- a/public/css/mstream-player.css +++ b/public/css/mstream-player.css @@ -3,8 +3,6 @@ .mstream-player{ - position:absolute; - bottom:0; width:100%; height: 50px; overflow: hidden; @@ -18,10 +16,11 @@ background-color: #333333; float:left; overflow:hidden; - box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8); + /*box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8);*/ cursor:pointer; } .play-pause-button{ + position: relative; height: 100%; width:50px; background-color: rgb(102, 132, 178); @@ -29,20 +28,7 @@ overflow:hidden; cursor:pointer; } -.next-border{ - height: 100%; - padding: 8px; -} -.previous-border{ - height: 100%; - padding: 8px; -} -.play-pause-border{ - border-left: 5px solid rgb(102, 132, 178); - border-top: 5px solid rgb(102, 132, 178); - height: 100%; - padding: 3px; -} + .next-button{ height: 100%; width:50px; @@ -50,18 +36,37 @@ float:left; position: relative; overflow:hidden; - box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8); + box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8)/*, -5px 0 8px -2px rgba(31, 73, 125, 0.8)*/; cursor:pointer; + z-index:9; +} +.center{ + top:50%; + left:50%; + position: absolute; + transform: translate(-50%, -50%); } .progress-bar{ height: 100%; - width: calc(100% - 152px); + width: calc(100% - 230px); background-color: rgba(51,51,51,.15); float:left; overflow-x: hidden; border-right: 2px solid rgba(51,51,51,.15); cursor: crosshair; } +.right-group{ + height: 100%; + + + position:relative; + width:78px; + background-color: #333333; + float:left; + overflow:hidden; + box-shadow: 5px 0 8px -2px rgba(31, 73, 125, 0.8), -5px 0 8px -2px rgba(31, 73, 125, 0.8); + cursor:pointer; +} .removeSong{ @@ -96,13 +101,10 @@ .titlebar{ height: 50%; - width:calc(100% - 190px); - background-color: rgba(255, 255, 255,0.7); + width:calc(100% - 225px); + background-color: rgba(255, 255, 255,0.75); position: absolute; - margin-top: 10px; - border-radius: 5px; box-shadow: 3px 3px 3px #888888; - margin-left: 20px; overflow-y: hidden; white-space: nowrap; /* This is the secret to make text scroll left-to-right*/ @@ -118,15 +120,15 @@ .title-text{ - width: calc(100% - 100px); + width: 100%; float:left; + font-family: '8BITWONDERNominal'; font-weight: normal; font-style: normal; margin-top: 3px; - margin-left: 2px; padding-bottom: 17px; /* This pushes the scr */ overflow-x: scroll; @@ -135,7 +137,8 @@ .duration-text{ float: right; - width: 90px; + width: 75px; + color: white; font-family: '8BITWONDERNominal'; font-weight: normal; font-style: normal; @@ -143,3 +146,38 @@ text-align: right; margin-right: 5px; } + +.aux-button-group{ + position:absolute; + bottom:0; + margin-left:10px; +} + +.shuffle-button{ + margin-left: 3px; +} + + +svg { + display:inline-block; + vertical-align: middle; + height:auto; + max-width: 100%; + +} + +.repeat-button{ + transition: .15s; +} + +.repeat-button{ fill: rgb(255, 255, 255);} +.repeat-button:hover { fill: rgb(102, 132, 178); } + +.shuffle-button{ + fill:black; +} + + +.aux-button-active{ + fill:rgb(102, 132, 178); +} diff --git a/public/css/remote.css b/public/css/remote.css index 2c8452b..da8a477 100644 --- a/public/css/remote.css +++ b/public/css/remote.css @@ -50,7 +50,7 @@ body{ font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; } -#browser{ +.browser{ list-style: none; padding: 0; overflow-y: scroll; @@ -58,7 +58,7 @@ body{ } .browser-tools{ - height:0px; + height:40px; } .browser-item{ @@ -79,3 +79,39 @@ body{ .browser-item:hover{ background-color: #F5F5F5; } + +.login-icon{ + max-height: 150px; + padding-top: 60px; +} + +.login-form{ + padding-top: 20px; +} + +button{ + background-color: #2ba6cb; + border-color: #2795b6; + padding-left: 2rem; + padding-right: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; + color:white; + border: none; +} +#login-submit{ + color: white; + margin-top: 1rem; + +} +input{ + width: 100%; + padding-top: 5px; + padding-left: 5px; + padding-bottom: 5px; +} + +label{ + padding-bottom: 5px; + display: block; +} diff --git a/public/css/shared.css b/public/css/shared.css index 9602d1c..95d6b70 100644 --- a/public/css/shared.css +++ b/public/css/shared.css @@ -74,3 +74,8 @@ body{ .playlist-item:hover{ background-color: #F5F5F5; } + +.mstream-player{ + position:absolute; + bottom:0; +} diff --git a/public/img/loading.gif b/public/img/loading.gif new file mode 100644 index 0000000..0cc1d8a Binary files /dev/null and b/public/img/loading.gif differ diff --git a/public/img/repeat-white.svg b/public/img/repeat-white.svg new file mode 100644 index 0000000..af0fd3a --- /dev/null +++ b/public/img/repeat-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/shuffle-white.svg b/public/img/shuffle-white.svg new file mode 100644 index 0000000..02c8514 --- /dev/null +++ b/public/img/shuffle-white.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/js/mstream.js b/public/js/mstream.js index ed6b679..ace3d02 100755 --- a/public/js/mstream.js +++ b/public/js/mstream.js @@ -12,17 +12,16 @@ $(document).ready(function(){ }; - // The jukebox panel - $('#jukebox_mode').on('click', function(){ - // Hide the directory bar - $('.directoryTitle').hide(); - // Change the panel name - $('.panel_one_name').html('Jukebox Mode'); - // clear the list - $('#filelist').empty(); - $('#filelist').removeClass('scrollBoxHeight1'); - $('#filelist').removeClass('scrollBoxHeight2'); - $('#filelist').addClass('scrollBoxHeight2'); + function setupJukeboxPanel(){ + // Hide the directory bar + $('.directoryTitle').hide(); + // Change the panel name + $('.panel_one_name').html('Jukebox Mode'); + // clear the list + $('#filelist').empty(); + $('#filelist').removeClass('scrollBoxHeight1'); + $('#filelist').removeClass('scrollBoxHeight2'); + $('#filelist').addClass('scrollBoxHeight2'); // TODO: Check if connection has been established // setup correct html @@ -33,30 +32,31 @@ $(document).ready(function(){ }else{ newHtml = '\

\ - Jukebox Mode will allow you to control this page of mStream remotely

\ - Click the button to enable Jukebox Mode
\ +

\ +

Jukebox Mode allows you to control this page remotely



\
CONNECT IT!
\ -

'; +

\ + '; } // Add the content $('#filelist').html(newHtml); + } + + // The jukebox panel + $('#jukebox_mode').on('click', function(){ + setupJukeboxPanel(); }); - // Build the database + // Setup Jukebox $('body').on('click', '.jukebox_connect', function(){ $(this).prop("disabled", true); + $(this).hide(); + $('.jukebox-loading').toggleClass('hide'); + createWebsocket(); - - // Wait a while and display the status - setTimeout(function(){ - // TODO: Check that status has changed - - createJukeboxPanel(); - },800); - }); @@ -70,16 +70,17 @@ $(document).ready(function(){ } if(jukebox.adminCode){ - returnHtml += '
Code: ' + jukebox.adminCode + '
'; + returnHtml += '

Code: ' + jukebox.adminCode + '

'; } if(jukebox.guestCode){ - returnHtml += '
Guest Code: ' + jukebox.guestCode + '
\ -
Hide Admin Code / Lock
'; - }else{ - returnHtml += '
Create Guest Account
'; + returnHtml += '

Guest Code: ' + jukebox.guestCode + '

'; } + var l = window.location; + var adrs = l.protocol + '//' + l.host + '/remote'; + returnHtml += '

Remote Jukebox Controls: ' + adrs + '

'; + returnHtml += '

'; return returnHtml; } @@ -105,12 +106,22 @@ $(document).ready(function(){ // TODO: Get proper url // open connection - jukebox.connection = new WebSocket('ws://localhost:3031/jukebox/open-connection?token=' + accessKey); + var l = window.location; + var wsLink = ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + l.pathname; + console.log(wsLink); + jukebox.connection = new WebSocket(wsLink + 'jukebox/open-connection?token=' + accessKey); jukebox.connection.onopen = function () { console.log('CONNECTION OPENNED'); + // Wait a while and display the status + // TODO: There's gotta be a better way to do this using vue + setTimeout(function(){ + // TODO: Check that status has changed + + setupJukeboxPanel(); + },1800); }; jukebox.connection.onerror = function (error) { @@ -146,6 +157,16 @@ $(document).ready(function(){ if( json.command && json.command && json.command === 'next'){ console.log('NEXTTTTTTTTTTTTTTTTTTTTTT') MSTREAM.nextSong(); + return; + } + if( json.command && json.command && json.command === 'playPause'){ + console.log('PLAY PAUSE') + MSTREAM.playPause(); + } + if( json.command && json.command && json.command === 'previous'){ + console.log('PREVIOUSSSSSSSSSS') + MSTREAM.previousSong(); + return; } }; } diff --git a/public/js/mstream.player.js b/public/js/mstream.player.js index 3a848e6..3e3df0e 100644 --- a/public/js/mstream.player.js +++ b/public/js/mstream.player.js @@ -10,26 +10,6 @@ var MSTREAM = (function () { mstreamModule.playlist = []; - // Loop - var shouldLoop = false; - mstreamModule.setLoop = function(newValue){ - if(typeof(newValue) != "boolean"){ - return false; - } - shouldLoop = newValue; - return true; - } - - // Random Song - var randomSong = false; - randomSongCache = []; // Cache the last 5 songs played to avoid repeats - mstreamModule.setRandom = function(newValue){ - if(typeof(newValue) != "boolean"){ - return false; - } - randomSong = newValue; - return true; - } // var song = { // "filepath":"path/to/song", @@ -177,8 +157,10 @@ var MSTREAM = (function () { // Check if the next song exists if(!mstreamModule.playlist[mstreamModule.positionCache.val + 1]){ + console.log(mstreamModule.playerStats.shouldLoop); + // If loop is set and no other song, go back to first song - if(shouldLoop === true && mstreamModule.playlist.length > 0){ + if(mstreamModule.playerStats.shouldLoop === true && mstreamModule.playlist.length > 0){ mstreamModule.positionCache.val = 0; return goToSong(mstreamModule.positionCache.val); @@ -248,17 +230,13 @@ var MSTREAM = (function () { // Song is cached if(otherPlayerObject.songObject === mstreamModule.playlist[position]){ - console.log('USING CACHED SONG'); + // console.log('USING CACHED SONG'); flipFlop(); // Play mstreamModule.playPause(); }else{ - console.log('DID NOT USE CACHE'); - - console.log(otherPlayerObject.songObject); - console.log(mstreamModule.playlist[position]); - + // console.log('DID NOT USE CACHE'); setMedia(mstreamModule.playlist[position], localPlayerObject, true); } @@ -405,7 +383,9 @@ var MSTREAM = (function () { mstreamModule.playerStats = { duration:0, currentTime:0, - playing: false + playing: false, + repeat: false, + shuffle:false } var playerA = { @@ -578,6 +558,37 @@ mstreamModule.seekByPercentage = function(percentage){ } + // Loop + mstreamModule.playerStats.shouldLoop = false; + mstreamModule.setRepeat = function(newValue){ + if(typeof(newValue) != "boolean"){ + return false; + } + mstreamModule.playerStats.shouldLoop = newValue; + return newValue; + } + mstreamModule.toggleRepeat = function(){ + mstreamModule.playerStats.shouldLoop = !mstreamModule.playerStats.shouldLoop; + return mstreamModule.playerStats.shouldLoop; + } + + // Random Song + // TODO: Shuffle currently doesn't do anything + mstreamModule.playerStats.shuffle = false; + shuffleCache = []; // Cache the last 5 songs played to avoid repeats + mstreamModule.setShuffle = function(newValue){ + if(typeof(newValue) != "boolean"){ + return false; + } + mstreamModule.playerStats.shuffle = newValue; + return true; + } + mstreamModule.toggleShuffle = function(newValue){ + mstreamModule.playerStats.shuffle = !mstreamModule.playerStats.shuffle; + return mstreamModule.playerStats.shuffle; + } + + // Return an object that is assigned to Module return mstreamModule; }()); diff --git a/public/js/mstream.vue-player-controls.js b/public/js/mstream.vue-player-controls.js index 9a06551..8c6f526 100644 --- a/public/js/mstream.vue-player-controls.js +++ b/public/js/mstream.vue-player-controls.js @@ -44,22 +44,9 @@ var VUEPLAYER = function() { } }); - // Code to handle Play/Pause images - var playPauseButton = new Vue({ - el: '#play-pause-image', - data: { - status: MSTREAM.playerStats, - }, - computed: { - imgsrc: function () { - return "/public/img/"+(this.status.playing ? 'pause' : 'play')+"-white.svg"; - } - } - }); - var progressBar = new Vue({ - el: '#progress-bar', + el: '#mstream-player', data: { playerStats: MSTREAM.playerStats, playlist: MSTREAM.playlist, @@ -67,14 +54,15 @@ var VUEPLAYER = function() { }, computed: { + imgsrc: function () { + return "/public/img/"+(this.playerStats.playing ? 'pause' : 'play')+"-white.svg"; + }, widthcss: function ( ) { if(this.playerStats.duration === 0){ return "width:0"; - } + ; - var totalWidth = this.$el.getBoundingClientRect().width; var percentage = 100 - (( this.playerStats.currentTime / this.playerStats.duration) * 100); - return "width:calc(100% - "+percentage+"%)"; }, @@ -111,11 +99,19 @@ var VUEPLAYER = function() { }, methods: { goToPosition: function(event){ + console.log(event.target); + console.log(this.$el); var relativeClickPosition = event.clientX - this.$el.getBoundingClientRect().left; var totalWidth = this.$el.getBoundingClientRect().width; var percentage = (relativeClickPosition / totalWidth) * 100; // Set Player time MSTREAM.seekByPercentage(percentage); + }, + toggleRepeat: function(){ + MSTREAM.toggleRepeat(); + }, + toggleShuffle: function(){ + MSTREAM.toggleShuffle(); } } }); @@ -132,7 +128,6 @@ var VUEPLAYER = function() { MSTREAM.previousSong(); }); - // This makes the title text scroll back and forth var scrollTimer; var scrollRight = true; //Track Scroll Direction diff --git a/public/mstream.html b/public/mstream.html index 925b0c7..a55a64a 100755 --- a/public/mstream.html +++ b/public/mstream.html @@ -256,40 +256,45 @@ - -
-
-