andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #178 from jcass77/fix/linters

Browse Source 
Lint fixes
This commit is contained in:
John Cass 2016-02-29 20:30:54 +02:00
commit 27c85106b6
11 changed files with 162 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
mopidy_musicbox_webclient/static/css/webclient.css
View File

@ -14,18 +14,6 @@
****************************/ ****************************/
@media all and (min-width: 961px) { @media all and (min-width: 961px) {
/*header*/
.header-breakpoint.ui-grid-b .ui-block-a {
width: 30%;
}
.header-breakpoint.ui-grid-b .ui-block-b {
width: 30%;
}
.header-breakpoint.ui-grid-b .ui-block-c {
width: 30.1%;
}
/*playlists*/ /*playlists*/
.pl-breakpoint.ui-grid-a .ui-block-a { .pl-breakpoint.ui-grid-a .ui-block-a {
@ -49,15 +37,15 @@
} }
#playlisttracksback { #playlisttracksback {
display:none; display: none;
} }
#playlisttracksdiv { #playlisttracksdiv {
display:block; display: block;
} }
#playlistslistdiv { #playlistslistdiv {
display:block; display: block;
} }
/*search*/ /*search*/
@ -65,81 +53,60 @@
margin-left: .5em; margin-left: .5em;
} }
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b { .srch-breakpoint.ui-grid-a .ui-block-a,
.srch-breakpoint.ui-grid-a .ui-block-b {
width: 49%; width: 49%;
} }
} }
/* phone landscape */ /* phone landscape */
@media all and (max-width: 960px) { @media all and (max-width: 960px) {
/*header*/
.header-breakpoint.ui-grid-b .ui-block-a {
width: 35%;
clear: left;
}
.header-breakpoint.ui-grid-b .ui-block-b {
display: none;
}
.header-breakpoint.ui-grid-b .ui-block-c {
width: 33%;
}
/*playlists*/ /*playlists*/
.pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b { .pl-breakpoint .ui-block-a,
.pl-breakpoint .ui-block-b {
width: 100%; width: 100%;
} }
/*search*/ /*search*/
.srch-breakpoint.ui-grid-a .ui-block-a, .srch-breakpoint.ui-grid-a .ui-block-b { .srch-breakpoint.ui-grid-a .ui-block-a,
.srch-breakpoint.ui-grid-a .ui-block-b {
width: 100%; width: 100%;
} }
#playlisttracksback { #playlisttracksback {
display:block; display: block;
} }
#playlisttracksdiv { #playlisttracksdiv {
display:none; display: none;
} }
#playlistslistdiv { #playlistslistdiv {
display:block; display: block;
} }
} }
/***************************** /*****************************
* Side Panel and Navigation * * Side Panel and Navigation *
*****************************/ *****************************/
.mainNav .fa{ .mainNav .fa {
float: right; float: right;
} }
.mainNav .navtxt{ .mainNav .navtxt {
float: left; float: left;
} }
.mainNav .navtxt:after{ .mainNav .navtxt:after {
clear: left; clear: left;
} }
.bottom{
width: 100%;
margin: -15px;
margin-top: 30px;
}
/**headers and controls**/
#nextimg, #previmg, #backimg, #controlsimg {
margin-top: 6px;
}
#contentHeadline a { #contentHeadline a {
color:white; color:white;
} }
/**headers and controls**/
#headermenubtn { #headermenubtn {
padding-top: 2px; padding-top: 2px;
} }
@ -170,9 +137,9 @@
/* Increase slider handle by 30%. */ /* Increase slider handle by 30%. */
.ui-slider-track.ui-mini .ui-slider-handle { .ui-slider-track.ui-mini .ui-slider-handle {
height: 22px; height: 22px;
width: 22px; width: 22px;
margin: -12px 0 0 -12px; margin: -12px 0 0 -12px;
} }
.ui-slider-input { .ui-slider-input {
@ -196,7 +163,7 @@
/******************** /********************
* Pages, content * * Pages, content *
********************/ ********************/
#page{ #page {
background-color: #fff; background-color: #fff;
} }
@ -212,11 +179,16 @@
display: none; display: none;
} }
#currentpane, #searchpane, #albumspane, #artistspane, #streampane { #currentpane,
display: none; #searchpane,
#albumspane,
#artistspane,
#streampane {
display: none;
} }
#artistviewimage, #albumviewcover { #artistviewimage,
#albumviewcover {
float: right; float: right;
height: 90px; height: 90px;
max-width: 90%; max-width: 90%;
@ -224,7 +196,7 @@
/*** home ***/ /*** home ***/
#homerows div { #homerows div {
text-align:center; text-align: center;
background-color: #2C3E50; background-color: #2C3E50;
padding: 2px; padding: 2px;
padding-top: 20px; padding-top: 20px;
@ -256,7 +228,7 @@
.table { .table {
padding: 0; padding: 0;
list-style-type:none; list-style-type: none;
} }
.table li:last-child { .table li:last-child {
@ -308,7 +280,7 @@
background-position: 4px 51%; background-position: 4px 51%;
} }
.currenttrack { .currenttrack {
background-image: url('../images/icons/play_alt_16x16.png'); background-image: url('../images/icons/play_alt_16x16.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #eee; background-color: #eee;
background-position: 4px 50%; background-position: 4px 50%;
@ -333,7 +305,7 @@
* Now Playing area * * Now Playing area *
**********************/ **********************/
#nowPlayingFooter{ #nowPlayingFooter {
height: 50px; height: 50px;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
@ -348,8 +320,8 @@
.footerControls div span { .footerControls div span {
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
} }
.footerControls #btplayNowPlaying { .footerControls #btplayNowPlaying {
@ -366,11 +338,15 @@
text-decoration: none; text-decoration: none;
} }
.popupArtistName, .popupTrackName, .popupAlbumName, .popupArtistName { .popupArtistName,
.popupTrackName,
.popupAlbumName,
.popupArtistName {
font-style: oblique; font-style: oblique;
} }
#controlspopup, #artistpopup, #coverpopup { #artistpopup,
#coverpopup {
max-width: 90%; max-width: 90%;
background: white; background: white;
padding: 5px; padding: 5px;
@ -381,50 +357,44 @@
margin-top: 10px; margin-top: 10px;
} }
#buttons, #controlspopupimage, #coverpopupimage, #artistpopupimage { #controlspopupimage,
#coverpopupimage,
#artistpopupimage {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 10px; margin-bottom: 10px;
max-width:90%; max-width: 90%;
max-height:90%; max-height: 90%;
} }
#buttons { #popupTracksLv li,
font-size: 24px; #popupQueueLv li {
padding-right: 15px;
margin-bottom: 15px;
}
#popupTracksLv li, #popupQueueLv li {
border-bottom: 1px solid #aaa; border-bottom: 1px solid #aaa;
} }
#popupTracksLv, #popupQueueLv { #popupTracksLv,
#popupQueueLv {
border: 1px solid #aaa; border: 1px solid #aaa;
} }
/*dont hide clear buttons in text input */ /*dont hide clear buttons in text input */
.ui-input-clear-hidden { .ui-input-clear-hidden {
display:block !important; display: block !important;
} }
/**************** /****************
* Common use * * Common use *
****************/ ****************/
#playlistspane { #playlistspane {
margin: 0px !important; margin: 0 !important;
} }
a { a {
text-decoration: none !important; text-decoration: none !important;
} }
.nobreak, .btsquare {
display: inline !important;
}
.pull-right { .pull-right {
float: right; float: right;
font-size: 10px; font-size: 10px;
@ -437,27 +407,14 @@ a {
margin-top: 12px; margin-top: 12px;
} }
.hidden, #allresultloader, .loader {
display: none;
}
.breakafter {
margin-right: 15px;
}
.pright {
display: inline;
margin-top: 4px;
float: right;
}
/********************** /**********************
* Song information * * Song information *
**********************/ **********************/
.ui-footer{ .ui-footer {
border: 0px; border: 0px;
} }
#normalFooter{ #normalFooter {
height: 50px; height: 50px;
line-height: 48px; line-height: 48px;
text-align: center; text-align: center;
@ -508,22 +465,14 @@ a {
padding: 3px; padding: 3px;
} }
#nowPlayingpane{ #nowPlayingpane {
text-align: center; text-align: center;
} }
/*helper*/ /*helper*/
.hidden{
display: none;
}
.ui-loader h1{
color: #efefef;
}
.settingscoll label { .ui-loader h1 {
font-size: 120%; color: #efefef;
font-weight: bold;
padding-top: 30px;
} }
/* panel workaround to make it responsive wrap push on wide viewports once open */ /* panel workaround to make it responsive wrap push on wide viewports once open */
@ -547,32 +496,26 @@ a {
} }
} }
/*smartphones*/ /*smartphones*/
@media (max-width: 35em){ @media (max-width: 35em) {
#nowPlayingpane{ #nowPlayingpane {
padding: 15px 25px 0px 25px; padding: 15px 25px 0 25px;
max-width:90%; max-width: 90%;
max-height:90%; max-height: 90%;
} }
.nowPlaying-artistInfo { .nowPlaying-artistInfo {
font-size: 12px; font-size: 12px;
} }
.nowPlaying-artistInfo h4{ .nowPlaying-artistInfo h3 {
margin: 0px; margin: 0 0 3px 0;
font-weight: normal;
font-size: 12px;
}
.nowPlaying-artistInfo h3{
margin: 0px 0px 3px 00px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
#controlspopupimage{ #controlspopupimage {
max-width:90%; max-width: 90%;
max-height:90%; max-height: 90%;
margin-bottom: 3px; margin-bottom: 3px;
} }
@ -605,7 +548,3 @@ input[type=text] {
-o-user-select: text; -o-user-select: text;
user-select: text; user-select: text;
} }
.mediaicon {
float: right;
}

