Skip to content

Commit 49c437e

Browse files
jaedbjaedb
authored
Merge pull request #106 from jaedb/develop
Hotfix
2 parents 60ff835 + e50d28d commit 49c437e

13 files changed

Lines changed: 219 additions & 161 deletions

File tree

‎mopidy_spotmop/__init__.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
from services.auth import auth
1212
from mopidy import config, ext
1313

14-
__version__ = '2.7.2'
14+
__version__ = '2.7.3'
1515
__ext_name__ = 'spotmop'
1616
__verbosemode__ = False
1717

‎mopidy_spotmop/static/app.js‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30378,7 +30378,7 @@ angular.module('spotmop.browse.album', [])
3037830378

3037930379
$scope.album = response;
3038030380
$scope.album.totalTracks = response.tracks.total;
30381-
$scope.album.images = $filter('sizedImages')(response.images);
30381+
$scope.album.images = response.images;
3038230382
$scope.tracklist = response.tracks;
3038330383
$scope.tracklist.type = 'track';
3038430384
$scope.tracklist.tracks = response.tracks.items;
@@ -32297,7 +32297,7 @@ angular.module('spotmop.directives', [])
3229732297
}
3229832298

3229932299
},
32300-
template: '<div class="image animate"></div>'
32300+
template: '<div class="thumbnail-image image animate"></div>'
3230132301
};
3230232302
}])
3230332303

@@ -32517,7 +32517,11 @@ angular.module('spotmop.directives', [])
3251732517
);
3251832518

3251932519
// setup initial variables
32520-
var scrollTop = 0;
32520+
var state = {
32521+
scrollTop: 0,
32522+
windowWidth: $(window).width(),
32523+
windowHeight: $(window).height()
32524+
};
3252132525
var canvasDOM = document.getElementById('backgroundparallax');
3252232526
var context = canvasDOM.getContext('2d');
3252332527
var url = '';
@@ -32535,7 +32539,7 @@ angular.module('spotmop.directives', [])
3253532539
width: 0,
3253632540
height: 0,
3253732541
url: url
32538-
}
32542+
};
3253932543

3254032544
// create our new image object (to be plugged into canvas)
3254132545
var imageObject = new Image();
@@ -32588,7 +32592,7 @@ angular.module('spotmop.directives', [])
3258832592
}
3258932593

3259032594
// figure out where we want the image to be, based on scroll position
32591-
var percent = Math.round( scrollTop / canvasHeight * 100 );
32595+
var percent = Math.round( state.scrollTop / canvasHeight * 100 );
3259232596
var position = Math.round( (canvasHeight / 2) * (percent/100) ) - 100;
3259332597

3259432598
image.x = ( canvasWidth / 2 ) - ( image.width / 2 );
@@ -32605,18 +32609,25 @@ angular.module('spotmop.directives', [])
3260532609

3260632610
var bannerPanel = $(document).find('.intro');
3260732611

32608-
// if we've scrolled
32609-
if( scrollTop != $(document).scrollTop() ){
32610-
scrollTop = $(document).scrollTop();
32611-
32612-
var bannerHeight = bannerPanel.outerHeight();
32612+
// if we've scrolled or resized
32613+
if(
32614+
state.scrollTop != $(document).scrollTop() ||
32615+
state.windowWidth != $(window).width() ||
32616+
state.windowHeight != $(window).height() ){
32617+
32618+
// update our state
32619+
state.scrollTop = $(document).scrollTop();
32620+
state.windowWidth = $(window).width();
32621+
state.windowHeight = $(window).height();
32622+
32623+
var bannerHeight = bannerPanel.outerHeight();
3261332624

32614-
// and if we're within the bounds of our document
32615-
// this helps prevent us animating when the objects in question are off-screen
32616-
if( scrollTop < bannerHeight ){
32617-
positionArtistBackground( image );
32625+
// and if we're within the bounds of our document
32626+
// this helps prevent us animating when the objects in question are off-screen
32627+
if( state.scrollTop < bannerHeight ){
32628+
positionArtistBackground( image );
32629+
}
3261832630
}
32619-
}
3262032631
});
3262132632
},
3262232633
10

