From: Roman Bazalevskiy Date: Wed, 27 Dec 2017 19:51:27 +0000 (+0300) Subject: "Резиновая" верстка и изменение стиля. X-Git-Url: https://git.rvb.name/mpd-lua.git/commitdiff_plain/55262d4cf0ac84eb33fafca62bdcae22a4d478b3?ds=sidebyside "Резиновая" верстка и изменение стиля. --- diff --git a/ajax/mpd.js b/ajax/mpd.js index 9cd2667..ccee6fb 100644 --- a/ajax/mpd.js +++ b/ajax/mpd.js @@ -1,4 +1,5 @@ urlbase="mpd.lua?" +minScrollHeight=200 function GetFilename(url) { @@ -11,6 +12,21 @@ function EscapeStr(str) { return res; } +function SetSize() { + var w = window, + d = document, + e = d.documentElement, + g = d.getElementsByTagName('body')[0], + body_h = g.clientHeight, + window_h = w.innerHeight|| e.clientHeight|| g.clientHeight, + items = d.getElementById('items'), + current_h = items.clientHeight, + new_h=(window_h-body_h)+current_h; + if (new_h>minScrollHeight) { + items.style.height=new_h+"px"; + } +} + function RefreshPageStatus() { var req = new XMLHttpRequest(); @@ -18,9 +34,10 @@ function RefreshPageStatus() { req.onreadystatechange = function () { if (this.readyState != 4 || this.status != 200) return; var returnedData = JSON.parse(this.responseText); - nowPlaying = GetFilename(returnedData['current_playing']) - document.title='MPD Player: '+nowPlaying; - nowPlaying = (1+Number(returnedData['song'])) + '/' + returnedData['playlistlength'] + ' '+nowPlaying; + trackName = GetFilename(returnedData['current_playing']); + trackNo = returnedData['song']; + document.title='MPD Player: '+trackName; + nowPlaying = (1+Number(trackNo)) + '/' + returnedData['playlistlength'] + ' '+trackName; if (returnedData['state']=='stop') { nowPlaying = '' + nowPlaying+ '' } @@ -36,12 +53,24 @@ function RefreshPageStatus() { document.getElementById('repeatstate').innerHTML=""; } document.getElementById('volume_total').innerHTML="
"; + + var items = document.getElementById('items'); + var table = items.getElementsByClassName('track'); + var current_track="track_"+trackNo; + for (var i = 0; i < table.length; i++) { + console.log(table[i].id); + if (table[i].id==current_track) { + table[i].classList.add("itemActive"); + } else { + table[i].classList.remove("itemActive") + } + } + }; req.open("GET", urlbase+"status", true); req.send(); - } function RefreshPlaylist() { @@ -52,20 +81,18 @@ req.onreadystatechange = function () { if (this.readyState != 4 || this.status != 200) return; var returnedData = JSON.parse(this.responseText); - var text = "
\ - \ + var playlistMenuText = "
\ \ \ -
\ \ \ \
\ -
\ -
\ - \ +
"; + + var itemsText="\ \ - \ + \ "; var even = 0; @@ -82,39 +109,30 @@ req.onreadystatechange = function () { even = ! even; - text = text + "\ - \ + itemsText = itemsText + "\ + \ \ - \ - \ - \ - \ "; } - text = text + "
TitleControlsTitleControls
\ -
\ + "+(Number(id)+1)+"\ + \ "+name+"\ \ + \ \ \ + \ \ \ + \ \
\ -
\ -
\ - \ - \ - \ -
\ - \ - \ - \ -
\ -
"; + itemsText = itemsText + ""; - document.getElementById('playlist').innerHTML=text; + document.getElementById('items').innerHTML=itemsText; + document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; + document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; }; req.open("GET", urlbase+"playlist", true); @@ -130,20 +148,19 @@ req.onreadystatechange = function () { if (this.readyState != 4 || this.status != 200) return; var returnedData = JSON.parse(this.responseText); - var text = "
\ - \ + var playlistMenuText = "
\ \ \ -
\ \
\ -
\ -
\ - \ +
"; + + var itemsText= "\ \ - \ + \ "; + var even = 0; if (dir) { var lastSlash=dir.lastIndexOf("/"); if (lastSlash>0) { @@ -151,13 +168,13 @@ req.onreadystatechange = function () { } else { var upperLevel=""; } - var text = text + "\ - \ - \ + even = ! even; + var itemsText = itemsText + "\ + \ + \ "; } - var even = 0; var i = 0; for (var key in returnedData) { var rec=returnedData[key]; @@ -180,39 +197,33 @@ req.onreadystatechange = function () { i = i + 1; even = ! even; - text = text + "\ - \ + \ "; if (type == "directory") { - text = text + ""; }; if (type == "file") { - text = text + ""; }; - text = text + ""; + itemsText = itemsText + ""; } } - var text = text+"
TitleControlsTitleControls
..
\ + itemsText = itemsText + "
\ \ + itemsText = itemsText + "\ "+tailName+"\ \ + itemsText = itemsText + "\ "+tailName+"\
\ -
\ - \ - \ - \ -
\ - \ -
\ -
"; - document.getElementById('playlist').innerHTML=text; + var itemsText = itemsText+""; + document.getElementById('items').innerHTML=itemsText; + document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; + document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; }; if (!dir) { dir = ''; }; @@ -229,18 +240,15 @@ var req = new XMLHttpRequest(); req.onreadystatechange = function () { if (this.readyState != 4 || this.status != 200) return; var returnedData = JSON.parse(this.responseText); - text="
\ - \ + playlistMenuText="
\ \ \ -
\ \
\ -
\ -
\ - \ +
"; + itemsText="\ \ - \ + \ "; var even = 0; @@ -255,23 +263,17 @@ req.onreadystatechange = function () { even = ! even; - text = text + "\ - \ - \ - \ + itemsText = itemsText + "\ + \ + \ + \ "; } - text=text+"
NameControlsNameControls
"+name+"
"+name+"
\ - \ - \ - \ -
\ - \ -
\ -
"; - - document.getElementById('playlist').innerHTML=text; + itemsText=itemsText+""; + document.getElementById('items').innerHTML=itemsText; + document.getElementById('playlist_menu_top').innerHTML=playlistMenuText; + document.getElementById('playlist_menu_bottom').innerHTML=playlistMenuText; }; req.open("GET", urlbase+"lists|load", true); @@ -303,8 +305,8 @@ var req = new XMLHttpRequest(); req.onreadystatechange = function () { if (this.readyState != 4 || this.status != 200) return; - RefreshPageStatus(); LoadPlayList(); + RefreshPageStatus(); }; req.open("GET", urlbase+"lists|delete|"+item, true); @@ -313,10 +315,8 @@ req.send(); } function RefreshPageContent() { - - RefreshPageStatus(); RefreshPlaylist(); - + RefreshPageStatus(); } function Command(cmd) { @@ -389,4 +389,20 @@ req.send(); } -setInterval(RefreshPageStatus, 10000); +function subscribe_status() { + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4) return; + if (this.status == 200) { + RefreshPageStatus() + setTimeout(subscribe_status,1000) + } else { + setTimeout(subscribe_status,15000) + } + } + xhr.open("GET", urlbase+"idle", true); + xhr.send(); +} + +setTimeout(subscribe_status,5000) diff --git a/css/general.css b/css/general.css index 6bb13cc..62e4e56 100644 --- a/css/general.css +++ b/css/general.css @@ -1,24 +1,13 @@ -/* -#525356 -*/ - - - -* { - margin:0; -} - body { + margin: 0px; text-align: center; font-family: arial,sans-serif; - margin-top: 15px; - margin-bottom: 15px; - color: #AEAEAE; + color: Snow; } a { text-decoration: none; - color: #AEAEAE; + color: White; } table @@ -48,154 +37,133 @@ button cursor: pointer; } -.trackno -{ - text-align: right; - vertical-align: top; - padding: 0px 0px 5px 0px; -} - -#heading_tbl { - width: 400px -} - #frame { text-align: left; - border: 1px solid #000; - width: 400px; - background: url(../images/bg.png) no-repeat #251616; - margin: 0 auto; + border: 1px solid Black; + background: DarkSlateGray; + margin: 0; } - #nowplaying_heading { font-size: 1.3em; - font-wieght: bold; - height: 30px; - background: url(../images/control_bg.png) repeat-x; - border-bottom: 1px solid #525356; + font-weight: bold; + padding: 5px; + background: linear-gradient(DarkSlateGray,Black); + border-bottom: 1px solid Black; + border-top: 1px solid Black; +} + +#heading_tbl { + width: 100%; } #nowplaying_content { - margin: 10px 5px 10px 5px; + margin: 10px 10% 10px 10%; text-align: center; - border: 1px solid #525356; - width: 380px; - height: 60px; + border: 1px solid LightGray; + height: 3em; padding: 10px 0px 5px 0px; - background: url(../images/playing_bg.png); + background: SaddleBrown; font-weight: bold; - color: #fff; + color: White; } #control_buttons { text-align: center; - width: 390px; margin: 10px 5px 10px 5px; } #control_buttons table { margin-left: auto; - margin-right: auto; + margin-right: auto; } #control_volume { text-align: center; - width: 390px; margin: 10px 5px 10px 5px; } #control_volume table { margin-left: auto; - margin-right: auto; + margin-right: auto; } -#playlist_menu { - font-wieght: bold; - height: 24px; - background: url(../images/control_bg.png) repeat-x; - border-top: 2px solid #525356; - margin-top: 5px; - margin-bottom: 5px; +.playlist_menu { + font-weight: bold; + height: 24px; + padding: 5px; + background: linear-gradient(DarkSlateGray,Black); + border-bottom: 1px solid Black; + border-top: 1px solid Black; } +.home { + text-align: left; + font-size: 1.0em; + font-weight: bold; + background: linear-gradient(DarkSlateGray,Black); + border-bottom: 2px solid Black; + border-top: 2px solid DarkSlateGray; +} + + #items_heading { text-align: center; + width: 100%; font-size: 1.0em; font-weight:bold; - border-bottom: 1px solid #525356; - border-top: 1px solid #525356; - background-color: #333; -} - -#home { - text-align: left; - font-size: 1.0em; - font-weight: bold; - border-bottom: 3px solid #525356; - background-color: #251616; + border-bottom: 1px solid DimGray; + border-top: 1px solid DimGray; + background: DarkSlateGray; } #items { font-size: 0.9em; text-align: center; - min-height: 400px; - max-height: 600px; - background: url(../images/playing_bg.png); overflow-y: scroll; } #items table { - width: 380px; - margin: 0px 5px 0px 5px; - border: 1px solid #525356; + border: 1px solid DimGray; } -#file { +.file { text-align: left; width: 100%; - } -#itemEven{ - background-color: #251616; - -} - -#itemOdd{ - background-color: #333; +.itemEven{ + background-color: DarkSlateGray; } -#itemActive { - background: url(../images/playing_bg.png); - color: #fff; +.itemOdd{ + background-color: DimGray; } -#itemActive a { - color: #fff; +.itemActive { + background: LightGray; + color: DarkSlateGray; } - -#move img { - margin: 1px 1px 1px 1px; +.itemActive a { + color: DarkSlateGray; } -#remove img { - margin: 1px 1px 1px 1px; +.track_number { + text-align: right; } - #volume_total { - width: 100px; - border: 1px solid #525356; - height: 5px; + margin: 10px; + width: 200px; + border: 1px solid LightGray; + height: 0.6em; } #volume_actual { - background-color: #d9600c; - height:5px; + background-color: DarkOrange; + height: 0.6em; } - diff --git a/images/addselected.png b/images/addselected.png deleted file mode 100755 index 52fbb78..0000000 Binary files a/images/addselected.png and /dev/null differ diff --git a/images/bg.png b/images/bg.png deleted file mode 100755 index 5bd1ec8..0000000 Binary files a/images/bg.png and /dev/null differ diff --git a/images/control_bg.png b/images/control_bg.png deleted file mode 100755 index 685abbb..0000000 Binary files a/images/control_bg.png and /dev/null differ diff --git a/images/highlight.png b/images/highlight.png deleted file mode 100755 index 3710d71..0000000 Binary files a/images/highlight.png and /dev/null differ diff --git a/images/left.png b/images/left.png deleted file mode 100755 index 00714b7..0000000 Binary files a/images/left.png and /dev/null differ diff --git a/images/playing_bg.png b/images/playing_bg.png deleted file mode 100755 index f2e2337..0000000 Binary files a/images/playing_bg.png and /dev/null differ diff --git a/images/prev.png b/images/prev.png deleted file mode 100755 index aedbbdf..0000000 Binary files a/images/prev.png and /dev/null differ diff --git a/images/remall.png b/images/remall.png deleted file mode 100755 index ffb546a..0000000 Binary files a/images/remall.png and /dev/null differ diff --git a/images/removeselected.png b/images/removeselected.png deleted file mode 100755 index 35294aa..0000000 Binary files a/images/removeselected.png and /dev/null differ diff --git a/images/right.png b/images/right.png deleted file mode 100755 index 2ce6d36..0000000 Binary files a/images/right.png and /dev/null differ diff --git a/index.html b/index.html index 5df6090..6a7c78a 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,10 @@ - +
- -
- + - -
-
- - - -
- - - - -
+
+
+
- -
- - - -
- - - - -
+
-
- diff --git a/mpd.lua b/mpd.lua index 0200a8a..31275b6 100755 --- a/mpd.lua +++ b/mpd.lua @@ -1,5 +1,9 @@ #!/usr/bin/lua +require "uci" +require("socket") +json=require("json") + function url_decode(str) if not str then return nil end str = string.gsub (str, "+", " ") @@ -65,9 +69,6 @@ function process_directory(directory) return res end -require "uci" -require("socket") - function mpd_new(settings) local client = {} if settings == nil then settings = {} end @@ -82,7 +83,6 @@ function mpd_new(settings) return client end - function mpd_send(mpd,action,raw) local command = string.format("%s\n", action) @@ -160,13 +160,15 @@ function mpd_send(mpd,action,raw) return values end - -json=require("json") - x = uci.cursor() + settings = {} settings['host'] = x.get("mpd","server","host") or "localhost" settings['port'] = x.get("mpd","server","port") or 6600 +settings['timeout'] = x.get("mpd","server","timeout") or 1 + +volstep = x.get("mpd","control","volume_step") or 3 + password = x.get("mpd","server","password") if password then settings["password"] = password @@ -177,62 +179,89 @@ m = mpd_new(settings) command = url_decode(os.getenv('QUERY_STRING')) if not command or command=="" then - command="status" + command="idle" end if command=="play" or command=="pause" or command=="stop" or command=="previous" or command=="next" then + res=mpd_send(m,command) + +elseif command=="idle" then + + m.timeout=30 + res=mpd_send(m,command) + elseif command=="vold" then + status=mpd_send(m,"status") volume=tonumber(status["volume"]) - res=mpd_send(m,"setvol "..(volume-3)) + res=mpd_send(m,"setvol "..(volume-volstep)) + elseif command=="volu" then + status=mpd_send(m,"status") volume=tonumber(status["volume"]) - res=mpd_send(m,"setvol "..(volume+3)) + res=mpd_send(m,"setvol "..(volume+volstep)) + elseif command=="status" then + res=mpd_send(m,"status") song=res["song"] playlist=mpd_send(m,"playlist",1) pl=process_playlist(playlist) + if song then res['current_playing']=pl[song]['name'] else res['current_playing']="No songs selected" end + elseif command=="playlist" then + playlist=mpd_send(m,"playlist",1) res=process_playlist(playlist) + elseif command=="repeat" then + status=mpd_send(m,"status") rep=1-status["repeat"] res=mpd_send(m,"repeat "..rep) + elseif string.starts(command,"cpl") then + cmd=split(command,"|") id=cmd[3] command=cmd[2] + if command=="playitem" then command="play "..id res=mpd_send(m,command) end + if command=="clear" then res=mpd_send(m,"clear") end + if command=="remove" then command="delete "..id res=mpd_send(m,command) end + if command=="moveup" then command="swap "..id.." "..(id-1) res=mpd_send(m,command) end + if command=="movedown" then command="swap "..id.." "..(id+1) res=mpd_send(m,command) end + elseif string.starts(command,"lists") then + cmd=split(command,"|") command=cmd[2] + if command=="load" then if not cmd[3] then lists=mpd_send(m,"listplaylists",1) @@ -241,12 +270,15 @@ elseif string.starts(command,"lists") then res=mpd_send(m,"load "..cmd[3],1) end end + if command=="save" and cmd[3] then res=mpd_send(m,"save "..cmd[3],1) end + if command=="delete" and cmd[3] then res=mpd_send(m,"rm "..cmd[3],1) end + if command=="edit" then if cmd[3] then dir=mpd_send(m,"lsinfo \""..cmd[3].."\"",1) @@ -255,12 +287,14 @@ elseif string.starts(command,"lists") then end res=process_directory(dir) end + if command=="add" then res={} if cmd[3] then res=mpd_send(m,"add \""..cmd[3].."\"") end end + end if not res then