Skip to content

Commit

Permalink
update dependencies and consolide now playing displays
Browse files Browse the repository at this point in the history 
fix inconsistent album list heights
clean up some bad bootstrap markup
fix the progress bar height display and remove some extra clearfixes
add coverflow switch to settings (not yet working)
  • Loading branch information
@ezpuzz
ezpuzz committed Sep 5, 2015
1 parent 9dbd1a3 commit 03289b0
Show file tree
Hide file tree
Showing 9 changed files with 950 additions and 932 deletions.
15 changes: 1 addition & 14 deletions app/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@
</div>

<!-- Main -->
<div style="height: 90%;" class="row">
<div id="page" class="row">
<div id="Main" class="col-md-10 col-sm-12">

<div id="View" ui-view="main"></div>
Expand Down Expand Up @@ -108,19 +108,6 @@
</li>
</ol>

<div id="NowPlaying">
<div class="media">
<a class="pull-left" rel="coverart" ng-href="{{playingSong.coverartfull}}" title="{{playingSong.artist}} - {{playingSong.album}}" fancybox>
<img class="media-object" ng-src="{{playingSong.coverartthumb}}" src="/images/albumdefault_60.jpg" alt="Cover Artwork" />
</a>
<div class="media-body">
<h4>Now Playing</h4>
<span>{{playingSong.artist}}</span><br>
<span>{{playingSong.name}}</span>
</div>
</div>
</div>

</div>

<div id="SideBar" class="hidden">
Expand Down
77 changes: 37 additions & 40 deletions app/assets/partials/albums.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div id="albumsWrapper" class="row">
<div id="titleBar">
<div id="albumsWrapper">

<div id="titleBar" class="row">

<div class="col-xs-12 col-md-6">
<h3 ng-hide="!selectedArtist.album.length">Albums<span ng-hide="!selectedArtist"> <small>{{selectedArtist.name}}</small></span></h3>
Expand All @@ -10,11 +11,9 @@ <h3 ng-hide="!selectedArtist.album.length">Albums<span ng-hide="!selectedArtist"
</select>
</div>

<div class="clearfix"></div>

</div>

<div id="Breadcrumbs">
<div id="Breadcrumbs" class="row">

<div class="col-xs-12">
<ol class="breadcrumb">
Expand All @@ -25,13 +24,10 @@ <h3 ng-hide="!selectedArtist.album.length">Albums<span ng-hide="!selectedArtist"
</ol>
</div>

<div class="clearfix"></div>

</div>

<div id="albumlist" ng-hide="!selectedArtist.album.length" ng-class="SelectedAlbumDisplay.id" inf-scroll="loadMoreAlbums()">

<div ng-if="settings.coverflow" id="coverflow"></div>
<div ng-if="settings.coverflow">
<div id="coverflow"></div>
<script type="text/javascript">
coverflow('coverflow').setup(
{
Expand All @@ -43,49 +39,50 @@ <h3 ng-hide="!selectedArtist.album.length">Albums<span ng-hide="!selectedArtist"
height: 240
});
</script>
</div>

<div ng-if="!settings.coverflow">
<div ng-repeat="o in selectedArtist.album" class="album col-md-3 col-xs-6">
<div class="thumbnail" ng-class="{'playing': o.id == playingSong.albumId}" id="{{o.id}}" parentid="{{o.parent}}">

<a ui-sref=".album({albumId: o.id})" stop-event="click">
<div class="row" ng-if="!settings.coverflow" id="albumlist" ng-hide="!selectedArtist.album.length" ng-class="SelectedAlbumDisplay.id" inf-scroll="loadMoreAlbums()">

<img ng-src="{{o.coverartthumb}}" src="/images/albumdefault_160.jpg" err-src="/images/albumdefault_160.jpg">
</a>
<div ng-repeat="o in selectedArtist.album" class="album col-md-3 col-xs-6">
<div class="thumbnail" ng-class="{'playing': o.id == playingSong.albumId}" id="{{o.id}}" parentid="{{o.parent}}">

<div id="albumactions" class="btn-group btn-group-xs">
<a ui-sref=".album({albumId: o.id})" stop-event="click">

<button type="button" class="add btn btn-default" title="Add To Play Queue" ng-click="getSongs(o.id, 'add')">
<span class="glyphicon glyphicon-plus"></span>
</button>
<img ng-src="{{o.coverartthumb}}" src="/images/albumdefault_160.jpg" err-src="/images/albumdefault_160.jpg">
</a>

<button type="button" class="play btn btn-default" title="Play" ng-click="getSongs(o.id, 'play')" ui-sref=".album({albumId: o.id})">
<span class="glyphicon glyphicon-play"></span>
</button>
<div id="albumactions" class="btn-group btn-group-xs">

<button type="button" class="btn btn-default" title="Favorite" ng-class="{'favorite': o.starred, 'rate': !o.starred}" ng-click="updateFavorite(o)">
<span class="glyphicon" ng-class="{'glyphicon-star': o.starred, 'glyphicon-star-empty': !o.starred}"></span>
</button>
<button type="button" class="add btn btn-default" title="Add To Play Queue" ng-click="getSongs(o.id, 'add')">
<span class="glyphicon glyphicon-plus"></span>
</button>

<button type="button" class="download btn btn-default" ng-click="download(o.id)" title="Download">
<span class="glyphicon glyphicon-download"></span>
</button>
<button type="button" class="play btn btn-default" title="Play" ng-click="getSongs(o.id, 'play')" ui-sref=".album({albumId: o.id})">
<span class="glyphicon glyphicon-play"></span>
</button>