‎mopidy_spotmop/static/app.min.js‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mopidy_spotmop/static/app/browse/album/template.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,21 @@
33
<span class="menu-reveal-trigger" ng-click="showMenu()"><i class="fa fa-bars"></i></span>
44

55
<div class="asset-sidebar">
6-
7-
<div
8-
class="thumbnail-wrapper album slim-intro-wrapper"
9-
draggable="false"
10-
candrag
11-
dragobj="album">
6+
7+
<div class="thumbnail-wrapper slim-intro-wrapper">
128

13-
<div class="thumbnail album" ng-if="album.images.medium" style="background-image: url({{ album.images.medium }});"></div>
14-
15-
<div class="thumbnail album placeholder" ng-if="!album.images || !album.images.medium "></div>
9+
<div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="album">
10+
<thumbnail size="medium" images="album.images"></thumbnail>
11+
</div>
1612

17-
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
18-
<thumbnail size="medium" images="album.images"></thumbnail>
19-
<h1 ng-bind="album.name"></h1>
13+
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
14+
<thumbnail size="medium" images="album.images"></thumbnail>
15+
<h1 ng-bind="album.name"></h1>
2016
<h2 class="description">
2117
<artistlist artists="album.artists" sentence></artistlist>
2218
</h2>
23-
</div>
19+
</div>
20+
2421
</div>
2522

2623
<div class="clear-left"><!-- clear --></div>

‎mopidy_spotmop/static/app/browse/playlist/template.html‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,13 @@
55
<div class="asset-sidebar">
66

77
<div class="thumbnail-wrapper slim-intro-wrapper">
8-
9-
<div class="thumbnail playlist"
10-
ng-if="playlist.images.length > 0"
11-
ng-repeat="image in playlist.images | limitTo:1"
12-
style="background-image: url({{ image.url }});"
13-
draggable="false"
14-
candrag
15-
dragobj="playlist"
16-
></div>
17-
<div class="thumbnail playlist placeholder" ng-if=" !playlist.images || playlist.images.length <= 0"></div>
8+
9+
<div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="playlist">
10+
<thumbnail size="medium" images="playlist.images"></thumbnail>
11+
</div>
1812

1913
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
20-
<thumbnail ng-if="playlist.images" size="medium" images="playlist.images"></thumbnail>
14+
<thumbnail size="medium" images="playlist.images"></thumbnail>
2115
<h1 ng-bind="playlist.name"></h1>
2216
<h2 class="description" ng-bind-html="playlist.description" ng-show="playlist.description">Loading</h2>
2317
</div>
@@ -82,7 +76,7 @@ <h2 class="description" ng-bind-html="playlist.description" ng-show="playlist.de
8276
</div>
8377
<div class="info-item">
8478
<a class="playlist-owner" ui-sref="browse.user({ uri: playlist.owner.uri })">
85-
<span class="thumbnail animate" ng-repeat="image in playlist.owner.images | limitTo: 1 : playlist.owner.images.length-1" style="background-image: url('{{ image.url }}');"><span class="border animate"></span></span>
79+
<thumbnail size="small" images="playlist.owner.images"></thumbnail>
8680
<span class="name" ng-bind="playlist.owner.display_name"></span>
8781
</a>
8882
</div>

‎mopidy_spotmop/static/assets/css/style.css‎

Lines changed: 63 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -649,8 +649,6 @@ body.dragging .body * {
649649
#dropzones .dropzone.queue .dropzone.add-to-queue-next .label {
650650
padding: 0;
651651
}
652-
653-
654652

655653

656654

