Merge pull request #249 from BuildFire/add-bg-to-cdn

fix(bg-image):use resize function to add image to cdn

Author: mas-iota

widget/controllers/widget.nowplaying.controller.js

@@ -290,7 +290,7 @@
                     // Prevent the repetition of events by clearing all previous occurrences, as repeated events tend to occur when the user plays multiple audio files.
                     $rootScope.activePlayerEvents.clear();
                 }
-                $rootScope.activePlayerEvents = audioPlayer.onEvent(function (e) {                 
+                $rootScope.activePlayerEvents = audioPlayer.onEvent(function (e) {
                     switch (e.event) {
                         case 'play':
                             NowPlaying.playing = true;
@@ -413,7 +413,7 @@
                     NowPlaying.currentTrack.title = media.data.title;
                     if ($rootScope.seekTime) NowPlaying.currentTrack.startAt = $rootScope.seekTime;
 
-                    NowPlaying.currentTrack.backgroundImage = NowPlaying.currentTrack.backgroundImage ? NowPlaying.currentTrack.backgroundImage : './assets/images/now-playing.png';
+                    NowPlaying.currentTrack.backgroundImage = NowPlaying.currentTrack.backgroundImage ? NowPlaying.cropImage(NowPlaying.currentTrack.backgroundImage) : './assets/images/now-playing.png';
                     NowPlaying.currentTrack.backgroundImage = CSS.escape(NowPlaying.currentTrack.backgroundImage);
                     if (!$scope.$$phase) {
                         $scope.$digest();
@@ -435,12 +435,12 @@
                         $scope.$digest();
                         $scope.$apply();
                     });
-                    
+
                     buildfire.services.media.audioPlayer.isPaused((err, isPaused) => {
                         if (err) return console.err(err);
-                        
+
                         NowPlaying.playing = !isPaused;
-                    });                    
+                    });
                     audioPlayer.getCurrentTrack((track) => {
                         if (
                             track &&
@@ -856,7 +856,10 @@
                 NowPlaying.closeMoreInfoOverlay = function () {
                     NowPlaying.openMoreInfo = false;
                 };
-
+                NowPlaying.cropImage = function(url) {
+                    if (!url) return;
+                    return buildfire.imageLib.resizeImage(url, { size: "1080", aspect:'16:9' })
+                }
                 NowPlaying.addEvents = function (e, i, toggle, track) {
                     toggle ? track.swiped = true : track.swiped = false;
                 };
@@ -1103,17 +1106,17 @@
                         $scope.$digest();
                     }
                 };
-                
-                
+
+
                 //! --------------------------- End : Playback options --------------------------------------
 
                 /**
                  * progress bar style
-                 * @param {Number} value 
+                 * @param {Number} value
                  */
                 NowPlaying.progressBarStyle = function (value) {
                     const percentage = NowPlaying.duration? Math.round(((value / NowPlaying.duration) * 100)) :value;
-                    
+
                     if (percentage) {
                         document.documentElement.style.setProperty('--played-tracker-percentage', `${percentage}%`);
                     }
@@ -1129,7 +1132,7 @@
                         shufflePlaylist: false,
                         volume: 1,
                     };
-                
+
                     // Compare each key in the settings object with the initialSettings
                     for (const key in settings) {
                         if ((settings.hasOwnProperty(key) && settings[key] === initialSettings[key])) {

widget/templates/layouts/now-playing.html

@@ -259,4 +259,4 @@ <h4 class="margin-zero ellipsis whiteTheme">{{NowPlaying.currentTrack.title}}</h
             </div>
         </div>
     </div>
-</div>
+</div>