1
mopidy_musicbox_webclient/static/dialog-success.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Success dialog</title>
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script>

39
mopidy_musicbox_webclient/static/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html manifest="mb.appcache"> <html manifest="mb.appcache">
<head> <head>
<title>Musicbox</title>
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="vendors/jquery/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendors/jquery_mobile_flat_ui_theme/jquery.mobile.flatui.min.css"/> <link rel="stylesheet" type="text/css" href="vendors/jquery_mobile_flat_ui_theme/jquery.mobile.flatui.min.css"/>
@ -99,9 +100,9 @@
</li> </li>
<li id="navshutdown" data-icon="false"> <li id="navshutdown" data-icon="false">
<a href="system.html"> <a href="system.html">
<span class="navtxt">System </span><i class="fa fa-power-off"></i></a> <span class="navtxt">System </span><i class="fa fa-power-off"></i></a>
</li> </li>
<li id="" data-icon="false"> <li data-icon="false">
<div><!-- slider for volume --> <div><!-- slider for volume -->
<a href="#" onclick="doMute(); return false;"><span title="Toggle mute"><i id="mutebt" class="fa fa-volume-up"></i></span></a> <a href="#" onclick="doMute(); return false;"><span title="Toggle mute"><i id="mutebt" class="fa fa-volume-up"></i></span></a>
<label for="volumeslider" class="ui-hidden-accessible">Volume</label> <label for="volumeslider" class="ui-hidden-accessible">Volume</label>
@ -118,14 +119,14 @@
<h3 id="coverpopupalbumname"></h3> <h3 id="coverpopupalbumname"></h3>
<h4 id="coverpopupartist"></h4> <h4 id="coverpopupartist"></h4>
<a href="#" onclick="closePopups();"><img id="coverpopupimage" src=""/></a> <a href="#" onclick="closePopups();"><img id="coverpopupimage" src="" alt="Album cover"/></a>
</div> </div>
<div id="artistpopup" data-role="popup" data-theme="c"> <div id="artistpopup" data-role="popup" data-theme="c">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a> class="ui-btn-right">Close</a>
<h4 id="artistpopupname">&nbsp;</h4> <h4 id="artistpopupname">&nbsp;</h4>
<a href="#" onclick="closePopups();"><img id="artistpopupimage" src=""/></a> <a href="#" onclick="closePopups();"><img id="artistpopupimage" src="" alt="Album artist"/></a>
</div> </div>
<div data-role="popup" data-transition="none" data-theme="c" id="popupBrowse"> <div data-role="popup" data-transition="none" data-theme="c" id="popupBrowse">
@ -170,8 +171,7 @@
<a href="#" onclick="showAlbumPopup('#popupTracks')">Show Album <span class="popupAlbumName"></span></a> <a href="#" onclick="showAlbumPopup('#popupTracks')">Show Album <span class="popupAlbumName"></span></a>
</li> </li>
<li id="popupArtistsLi"> <li id="popupArtistsLi">
<a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span <a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span class="popupArtistName"></span>
class="popupArtistName"></span>
</a> </a>
</li> </li>
<div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv"> <div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv">
@ -195,8 +195,7 @@
<a href="#" onclick="showAlbumPopup('#popupQueue')">Show Album <span class="popupAlbumName"></span></a> <a href="#" onclick="showAlbumPopup('#popupQueue')">Show Album <span class="popupAlbumName"></span></a>
</li> </li>
<li id="popupArtistsLi"> <li id="popupArtistsLi">
<a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span <a href="#" onclick="showArtist()" class="popupArtistHref">Show Artist <span class="popupArtistName"></span>
class="popupArtistName"></span>
</a> </a>
</li> </li>
<div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv"> <div data-role="collapsible" data-icon="false" data-inset="false" class="popupArtistsDiv">
@ -280,7 +279,7 @@
<div id="nowPlayingpane" data-role="content" class="pane"> <div id="nowPlayingpane" data-role="content" class="pane">
<img id="controlspopupimage" src="images/default_cover.png" /> <img id="controlspopupimage" src="images/default_cover.png" alt="Album cover"/>
<div class="nowPlaying-artistInfo"> <div class="nowPlaying-artistInfo">
@ -305,8 +304,10 @@
<ul id="playlistslist" class="table"></ul> <ul id="playlistslist" class="table"></ul>
</div> </div>
<div class="ui-block-b scroll" id="playlisttracksdiv"> <div class="ui-block-b scroll" id="playlisttracksdiv">
<div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;"><a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a></div> <div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;">
<ul class="table" id="playlisttracks"></ul> <a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a>
</div>
<ul class="table" id="playlisttracks"></ul>
</div> </div>
</div> </div>
</div> </div>
@ -328,7 +329,7 @@
</div> </div>
<div data-role="content" class="pane" id="albumspane"> <div data-role="content" class="pane" id="albumspane">
<a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover"/></a> <a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover" alt="Album cover"/></a>
<h3 id="h_albumname"></h3> <h3 id="h_albumname"></h3>
<h5 id="h_albumartist"></h5> <h5 id="h_albumartist"></h5>
@ -337,7 +338,7 @@
</div> </div>
<div data-role="content" class="pane" id="artistspane"> <div data-role="content" class="pane" id="artistspane">
<a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage"/></a> <a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" alt="Album artist"/></a>
<h3 id="h_artistname"></h3> <h3 id="h_artistname"></h3>
<ul class="table" id="artiststable"></ul> <ul class="table" id="artiststable"></ul>
@ -350,11 +351,13 @@
<div class="ui-block"> <div class="ui-block">
<form> <form>
<p>Search for artists, albums, or specific tracks. <p>Search for artists, albums, or specific tracks.
<select id="selectSearchService"> <!-- data-native-menu="false"> <!-- multiple="multiple" data-native-menu="false"> <select id="selectSearchService">
<!-- data-native-menu="false">
multiple="multiple" data-native-menu="false">
<option data-placeholder="true">Choose services</option> --> <option data-placeholder="true">Choose services</option> -->
</select> </select>
<input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true" <input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true"
onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return searchPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return initSearch(event.value);"> <button class="btn" type="button" onclick="return initSearch(event.value);">
Search! Search!
</button> </button>
@ -403,13 +406,13 @@
Get currently playing Get currently playing
</button> </button>
<input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true" <input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return streamPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return playStreamUri();"> <button class="btn" type="button" onclick="return playStreamUri();">
Play Play
</button> </button>
<input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true" <input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return streamPressed(event.keyCode);" type="text"/>
<button class="btn" type="button" onclick="return addFavourite();"> <button class="btn" type="button" onclick="return addFavourite();">
Save Save
</button> </button>
@ -426,7 +429,7 @@
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter"> <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
<div class="footerControls"> <div class="footerControls">
<div class="songinfo" id="songinfo"> <div class="songinfo" id="songinfo">
<a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png"/></div></a> <a href="#"><div style="float: left"><img id="infocover" src="images/default_cover.png" alt="Album cover"/></div></a>
<div class="songinfo-text"> <div class="songinfo-text">
<div id="infoname"></div> <div id="infoname"></div>
<div id="infoartist"></div> <div id="infoartist"></div>