<button type="button" class="btn btn-default info hover" title="{{'Created: ' + o.date}}">
<span class="glyphicon glyphicon-info-sign"></span>
</button>
<button type="button" class="btn btn-default" title="Favorite" ng-class="{'favorite': o.starred, 'rate': !o.starred}" ng-click="updateFavorite(o)">
<span class="glyphicon" ng-class="{'glyphicon-star': o.starred, 'glyphicon-star-empty': !o.starred}"></span>
</button>

</div>
<button type="button" class="download btn btn-default" ng-click="download(o.id)" title="Download">
<span class="glyphicon glyphicon-download"></span>
</button>

<div class="caption" ng-class="{'bg-info': selectedAlbum.id == o.id}">
<span class="year label label-default" ng-bind="o.year"></span>
<span class="h5" title="{{o.name}}">{{o.name | addEllipsis}}</span>
<br/>
<span class="h6 artist" ng-bind="o.artist">Unknown</span>
</div>
<button type="button" class="btn btn-default info hover" title="{{'Created: ' + o.date}}">
<span class="glyphicon glyphicon-info-sign"></span>
</button>

</div>

<div class="caption" ng-class="{'bg-info': selectedAlbum.id == o.id}">
<span class="year label label-default" ng-bind="o.year"></span>
<span class="h5" title="{{o.name}}">{{o.name | addEllipsis}}</span>
<br/>
<span class="h6 artist" ng-bind="o.artist">Unknown</span>
</div>


</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/assets/partials/library.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

<div id="SubsonicIndex" class="col-md-3">


<div id="FolderControls" class="row">

<div class="col-xs-7">
<select id="MusicFolders" class="form-control" ng-model="SelectedMusicFolder" ng-options="o as o.name for o in MusicFolders">
<option value="">All Folders</option>
Expand Down
55 changes: 31 additions & 24 deletions app/assets/partials/player.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div ng-controller="PlayerCtrl" id="PlayerWrapper" >
<!-- Audio Player -->
<div ng-controller="PlayerCtrl" id="PlayerWrapper" class="row">

<!-- Player Controls -->
<div id="PlayerControls" class="col-md-4 col-sm-6 col-xs-12">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary" id="PreviousTrack" title="Previous Track" ng-click="previousTrack()">
Expand All @@ -21,33 +22,39 @@

<div class="col-md-5 col-sm-6 col-xs-12">

<div class="nowplaying">
<div class="nowplaying row">

<div class="col-xs-9">
<span class="h5 song" ng-bind="playingSong.name"></span>
<small class="by text-muted">by</small>
<span class="artist" ng-bind="playingSong.artist"></span>
<br/>
<small class="on text-muted">on</small>
<span class="album" ng-bind="playingSong.album"></span>
<br/>
<span class="specs" ng-bind-html="specs"></span>

<div id="elapsed">
<small id="currentTime"></small>/<span class="duration">{{playingSong.time}}</span>
</div>
</div>

<span class="h5 song" ng-bind="playingSong.name"></span>
<small class="by text-muted">by</small>
<span class="artist" ng-bind="playingSong.artist"></span>
<br/>
<small class="on text-muted">on</small>
<span class="album" ng-bind="playingSong.album"></span>
<br/>
<span class="specs" ng-bind-html="specs"></span>
<!-- cover art of current song -->
<div class="coverart col-xs-3" ng-href="{{playingSong.coverartfull}}" back-img="{{playingSong.coverartthumb}}" alt="{{playingSong.artist}} - {{playingSong.album}}" fancybox></div>

<div id="elapsed">
<small id="currentTime"></small>/<span class="duration">{{playingSong.time}}</span>
</div>
</div>

<!-- Empty audio element that is filled dynamically -->
<audio id="audiojs" src="#" type="audio/mpeg">
<object width="0" height="0" type="application/x-silverlight-2" data="silverlightmediaelement.xap">
<param name="movie" value="silverlightmediaelement.xap" />
</object>
</audio>

</div>

<div class="col-md-3 col-xs-12" id="progress" ng-click="seek($event)">
<div id="progress_completed"></div>
<div class="col-md-3 col-xs-12" ng-click="seek($event)" id="progress">
<div id="progress_completed"></div>
</div>

<!-- Empty audio element that is filled dynamically -->
<audio id="audiojs" src="#" type="audio/mpeg">
<object width="0" height="0" type="application/x-silverlight-2" data="silverlightmediaelement.xap">
<param name="movie" value="silverlightmediaelement.xap" />
</object>
</audio>
</div>
<div class="clearfix"></div>

7 changes: 7 additions & 0 deletions app/assets/partials/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,13 @@ <h5>Notifications</h5>
Now Playing</label>
</div>

<div class="checkbox">
<label for="Coverflow">
<input type="checkbox" id="Coverflow" name="Coverflow" value="1" title="Enable Coverflow" ng-model="settings.coverflow" />
Coverflow
</label>
</div>

<span>Local Storage</span>

<div class="checkbox">
Expand Down
9 changes: 9 additions & 0 deletions app/scripts/back-img.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
ngSub.directive('backImg', function(){
return function(scope, element, attrs){
attrs.$observe('backImg', function(value) {
element.css({
'background-image': 'url(' + value +')',
});
});
};
});
Loading

0 comments on commit 03289b0

Please sign in to comment.