@@ -1282,13 +1280,9 @@ h1 .flag {
12821280
width: 50px;
12831281
height: 50px;
12841282
border-radius: 100px;
1283+
padding: 0;
12851284
float: left;
12861285
margin-right: 14px;
1287-
background-image: url('../svg/no-image.svg');
1288-
background-color: #E9E9E9;
1289-
background-repeat: no-repeat;
1290-
background-position: 50% 50%;
1291-
background-size: cover;
12921286
border: 2px solid #f5f5f5;
12931287
}
12941288

@@ -1655,6 +1649,23 @@ body.dragging .tracklist .track.dropping {
16551649
width: 40%;
16561650
}
16571651
}
1652+
1653+
1654+
/**
1655+
* Thumbnail images
1656+
* Just the default settings, which will be manipulated on a contextual basis
1657+
**/
1658+
1659+
.thumbnail-image.image {
1660+
width: 100%;
1661+
padding-bottom: 100%;
1662+
margin: 0;
1663+
background-image: url('../svg/no-image.svg');
1664+
background-color: #E9E9E9;
1665+
background-position: 50% 50%;
1666+
background-size: cover;
1667+
}
1668+
16581669

16591670

16601671
/**
@@ -1912,15 +1923,11 @@ slider .item-container > .square-panel {
19121923
padding: 40px 20px 40px 20px;
19131924
}
19141925

1915-
.playlist-page .playlist.thumbnail,
1916-
.album-page .album.thumbnail {
1926+
.playlist-page .thumbnail-wrapper .image,
1927+
.album-page .thumbnail-wrapper .image {
19171928
width: 100%;
19181929
padding-bottom: 100%;
19191930
margin: 0;
1920-
background-image: url('../svg/no-image.svg');
1921-
background-color: #E9E9E9;
1922-
background-position: 50% 50%;
1923-
background-size: cover;
19241931
}
19251932

19261933
.playlist-page h1,
@@ -1963,8 +1970,6 @@ slider .item-container > .square-panel {
19631970
border: 0 !important;
19641971
}
19651972

1966-
.playlist-owner:hover .thumbnail .border { border-color: #08d58f; }
1967-
19681973
.playlist-owner .name {
19691974
display: block;
19701975
font-size: 15px;
@@ -1973,7 +1978,19 @@ slider .item-container > .square-panel {
19731978
padding-top: 5px;
19741979
}
19751980

1976-
.playlist-owner .thumbnail .border {
1981+
.playlist-owner .image {
1982+
border-radius: 60px;
1983+
display: block;
1984+
float: left;
1985+
height: 30px;
1986+
margin-right: 8px;
1987+
width: 30px;
1988+
padding: 0;
1989+
position: relative;
1990+
}
1991+
1992+
.playlist-owner .image::after {
1993+
content: '';
19771994
display: block;
19781995
position: absolute;
19791996
top: -1px;
@@ -1985,19 +2002,8 @@ slider .item-container > .square-panel {
19852002
z-index: 2;
19862003
}
19872004

1988-
.playlist-owner .thumbnail {
1989-
background-color: #e9e9e9;
1990-
background-image: url("../svg/no-image.svg");
1991-
background-position: 50% 50%;
1992-
background-repeat: no-repeat;
1993-
background-size: cover;
1994-
border-radius: 60px;
1995-
display: block;
1996-
float: left;
1997-
height: 30px;
1998-
margin-right: 8px;
1999-
width: 30px;
2000-
position: relative;
2005+
.playlist-owner:hover .image::after {
2006+
border-color: #08d58f;
20012007
}
20022008

20032009

@@ -2072,10 +2078,7 @@ slider .item-container > .square-panel {
20722078
.artist-page .info-panel .thumbnail-wrapper .image {
20732079
width: 250px;
20742080
height: 250px;
2075-
background-image: url('../svg/no-image.svg');
2076-
background-color: #E9E9E9;
2077-
background-size: cover;
2078-
background-position: 50% 50%;
2081+
padding: 0;
20792082
position: absolute;
20802083
bottom: 0;
20812084
left: 0;
@@ -3394,6 +3397,30 @@ input[type="submit"]{
33943397
#player .slider.progress:hover .track {
33953398
height: 2px;
33963399
}
3400+
3401+
3402+
/**
3403+
* Dropzones
3404+
**/
3405+
3406+
#dropzones .dropzone > .liner {
3407+
padding-top: 19px;
3408+
padding-bottom: 19px;
3409+
font-size: 15px;
3410+
}
3411+
#dropzones .dropzone .label {
3412+
padding-top: 6px;
3413+
}
3414+
#dropzones .dropzone .menu-item {
3415+
font-size: 12px;
3416+
padding: 4px 12px;
3417+
}
3418+
#dropzones .dropzone.queue .dropzone.add-to-queue {
3419+
padding: 4px 20px 4px;
3420+
}
3421+
#dropzones .dropzone.queue .dropzone.add-to-queue-next {
3422+
padding: 4.5px 20px;
3423+
}
33973424