14
mopidy_musicbox_webclient/static/js/controls.js vendored
View File

@ -93,7 +93,7 @@ function playTrack(action) {
mopidy.tracklist.clear().then( mopidy.tracklist.clear().then(
mopidy.tracklist.add({'uris': trackUris}).then( mopidy.tracklist.add({'uris': trackUris}).then(
function(tlTracks) { function(tlTracks) {
mopidy.playback.play({'tl_track': tlTracks[selected]}) mopidy.playback.play({'tl_track': tlTracks[selected]});
} }
) )
); );
@ -143,7 +143,7 @@ function playTrackByUri(track_uri, playlist_uri) {
mopidy.tracklist.add({'uris': [playlist_uri]}).then(function(tlTracks) { mopidy.tracklist.add({'uris': [playlist_uri]}).then(function(tlTracks) {
// Can fail for all sorts of reasons. If so, just add individually. // Can fail for all sorts of reasons. If so, just add individually.
if (tlTracks.length == 0) { if (tlTracks.length === 0) {
var trackUris = getTracksFromUri(playlist_uri, false); var trackUris = getTracksFromUri(playlist_uri, false);
mopidy.tracklist.add({'uris': trackUris}).then(findAndPlayTrack); mopidy.tracklist.add({'uris': trackUris}).then(findAndPlayTrack);
} else { } else {
@ -311,7 +311,7 @@ function setTracklistOption(name, new_value) {
} else { } else {
$("#"+name+"bt").attr('style', 'color:#66DD33'); $("#"+name+"bt").attr('style', 'color:#66DD33');
} }
return new_value return new_value;
} }
function setRepeat(nwrepeat) { function setRepeat(nwrepeat) {
@ -364,7 +364,7 @@ function doSeekPos(value) {
positionChanging = value; positionChanging = value;
mopidy.playback.seek({'time_position': Math.round(value)}).then( function() { mopidy.playback.seek({'time_position': Math.round(value)}).then( function() {
positionChanging = null; positionChanging = null;
});; });
} }
} }
@ -512,7 +512,7 @@ function addToFavourites(newTracks) {
getFavourites().catch(console.error.bind(console)).then(function(favourites) { getFavourites().catch(console.error.bind(console)).then(function(favourites) {
if (favourites) { if (favourites) {
if (favourites.tracks) { if (favourites.tracks) {
Array.prototype.push.apply(favourites.tracks, newTracks) Array.prototype.push.apply(favourites.tracks, newTracks);
} else { } else {
favourites.tracks = newTracks; favourites.tracks = newTracks;
} }
@ -535,7 +535,7 @@ function addFavourite(uri, name) {
} }
addToFavourites(newTracks); addToFavourites(newTracks);
} else { } else {
if (newTracks.length == 0) { if (newTracks.length === 0) {
console.log('No tracks to add'); console.log('No tracks to add');
} else { } else {
console.log('Too many tracks (%d) to add', tracks.length); console.log('Too many tracks (%d) to add', tracks.length);
@ -568,7 +568,7 @@ function showFavourites() {
$.cookie.json = true; $.cookie.json = true;
if ($.cookie('streamUris')) { if ($.cookie('streamUris')) {
tmp = '<button class="btn" style="padding: 5px; width: 100%" type="button" onclick="return upgradeStreamUrisToFavourites();">Convert StreamUris</button>' tmp = '<button class="btn" style="padding: 5px; width: 100%" type="button" onclick="return upgradeStreamUrisToFavourites();">Convert StreamUris</button>';
} }
if (favourites.tracks) { if (favourites.tracks) {
var child = ''; var child = '';

30
mopidy_musicbox_webclient/static/js/functionsvars.js
View File

@ -128,20 +128,20 @@ function scrollToTracklist() {
function getArtist(pl) { function getArtist(pl) {
for (var i = 0; i < pl.length; i++) { for (var i = 0; i < pl.length; i++) {
for (var j = 0; j < pl[i].artists.length; j++) { for (var j = 0; j < pl[i].artists.length; j++) {
if (pl[i].artists[j].name != '') { if (pl[i].artists[j].name !== '') {
return pl[i].artists[j].name; return pl[i].artists[j].name;
} }
} }
}; }
} }
//A hack to find the first album of a playlist. this is not yet returned by mopidy //A hack to find the first album of a playlist. this is not yet returned by mopidy
function getAlbum(pl) { function getAlbum(pl) {
for (var i = 0; i < pl.length; i++) { for (var i = 0; i < pl.length; i++) {
if (pl[i].album.name != '') { if (pl[i].album.name !== '') {
return pl[i].album.name; return pl[i].album.name;
} }
}; }
} }
function artistsToString(artists, max) { function artistsToString(artists, max) {
@ -170,7 +170,7 @@ function albumTracksToTable(pl, target, uri) {
popupData[pl[i].uri] = pl[i]; popupData[pl[i].uri] = pl[i];
liID = targetmin + '-' + pl[i].uri; liID = targetmin + '-' + pl[i].uri;
tmp += renderSongLi(pl[i], liID, uri); tmp += renderSongLi(pl[i], liID, uri);
}; }
tmp += '</ul>'; tmp += '</ul>';
$(target).html(tmp); $(target).html(tmp);
$(target).attr('data', uri); $(target).attr('data', uri);
@ -178,7 +178,7 @@ function albumTracksToTable(pl, target, uri) {
function renderSongLi(song, liID, uri) { function renderSongLi(song, liID, uri) {
var name; var name;
if (!song.name || song.name == '') { if (!song.name || song.name === '') {
name = uri.split('/'); name = uri.split('/');
name = decodeURI(name[name.length - 1]); name = decodeURI(name[name.length - 1]);
} else { } else {
@ -195,7 +195,7 @@ function renderSongLi(song, liID, uri) {
function renderQueueSongLi(song, liID, uri, tlid) { function renderQueueSongLi(song, liID, uri, tlid) {
var name; var name;
if (!song.name || song.name == '') { if (!song.name || song.name === '') {
name = uri.split('/'); name = uri.split('/');
name = decodeURI(name[name.length - 1]); name = decodeURI(name[name.length - 1]);
} else { } else {
@ -212,7 +212,7 @@ function renderQueueSongLi(song, liID, uri, tlid) {
function resultsToTables(results, target, uri) { function resultsToTables(results, target, uri) {
if (!results) { if (!results) {
return return;
} }
var tlids = []; var tlids = [];
if (target == CURRENT_PLAYLIST_TABLE) { if (target == CURRENT_PLAYLIST_TABLE) {
@ -249,7 +249,7 @@ function resultsToTables(results, target, uri) {
results[i].album.name = ''; results[i].album.name = '';
} }
//create name if there is no one //create name if there is no one
if (!results[i].name || results[i].name == '') { if (!results[i].name || results[i].name === '') {
name = results[i].uri.split('/'); name = results[i].uri.split('/');
results[i].name = decodeURI(name[name.length - 1]) || 'Track ' + String(i); results[i].name = decodeURI(name[name.length - 1]) || 'Track ' + String(i);
} }
@ -269,11 +269,11 @@ function resultsToTables(results, target, uri) {
newtlids = []; newtlids = [];
nextname = ''; nextname = '';
} else { } else {
if ((results[i].album.name != nextname) || (nextname == '')) { if ((results[i].album.name != nextname) || (nextname === '')) {
tableid = 'art' + i; tableid = 'art' + i;
//render differently if only one track in the album //render differently if only one track in the album
if (newalbum.length == 1) { if (newalbum.length == 1) {
if (i != 0) { if (i !== 0) {
html += '<li class="smalldivider"> &nbsp;</li>'; html += '<li class="smalldivider"> &nbsp;</li>';
} }
iconClass = getMediaClass(newalbum[0].uri); iconClass = getMediaClass(newalbum[0].uri);
@ -303,7 +303,7 @@ function resultsToTables(results, target, uri) {
} }
} }
} }
if (newalbum[0].album.name != '') { if (newalbum[0].album.name !== '') {
html += ' / '; html += ' / ';
} }
html += '<em>' + newalbum[0].album.name + '</em></p>'; html += '<em>' + newalbum[0].album.name + '</em></p>';
@ -387,7 +387,7 @@ function playlisttotable(pl, target, uri) {
child += '</a></li>'; child += '</a></li>';
tmp += child; tmp += child;
} }
}; }
$(target).html(tmp); $(target).html(tmp);
$(target).attr('data', uri); $(target).attr('data', uri);
@ -415,7 +415,7 @@ function getUris(tracks) {
function getTracksFromUri(uri, full_track_data) { function getTracksFromUri(uri, full_track_data) {
var returnTracksOrUris = function(tracks) { var returnTracksOrUris = function(tracks) {
return (full_track_data || false) ? tracks : getUris(tracks); return (full_track_data || false) ? tracks : getUris(tracks);
} };
if (customTracklists[uri]) { if (customTracklists[uri]) {
return returnTracksOrUris(customTracklists[uri]); return returnTracksOrUris(customTracklists[uri]);
} else if (playlists[uri] && playlists[uri].tracks) { } else if (playlists[uri] && playlists[uri].tracks) {
@ -483,7 +483,7 @@ function showOffline(on) {
// from http://dzone.com/snippets/validate-url-regexp // from http://dzone.com/snippets/validate-url-regexp
function validUri(str) { function validUri(str) {
var regexp = /^(mms|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ var regexp = /^(mms|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
return regexp.test(str); return regexp.test(str);
} }

55
mopidy_musicbox_webclient/static/js/gui.js
View File

@ -9,9 +9,9 @@
function resetSong() { function resetSong() {
setPlayState(false); setPlayState(false);
setPosition(0); setPosition(0);
var data = new Object; var data = new Object({});
data.tlid = -1; data.tlid = -1;
data.track = new Object; data.track = new Object({});
data.track.name = ''; data.track.name = '';
data.track.artists = ''; data.track.artists = '';
data.track.length = 0; data.track.length = 0;
@ -80,10 +80,10 @@ function setSongInfo(data) {
// console.log(data, songdata); // console.log(data, songdata);
if (!data ) { return; } if (!data ) { return; }
if (data.tlid == songdata.tlid) { return; } if (data.tlid == songdata.tlid) { return; }
if (!data.track.name || data.track.name == '') { if (!data.track.name || data.track.name === '') {
var name = data.track.uri.split('/'); var name = data.track.uri.split('/');
data.track.name = decodeURI(name[name.length - 1]); data.track.name = decodeURI(name[name.length - 1]);
}; }
updatePlayIcons(data.track.uri, data.tlid); updatePlayIcons(data.track.uri, data.tlid);
artistshtml = ''; artistshtml = '';
@ -95,7 +95,7 @@ function setSongInfo(data) {
if (rs && rs[1] == data.track.name) { if (rs && rs[1] == data.track.name) {
data.track.name = (rs[0] || rs[1]); data.track.name = (rs[0] || rs[1]);
} }
}; }
} }
songdata = data; songdata = data;
@ -103,7 +103,7 @@ function setSongInfo(data) {
setSongTitle(data.track.name, false); setSongTitle(data.track.name, false);
songlength = Infinity; songlength = Infinity;
if (!data.track.length || data.track.length == 0) { if (!data.track.length || data.track.length === 0) {
$('#trackslider').next().find('.ui-slider-handle').hide(); $('#trackslider').next().find('.ui-slider-handle').hide();
$('#trackslider').slider('disable'); $('#trackslider').slider('disable');
// $('#streamnameinput').val(data.track.name); // $('#streamnameinput').val(data.track.name);
@ -162,7 +162,7 @@ function closePopups() {
function popupTracks(e, listuri, trackuri, tlid) { function popupTracks(e, listuri, trackuri, tlid) {
if (!e) if (!e)
var e = window.event; e = window.event;
$('.popupTrackName').html(popupData[trackuri].name); $('.popupTrackName').html(popupData[trackuri].name);
$('.popupAlbumName').html(popupData[trackuri].album.name); $('.popupAlbumName').html(popupData[trackuri].album.name);
var child = ""; var child = "";
@ -191,18 +191,19 @@ function popupTracks(e, listuri, trackuri, tlid) {
var hash = document.location.hash.split('?'); var hash = document.location.hash.split('?');
var divid = hash[0].substr(1); var divid = hash[0].substr(1);
var popupName = '';
if (divid == 'current') { if (divid == 'current') {
$(".addqueue").hide(); $(".addqueue").hide();
var popupName = '#popupQueue'; popupName = '#popupQueue';
} else if (divid == 'browse') { } else if (divid == 'browse') {
$(".addqueue").show(); $(".addqueue").show();
var popupName = '#popupBrowse'; popupName = '#popupBrowse';
} else { } else {
$(".addqueue").show(); $(".addqueue").show();
var popupName = '#popupTracks'; popupName = '#popupTracks';
} }
if (typeof tlid != 'undefined' && tlid != '') { if (typeof tlid != 'undefined' && tlid !== '') {
$(popupName).data("list", listuri).data("track", trackuri).data("tlid", tlid).popup("open", { $(popupName).data("list", listuri).data("track", trackuri).data("tlid", tlid).popup("open", {
x : e.pageX, x : e.pageX,
y : e.pageY y : e.pageY
@ -259,15 +260,15 @@ function initSocketevents() {
}); });
mopidy.on("event:volumeChanged", function(data) { mopidy.on("event:volumeChanged", function(data) {
setVolume(data["volume"]); setVolume(data.volume);
}); });
mopidy.on("event:muteChanged", function(data) { mopidy.on("event:muteChanged", function(data) {
setMute(data["mute"]); setMute(data.mute);
}); });
mopidy.on("event:playbackStateChanged", function(data) { mopidy.on("event:playbackStateChanged", function(data) {
switch (data["new_state"]) { switch (data.new_state) {
case "paused": case "paused":
case "stopped": case "stopped":
setPlayState(false); setPlayState(false);
@ -283,14 +284,14 @@ function initSocketevents() {
}); });
mopidy.on("event:seeked", function(data) { mopidy.on("event:seeked", function(data) {
setPosition(parseInt(data["time_position"])); setPosition(parseInt(data.time_position));
if (play) { if (play) {
startProgressTimer(); startProgressTimer();
} }
}); });
mopidy.on("event:streamTitleChanged", function(data) { mopidy.on("event:streamTitleChanged", function(data) {
setSongTitle(data["title"], true); setSongTitle(data.title, true);
}); });
} }
@ -331,7 +332,7 @@ function toggleFullscreen() {
function isFullscreen() { function isFullscreen() {
return (document.fullscreenElement || // alternative standard method return (document.fullscreenElement || // alternative standard method
document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement ) // current working methods document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement ); // current working methods
} }
function switchContent(divid, uri) { function switchContent(divid, uri) {
@ -345,8 +346,8 @@ function switchContent(divid, uri) {
function setHeadline(site){ function setHeadline(site){
site = site.trim(); site = site.trim();
str = $('.mainNav').find('a[href$='+site+']').text(); str = $('.mainNav').find('a[href$='+site+']').text();
if(str == ""){ if(str === ""){
str = site.charAt(0).toUpperCase() + site.slice(1);; str = site.charAt(0).toUpperCase() + site.slice(1);
} }
$('#contentHeadline').html('<a href="#home" onclick="switchContent(\'home\'); return false;">' + str + '</a>'); $('#contentHeadline').html('<a href="#home" onclick="switchContent(\'home\'); return false;">' + str + '</a>');
} }
@ -365,7 +366,7 @@ function updateStatusOfAll() {
mopidy.playback.getTimePosition().then(processCurrentposition, console.error); mopidy.playback.getTimePosition().then(processCurrentposition, console.error);
mopidy.playback.getState().then(processPlaystate, console.error); mopidy.playback.getState().then(processPlaystate, console.error);
updateOptions() updateOptions();
mopidy.playback.getVolume().then(processVolume, console.error); mopidy.playback.getVolume().then(processVolume, console.error);
mopidy.mixer.getMute().then(processMute, console.error); mopidy.mixer.getMute().then(processMute, console.error);
@ -409,7 +410,7 @@ function locationHashChanged() {
case 'search': case 'search':
$('#navsearch a').addClass($.mobile.activeBtnClass); $('#navsearch a').addClass($.mobile.activeBtnClass);
$("#searchinput").focus(); $("#searchinput").focus();
if (customTracklists['mbw:allresultscache'] == '') { if (customTracklists['mbw:allresultscache'] === '') {
initSearch($('#searchinput').val()); initSearch($('#searchinput').val());
} }
break; break;
@ -417,12 +418,12 @@ function locationHashChanged() {
$('#navstream a').addClass('ui-state-active ui-state-persist ui-btn-active'); $('#navstream a').addClass('ui-state-active ui-state-persist ui-btn-active');
break; break;
case 'artists': case 'artists':
if (uri != '') { if (uri !== '') {
showArtist(uri); showArtist(uri);
} }
break; break;
case 'albums': case 'albums':
if (uri != '') { if (uri !== '') {
showAlbum(uri); showAlbum(uri);
} }
break; break;
@ -508,11 +509,13 @@ $(document).ready(function(event) {
//navigation temporary, rewrite this! //navigation temporary, rewrite this!
$('#songinfo').click( $('#songinfo').click(
function() function() {
{return switchContent('nowPlaying')} ); return switchContent('nowPlaying');
});
$('#controlspopupimage').click( $('#controlspopupimage').click(
function() { function() {
return switchContent('current')} ); return switchContent('current');
});
$('#navToggleFullscreen').click(function(){ $('#navToggleFullscreen').click(function(){
toggleFullscreen(); toggleFullscreen();
}); });

4
mopidy_musicbox_webclient/static/js/images.js
View File

@ -72,7 +72,7 @@ function getCoverFromLastFm(track, images, size) {
lastfm.album.getInfo( {artist: artistname, album: albumname}, lastfm.album.getInfo( {artist: artistname, album: albumname},
{ success: function(data) { { success: function(data) {
for (var i = 0; i < data.album.image.length; i++) { for (var i = 0; i < data.album.image.length; i++) {
if ( data.album.image[i]['size'] == size) { if ( data.album.image[i].size == size) {
$(images).attr('src', data.album.image[i]['#text'] || defUrl); $(images).attr('src', data.album.image[i]['#text'] || defUrl);
} }
} }
@ -84,7 +84,7 @@ function getArtistImage(nwartist, image, size) {
var defUrl = 'images/user_24x32.png'; var defUrl = 'images/user_24x32.png';
lastfm.artist.getInfo({artist: nwartist}, {success: function(data){ lastfm.artist.getInfo({artist: nwartist}, {success: function(data){
for (var i = 0; i < data.artist.image.length; i++) { for (var i = 0; i < data.artist.image.length; i++) {
if ( data.artist.image[i]['size'] == size) { if ( data.artist.image[i].size == size) {
$(image).attr('src', data.artist.image[i]['#text'] || defUrl); $(image).attr('src', data.artist.image[i]['#text'] || defUrl);
} }
} }

19
mopidy_musicbox_webclient/static/js/process_ws.js
View File

@ -76,8 +76,8 @@ function processPlaystate(data) {
* process results of a browse list * process results of a browse list
*********************************************************/ *********************************************************/
function processBrowseDir(resultArr) { function processBrowseDir(resultArr) {
var backHtml = '<li style="background-color:#ccc"><a href="#" onclick="return getBrowseDir();"><h1 class="trackname"><i class="fa fa-arrow-circle-left"></i> Back</h1></a></li>' var backHtml = '<li style="background-color:#ccc"><a href="#" onclick="return getBrowseDir();"><h1 class="trackname"><i class="fa fa-arrow-circle-left"></i> Back</h1></a></li>';
if ( (!resultArr) || (resultArr == '') || (resultArr.length == 0) ) { if ( (!resultArr) || (resultArr === '') || (resultArr.length === 0) ) {
$('#browsepath').html('No tracks found...'); $('#browsepath').html('No tracks found...');
$('#browselist').html(backHtml); $('#browselist').html(backHtml);
showLoading(false); showLoading(false);
@ -124,7 +124,7 @@ function processBrowseDir(resultArr) {
'<i class="fa fa-ellipsis-v"></i></a>' + '<i class="fa fa-ellipsis-v"></i></a>' +
'<a href="#" class="browsetrack" onclick="return playBrowsedTracks(PLAY_ALL, ' + index + ');" id="' + resultArr[i].uri + '<a href="#" class="browsetrack" onclick="return playBrowsedTracks(PLAY_ALL, ' + index + ');" id="' + resultArr[i].uri +
'"><h1 class="trackname"><i class="' + iconClass + '"></i> ' + resultArr[i].name + '</h1></a></li>'; '"><h1 class="trackname"><i class="' + iconClass + '"></i> ' + resultArr[i].name + '</h1></a></li>';
index++ index++;
} else { } else {
if (browseStack.length > 0) { if (browseStack.length > 0) {
iconClass="fa fa-folder-o"; iconClass="fa fa-folder-o";
@ -152,7 +152,7 @@ function processBrowseDir(resultArr) {
* process results of list of playlists of the user * process results of list of playlists of the user
*********************************************************/ *********************************************************/
function processGetPlaylists(resultArr) { function processGetPlaylists(resultArr) {
if ((!resultArr) || (resultArr == '')) { if ((!resultArr) || (resultArr === '')) {
$('#playlistslist').empty(); $('#playlistslist').empty();
return; return;
} }
@ -167,7 +167,7 @@ function processGetPlaylists(resultArr) {
} else { } else {
tmp = tmp + li_html + '<i class="' + getMediaClass(resultArr[i].uri) + '"></i> ' + resultArr[i].name + '</a></li>'; tmp = tmp + li_html + '<i class="' + getMediaClass(resultArr[i].uri) + '"></i> ' + resultArr[i].name + '</a></li>';
} }
}; }
// Prepend the user's Spotify "Starred" playlist and favourites to the results. (like Spotify official client). // Prepend the user's Spotify "Starred" playlist and favourites to the results. (like Spotify official client).
tmp = favourites + starred + tmp; tmp = favourites + starred + tmp;
$('#playlistslist').html(tmp); $('#playlistslist').html(tmp);
@ -179,12 +179,12 @@ function processGetPlaylists(resultArr) {
* process results of a returned list of playlist track refs * process results of a returned list of playlist track refs
*********************************************************/ *********************************************************/
function processPlaylistItems(resultDict) { function processPlaylistItems(resultDict) {
if (resultDict.items.length == 0) { if (resultDict.items.length === 0) {
console.log('Playlist', resultDict.uri, 'is empty'); console.log('Playlist', resultDict.uri, 'is empty');
showLoading(false); showLoading(false);
return; return;
} }
var trackUris = [] var trackUris = [];
for (i = 0; i < resultDict.items.length; i++) { for (i = 0; i < resultDict.items.length; i++) {
trackUris.push(resultDict.items[i].uri); trackUris.push(resultDict.items[i].uri);
} }
@ -198,7 +198,6 @@ function processPlaylistItems(resultDict) {
showLoading(false); showLoading(false);
return playlists[newplaylisturi].tracks; return playlists[newplaylisturi].tracks;
}); });
return false;
} }
/******************************************************** /********************************************************
@ -215,7 +214,7 @@ function processCurrentPlaylist(resultArr) {
* process results of an artist lookup * process results of an artist lookup
*********************************************************/ *********************************************************/
function processArtistResults(resultArr) { function processArtistResults(resultArr) {
if (!resultArr || (resultArr.length == 0)) { if (!resultArr || (resultArr.length === 0)) {
$('#h_artistname').text('Artist not found...'); $('#h_artistname').text('Artist not found...');
getCover('', '#artistviewimage, #artistpopupimage', 'extralarge'); getCover('', '#artistviewimage, #artistpopupimage', 'extralarge');
showLoading(false); showLoading(false);
@ -234,7 +233,7 @@ function processArtistResults(resultArr) {
* process results of an album lookup * process results of an album lookup
*********************************************************/ *********************************************************/
function processAlbumResults(resultArr) { function processAlbumResults(resultArr) {
if (!resultArr || (resultArr.length == 0)) { if (!resultArr || (resultArr.length === 0)) {
$('#h_albumname').text('Album not found...'); $('#h_albumname').text('Album not found...');
getCover('', '#albumviewcover, #coverpopupimage', 'extralarge'); getCover('', '#albumviewcover, #coverpopupimage', 'extralarge');
showLoading(false); showLoading(false);

16
mopidy_musicbox_webclient/static/js/progress_timer.js
View File

@ -3,8 +3,8 @@ var progressElement = document.getElementById('trackslider');
var positionNode = document.createTextNode(''); var positionNode = document.createTextNode('');
var durationNode = document.createTextNode(''); var durationNode = document.createTextNode('');
var START_BEATS = 5 // 0.5 seconds, needs to be less than 1s to prevent unwanted updates. var START_BEATS = 5; // 0.5 seconds, needs to be less than 1s to prevent unwanted updates.
var RUN_BEATS = 300 // 30 seconds assuming default timer update rate of 100ms var RUN_BEATS = 300; // 30 seconds assuming default timer update rate of 100ms
var callbackHeartbeats = 0; // Timer will check syncs on every n-number of calls. var callbackHeartbeats = 0; // Timer will check syncs on every n-number of calls.
var targetPosition = null; var targetPosition = null;
@ -19,7 +19,7 @@ document.getElementById('songlength').appendChild(durationNode);
function timerCallback(position, duration, isRunning) { function timerCallback(position, duration, isRunning) {
updateTimers(position, duration, isRunning); updateTimers(position, duration, isRunning);
if (callbackHeartbeats == 0) { if (callbackHeartbeats === 0) {
callbackHeartbeats = getHeartbeat(); callbackHeartbeats = getHeartbeat();
} }
@ -38,7 +38,7 @@ function timerCallback(position, duration, isRunning) {
} }
function updateTimers(position, duration, isRunning) { function updateTimers(position, duration, isRunning) {
var ready = !(duration == Infinity && position == 0 && !isRunning); // Timer has been properly initialized. var ready = !(duration == Infinity && position === 0 && !isRunning); // Timer has been properly initialized.
var streaming = (duration == Infinity && position > 0); // Playing a stream. var streaming = (duration == Infinity && position > 0); // Playing a stream.
var ok = synced && isRunning; // Normal operation. var ok = synced && isRunning; // Normal operation.
var syncing = !synced && isRunning; // Busy syncing. var syncing = !synced && isRunning; // Busy syncing.
@ -59,7 +59,7 @@ function updateTimers(position, duration, isRunning) {
positionNode.nodeValue = '(sync)'; positionNode.nodeValue = '(sync)';
} }
} else if (synced || streaming) { } else if (synced || streaming) {
positionNode.nodeValue = format(position);; positionNode.nodeValue = format(position);
} }
} }
@ -71,10 +71,10 @@ function updateTimers(position, duration, isRunning) {
} }
function getHeartbeat() { function getHeartbeat() {
if (syncsLeft > 0 && callbackHeartbeats == 0) { if (syncsLeft > 0 && callbackHeartbeats === 0) {
// Step back exponentially while increasing heartbeat. // Step back exponentially while increasing heartbeat.
return Math.round(delay_exponential(5, 2, MAX_SYNCS - syncsLeft)); return Math.round(delay_exponential(5, 2, MAX_SYNCS - syncsLeft));
} else if (syncsLeft == 0 && callbackHeartbeats == 0) { } else if (syncsLeft === 0 && callbackHeartbeats === 0) {
// Sync completed, keep checking using maximum number of heartbeats. // Sync completed, keep checking using maximum number of heartbeats.
return RUN_BEATS; return RUN_BEATS;
} else { } else {
@ -111,7 +111,7 @@ function toInt(value) {
function format(milliseconds) { function format(milliseconds) {
if (milliseconds === Infinity) { if (milliseconds === Infinity) {
return '(n/a)'; return '(n/a)';
} else if (milliseconds == 0) { } else if (milliseconds === 0) {
return '0:00'; return '0:00';
} }

2
mopidy_musicbox_webclient/static/mb.appcache
View File

@ -1,6 +1,6 @@
CACHE MANIFEST CACHE MANIFEST
# 2016-02-28:v1 # 2016-02-29:v1
NETWORK: NETWORK:
* *

1
mopidy_musicbox_webclient/static/system.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>System</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">