From bbf3eb8da8804dceee0839118c331cfda3561fc3 Mon Sep 17 00:00:00 2001 From: IrosTheBeggar Date: Wed, 8 Feb 2017 14:28:27 -0500 Subject: [PATCH] Lots of frontend work --- public/css/master.css | 42 ++--------- public/css/mstream-player.css | 92 ++++++++++++++++------- public/css/remote.css | 40 +++++++++- public/css/shared.css | 5 ++ public/img/loading.gif | Bin 0 -> 18242 bytes public/img/repeat-white.svg | 3 + public/img/shuffle-white.svg | 3 + public/js/mstream.js | 79 ++++++++++++------- public/js/mstream.player.js | 67 ++++++++++------- public/js/mstream.vue-player-controls.js | 31 ++++---- public/mstream.html | 61 ++++++++------- public/remote.html | 80 +++++++++++++------- public/shared.html | 43 ++++++----- 13 files changed, 332 insertions(+), 214 deletions(-) create mode 100644 public/img/loading.gif create mode 100644 public/img/repeat-white.svg create mode 100644 public/img/shuffle-white.svg 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 0000000000000000000000000000000000000000..0cc1d8ae88b7351e59203d27f35f436317223001 GIT binary patch literal 18242 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 + + 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 @@ - -
-
-