33983425
}
33993426

@@ -3682,7 +3709,7 @@ input[type="submit"]{
36823709
position: relative;
36833710
}
36843711

3685-
.thumbnail-wrapper.slim-intro-wrapper > .thumbnail {
3712+
.thumbnail-wrapper.slim-intro-wrapper .primary-thumbnail > .image {
36863713
opacity: 0.25;
36873714
padding-bottom: 0;
36883715
width: auto;
@@ -3704,7 +3731,7 @@ input[type="submit"]{
37043731
padding: 60px 20px 40px;
37053732
}
37063733

3707-
.thumbnail-wrapper.slim-intro-wrapper .slim-intro .thumbnail {
3734+
.thumbnail-wrapper.slim-intro-wrapper .slim-intro .image {
37083735
display: block;
37093736
width: 180px;
37103737
height: 180px;
@@ -3734,7 +3761,7 @@ input[type="submit"]{
37343761
margin-top: -20px;
37353762
}
37363763

3737-
.artist-page .info-panel .thumbnail {
3764+
.artist-page .info-panel .image {
37383765
display: none;
37393766
}
37403767

‎mopidy_spotmop/static/assets/css/style.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/browse/album/controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ angular.module('spotmop.browse.album', [])
130130

131131
$scope.album = response;
132132
$scope.album.totalTracks = response.tracks.total;
133-
$scope.album.images = $filter('sizedImages')(response.images);
133+
$scope.album.images = response.images;
134134
$scope.tracklist = response.tracks;
135135
$scope.tracklist.type = 'track';
136136
$scope.tracklist.tracks = response.tracks.items;

‎src/app/browse/album/template.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,21 @@
33
<span class="menu-reveal-trigger" ng-click="showMenu()"><i class="fa fa-bars"></i></span>
44

55
<div class="asset-sidebar">
6-
7-
<div
8-
class="thumbnail-wrapper album slim-intro-wrapper"
9-
draggable="false"
10-
candrag
11-
dragobj="album">
6+
7+
<div class="thumbnail-wrapper slim-intro-wrapper">
128

13-
<div class="thumbnail album" ng-if="album.images.medium" style="background-image: url({{ album.images.medium }});"></div>
14-
15-
<div class="thumbnail album placeholder" ng-if="!album.images || !album.images.medium "></div>
9+
<div class="drag-wrapper primary-thumbnail" draggable="false" candrag dragobj="album">
10+
<thumbnail size="medium" images="album.images"></thumbnail>
11+
</div>
1612

17-
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
18-
<thumbnail size="medium" images="album.images"></thumbnail>
19-
<h1 ng-bind="album.name"></h1>
13+
<div class="slim-intro mobile-show" ng-if="mediumScreen()">
14+
<thumbnail size="medium" images="album.images"></thumbnail>
15+
<h1 ng-bind="album.name"></h1>
2016
<h2 class="description">
2117
<artistlist artists="album.artists" sentence></artistlist>
2218
</h2>
23-
</div>
19+
</div>
20+
2421
</div>
2522

2623
<div class="clear-left"><!-- clear --></div>

0 commit comments

Comments
 (0)