From b3cb742a24cbf850f276ee8563760e604446ecf6 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Mon, 25 Sep 2023 02:11:18 +0300 Subject: [PATCH 01/14] playback rate options --- widget/assets/css/widget.app.css | 12 +++- widget/controllers/widget.home.controller.js | 61 ++++++++++++++++++++ widget/index.html | 4 +- 3 files changed, 75 insertions(+), 2 deletions(-) diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index 78bb10d..c76aa16 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -291,10 +291,20 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .holder.now-playing .media-header-link a{ color:#fff; } +.holder.now-playing .media-player-action-btns { + display: flex; + justify-content: center; + align-items: center; +} .holder.now-playing .media-player-action-btns .icon{ font-size:25px; } -.holder.now-playing .media-player-action-btns .icon + .icon{ +.holder.now-playing .media-player-action-btns .playback-speed{ + margin-left:60px; +} +.holder.now-playing .media-player-action-btns .icon + .icon, +.holder.now-playing .media-player-action-btns .playback-speed + .icon +{ margin-left:60px; } .holder.now-playing .media-player-btns .icon.icon-sm{ diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 664609d..244094c 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -12,6 +12,33 @@ WidgetHome.volume = 1; WidgetHome.isRangeDisabled = true; $rootScope.openPlaylist = false; + const playbackSpeedOptions = [ + { + text: '
0.5x
', + displayText: '0.5x', + value: 0.5, + default: false + }, + { + text: '
1.0x
', + displayText: '1.0x', + value: 1, + default: true + }, + { + text: '
1.5x
', + displayText: '1.5x', + value: 1.5, + default: false + }, + { + text: '
2.0x
', + displayText: '2.0x', + value: 2, + default: false + }, + ]; + var audioPlayer = Buildfire.services.media.audioPlayer; WidgetHome.playList = []; audioPlayer.getPlaylist((err,data) =>{ @@ -41,6 +68,9 @@ audioPlayer.settings.get(function (err, data) { console.log('Got player settings first time-----------------------', err, data); if (data) { + // todo : until Mahmoud done + data.playbackRate = 1; + // todo End ----------------- WidgetHome.settings = data; if (!$scope.$$phase) { $scope.$digest(); @@ -316,6 +346,35 @@ WidgetHome.openMoreInfo = false; }; + //! --------------------------- Playback options -------------------------------------- + WidgetHome.openPlaybackDrawer = function () { + buildfire.components.drawer.open( + { + content: 'Playback Speed', + enableFilter: false, + listItems: playbackSpeedOptions, + }, + (err, result) => { + if (err) return console.error(err); + setPlaybackSpeed(result.value); + buildfire.components.drawer.closeDrawer(); + } + ); + }; + + const setPlaybackSpeed = function (value) { + if (WidgetHome.settings && value) { + WidgetHome.settings.playbackRate = value; + audioPlayer.settings.set(WidgetHome.settings); + // todo : uncomment this line after Mahmoud work done + // audioPlayer.setPlaybackRate(value); + $scope.$digest(); + } + }; + + + //! --------------------------- End : Playback options -------------------------------------- + /** * Track Smaple * @param title @@ -342,6 +401,7 @@ * @param loop * @param autoJumpToLastPosition * @param shufflePlaylist + * @param playbackRate * @constructor */ function AudioSettings(settings) { @@ -350,6 +410,7 @@ this.autoJumpToLastPosition = settings.autoJumpToLastPosition; //If a track has [lastPosition] use it to start playing the audio from there this.shufflePlaylist = settings.shufflePlaylist;// shuffle the playlist this.isPlayingCurrentTrack = settings.isPlayingCurrentTrack;// Tells whether current is playing or not + this.playbackRate = settings.playbackRate;// Track playback speed rate } diff --git a/widget/index.html b/widget/index.html index 1ce50b9..35368cc 100644 --- a/widget/index.html +++ b/widget/index.html @@ -17,6 +17,7 @@ + @@ -112,8 +113,9 @@

No Audio Currently Selected

- + {{WidgetHome.settings.playbackRate | number:'1'}}x +
From 9db654ee4eb2eb6cf3761bd1ac2d76ae283e14f3 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Mon, 25 Sep 2023 22:59:22 +0300 Subject: [PATCH 02/14] Feat: player UI enhancements --- widget/assets/css/widget.app.css | 97 ++++++++++++++------ widget/assets/icons/ic_fast_forward.svg | 14 +++ widget/assets/icons/ic_fast_rewind.svg | 14 +++ widget/assets/icons/ic_pause_2.svg | 9 ++ widget/assets/icons/ic_play2.svg | 9 ++ widget/assets/icons/ic_playlist.svg | 9 ++ widget/controllers/widget.home.controller.js | 19 ++++ widget/index.html | 72 ++++++++++----- 8 files changed, 190 insertions(+), 53 deletions(-) create mode 100644 widget/assets/icons/ic_fast_forward.svg create mode 100644 widget/assets/icons/ic_fast_rewind.svg create mode 100644 widget/assets/icons/ic_pause_2.svg create mode 100644 widget/assets/icons/ic_play2.svg create mode 100644 widget/assets/icons/ic_playlist.svg diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index c76aa16..69e835b 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -1,3 +1,8 @@ +:root { + --played-tracker-percentage: 0%; + --isPlaying: 0; +} + /* Plugin CSS */ .media-button-container{ @@ -6,12 +11,35 @@ justify-content: center; align-items: center; } +.media-button-container .play-pause-button { + width: 64px; + height: 64px; + border-radius: 50%; + padding: 0 !important; +} +.media-button-container .play-pause-button div{ + width: 62px; + border-radius: 50%; + height: 64px; + display: flex; + justify-content: center; + align-items: center; +} + +.media-button-container .active{ + fill: var(--bf-theme-primary); +} +.media-button-container .not-active{ + fill: #FFF; +} + .media-container{ display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100% !important; + gap: 24px; } .media-center-plugin.layout2 .people-banner .people-bg{ @@ -148,7 +176,7 @@ } .list-layout .list-item-media .list-media-holder{ margin:0 auto; - max-width:240px; + max-width:280px; } .layout4 .list-layout .list-item-media .list-media-holder{ max-width:200px; @@ -248,7 +276,7 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde position:absolute; width:300px; height:530px; - top:50%; + top:45%; margin-top:-264px; left:50%; margin-left:-150px; @@ -257,17 +285,19 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .more-info .media-holder{ display:table; text-align:center; - width:240px; - height:240px; - max-width:240px; - max-height:240px; + width:280px; + height:280px; + max-width:280px; + max-height:280px; margin:0 auto; } .holder.now-playing .media-holder .media-inner, .more-info .media-holder .media-inner{ - max-width:240px; - max-height:240px; - display:table-cell; + max-width:280px; + max-height:280px; + display:table; + width: 280px; + height: 280px; vertical-align:middle; } .media-player-more-info .media-holder, @@ -277,8 +307,10 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde } .holder.now-playing .media-holder .media-inner img, .more-info .media-holder .media-inner img{ - max-height:100%; - width:auto; + max-width: 100%; + max-height: 100%; + width: 100%; + height: 100%; } .holder.now-playing .media-holder .media-inner img{ max-width:100%; @@ -295,18 +327,19 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde display: flex; justify-content: center; align-items: center; + padding-top: 40px; + gap: 16px; } .holder.now-playing .media-player-action-btns .icon{ font-size:25px; } -.holder.now-playing .media-player-action-btns .playback-speed{ - margin-left:60px; -} -.holder.now-playing .media-player-action-btns .icon + .icon, -.holder.now-playing .media-player-action-btns .playback-speed + .icon -{ - margin-left:60px; + + +.holder.now-playing .media-player-action-btns span { + width: 25%; + cursor: pointer; } + .holder.now-playing .media-player-btns .icon.icon-sm{ font-size:22px; position:relative; @@ -438,7 +471,7 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .audio-plyer input[type=range] { -webkit-appearance: none; - margin: 13px 0; + margin: 20px 0; width: 100%; } @@ -448,38 +481,44 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .audio-plyer input[type=range]::-webkit-slider-runnable-track { width: 100%; - height: 3px; + height: 6px; cursor: pointer; + border-radius: 12px; animate: 0.2s; - background: #ffffff; + background: -webkit-gradient(linear, left top, right top, from(var(--bf-theme-primary)), color-stop(var(--bf-theme-primary)), color-stop(#fff), to(white)); + background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) calc(var(--played-tracker-percentage) - 2%), #fff calc(var(--played-tracker-percentage) - 2%), white 100%); + background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) calc(var(--played-tracker-percentage) - 2%), #fff calc(var(--played-tracker-percentage) - 2%), white 100%); } + .audio-plyer input[type=range]::-webkit-slider-thumb { - height: 16px; - width: 16px; - background: #ffffff; + height: 20px; + width: 20px; + background: var(--bf-theme-primary); cursor: pointer; -webkit-appearance: none; margin-top: -7px; border-radius: 100%; + position: absolute; + left: calc(var(--played-tracker-percentage) - 4%); + transition: left calc(.3s * var(--isPlaying)) ease; } -.audio-plyer input[type=range]:focus::-webkit-slider-runnable-track { - background: #367ebd; -} .audio-plyer input[type=range]::-moz-range-track { width: 100%; height: 10px; cursor: pointer; animate: 0.2s; - background: #ffffff; + background: -webkit-gradient(linear, left top, right top, from(var(--bf-theme-primary)), color-stop(var(--bf-theme-primary)), color-stop(#fff), to(white)); + background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); } .audio-plyer input[type=range]::-moz-range-thumb { height: 20px; width: 20px; - background: #ffffff; + background: var(--bf-theme-primary); cursor: pointer; -webkit-appearance: none; margin-top: -5px; diff --git a/widget/assets/icons/ic_fast_forward.svg b/widget/assets/icons/ic_fast_forward.svg new file mode 100644 index 0000000..fda1229 --- /dev/null +++ b/widget/assets/icons/ic_fast_forward.svg @@ -0,0 +1,14 @@ + + + + ic/ic_fast_forward + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/widget/assets/icons/ic_fast_rewind.svg b/widget/assets/icons/ic_fast_rewind.svg new file mode 100644 index 0000000..6cf7172 --- /dev/null +++ b/widget/assets/icons/ic_fast_rewind.svg @@ -0,0 +1,14 @@ + + + + ic/ic_fast_rewind + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/widget/assets/icons/ic_pause_2.svg b/widget/assets/icons/ic_pause_2.svg new file mode 100644 index 0000000..a23459c --- /dev/null +++ b/widget/assets/icons/ic_pause_2.svg @@ -0,0 +1,9 @@ + + + + ic/ic_pause_2 + Created with Sketch. + + + + \ No newline at end of file diff --git a/widget/assets/icons/ic_play2.svg b/widget/assets/icons/ic_play2.svg new file mode 100644 index 0000000..a816a03 --- /dev/null +++ b/widget/assets/icons/ic_play2.svg @@ -0,0 +1,9 @@ + + + + ic/ic_play2 + Created with Sketch. + + + + \ No newline at end of file diff --git a/widget/assets/icons/ic_playlist.svg b/widget/assets/icons/ic_playlist.svg new file mode 100644 index 0000000..2305f26 --- /dev/null +++ b/widget/assets/icons/ic_playlist.svg @@ -0,0 +1,9 @@ + + + + ic/ic_playlist + Created with Sketch. + + + + \ No newline at end of file diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 244094c..85ed040 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -92,6 +92,7 @@ } WidgetHome.currentTime = e.data.currentTime; WidgetHome.duration = e.data.duration; + WidgetHome.progressBarStyle(e.data.currentTime); break; case 'audioEnded': WidgetHome.playing = false; @@ -446,5 +447,23 @@ }*/ }; + /** + * progress bar style + * @param {Number} value + */ + WidgetHome.progressBarStyle = function (value) { + const percentage = (value / WidgetHome.duration) * 100; + if (percentage) { + document.documentElement.style.setProperty( + '--played-tracker-percentage', + `${percentage}%` + ); + document.documentElement.style.setProperty( + '--isPlaying', + value < 0.5 ? 0 : 1 + ); + console.log(document.documentElement.style.getPropertyValue('--value')); + } + }; }]); })(window.angular, window); \ No newline at end of file diff --git a/widget/index.html b/widget/index.html index 35368cc..df1ed66 100644 --- a/widget/index.html +++ b/widget/index.html @@ -52,9 +52,6 @@ 'width': '110%', 'z-index': '0'}">
-
- Open Playlist -
No Audio Currently Selected
-
- - - {{WidgetHome.settings.playbackRate | number:'1'}}x - -
-
-
- +
+
+ + + + + + + + + +
- + + pause +
- - +
- + + pause +
-
- - - +
+ + + + + + + + + +
+
+ + {{WidgetHome.settings.playbackRate | number:'1'}}x + + playlist + + + +
From ffffe226be88c91ddaf0cda259d12fa2b4de044c Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Tue, 26 Sep 2023 00:30:23 +0300 Subject: [PATCH 03/14] Feat: add language --- plugin.json | 4 ++++ resources/languages.json | 14 ++++++++++++++ widget/app.js | 6 ++++++ widget/controllers/widget.home.controller.js | 3 ++- widget/index.html | 2 +- 5 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 resources/languages.json diff --git a/plugin.json b/plugin.json index 2438480..a000845 100644 --- a/plugin.json +++ b/plugin.json @@ -14,6 +14,10 @@ }, "settings": { "enabled": false + }, + "language": { + "enabled": true, + "languageJsonPath": "resources/languages.json" } }, "widget": { diff --git a/resources/languages.json b/resources/languages.json new file mode 100644 index 0000000..fa811b4 --- /dev/null +++ b/resources/languages.json @@ -0,0 +1,14 @@ +{ + "sections": { + "general": { + "title": "General", + "labels": { + "PlaybackSpeedTitle": { + "title": "Playback Speed", + "defaultValue": "Playback Speed", + "placeholder": "Playback Speed" + } + } + } + } +} diff --git a/widget/app.js b/widget/app.js index 5379966..4ea0d86 100644 --- a/widget/app.js +++ b/widget/app.js @@ -99,6 +99,12 @@ else buildfire.navigation._goBackOne(); } + }]) + .run(['$rootScope',function ($rootScope) { + buildfire.language.get({ stringKey: 'general.PlaybackSpeedTitle' }, (err, result) => { + if (err) return console.error('Error while retrieving string value', err); + $rootScope.PlaybackSpeedTitle = result; + }); }]); }) (window.angular, window.buildfire); diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 85ed040..fcdcddb 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -351,8 +351,9 @@ WidgetHome.openPlaybackDrawer = function () { buildfire.components.drawer.open( { - content: 'Playback Speed', + content: `${$rootScope.PlaybackSpeedTitle}`, enableFilter: false, + isHTML:true, listItems: playbackSpeedOptions, }, (err, result) => { diff --git a/widget/index.html b/widget/index.html index df1ed66..6fec658 100644 --- a/widget/index.html +++ b/widget/index.html @@ -1,7 +1,7 @@ - + From fcb6d9efe277467414a69f890cb6542de00392ee Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Sun, 1 Oct 2023 03:08:58 +0300 Subject: [PATCH 04/14] Feat: manage hide/show playback bar --- widget/app.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/widget/app.js b/widget/app.js index 4ea0d86..f748848 100644 --- a/widget/app.js +++ b/widget/app.js @@ -90,6 +90,8 @@ }; }]) .run(['$rootScope',function ($rootScope) { + forceHideNavbar(); + buildfire.navigation.onBackButtonClick = function () { console.log('Back Button called-----------------------------'); if ($rootScope.openPlaylist) { @@ -106,5 +108,12 @@ $rootScope.PlaybackSpeedTitle = result; }); }]); + + const forceHideNavbar = function () { + buildfire.appearance.navbar.hide(null, (err) => { + if (err) return console.error(err); + console.log("Navbar is hidden"); + }); + }; }) (window.angular, window.buildfire); From a4fe97335f100e310594ec6cc3afc8b04724c118 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Sun, 1 Oct 2023 17:59:55 +0300 Subject: [PATCH 05/14] Fix: fix player UI --- widget/assets/css/widget.app.css | 9 +++------ widget/controllers/widget.home.controller.js | 5 ----- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index 69e835b..3857eb4 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -1,6 +1,5 @@ :root { --played-tracker-percentage: 0%; - --isPlaying: 0; } /* Plugin CSS */ @@ -403,6 +402,7 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde margin-top:-232px; } .holder.now-playing .media-holder, + .holder.now-playing .media-holder .media-inner, .holder.now-playing .media-holder .media-inner img{ max-height:200px; max-width:200px; @@ -486,8 +486,8 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde border-radius: 12px; animate: 0.2s; background: -webkit-gradient(linear, left top, right top, from(var(--bf-theme-primary)), color-stop(var(--bf-theme-primary)), color-stop(#fff), to(white)); - background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) calc(var(--played-tracker-percentage) - 2%), #fff calc(var(--played-tracker-percentage) - 2%), white 100%); - background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) calc(var(--played-tracker-percentage) - 2%), #fff calc(var(--played-tracker-percentage) - 2%), white 100%); + background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); } @@ -499,9 +499,6 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde -webkit-appearance: none; margin-top: -7px; border-radius: 100%; - position: absolute; - left: calc(var(--played-tracker-percentage) - 4%); - transition: left calc(.3s * var(--isPlaying)) ease; } diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index fcdcddb..27559f2 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -459,11 +459,6 @@ '--played-tracker-percentage', `${percentage}%` ); - document.documentElement.style.setProperty( - '--isPlaying', - value < 0.5 ? 0 : 1 - ); - console.log(document.documentElement.style.getPropertyValue('--value')); } }; }]); From 05e344013a0998251c40aa1faca0eb2890e5cb11 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Sun, 1 Oct 2023 18:18:04 +0300 Subject: [PATCH 06/14] Fix: fix moz player track --- widget/assets/css/widget.app.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index 3857eb4..47d3fc7 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -504,12 +504,13 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .audio-plyer input[type=range]::-moz-range-track { width: 100%; - height: 10px; + height: 6px; cursor: pointer; animate: 0.2s; background: -webkit-gradient(linear, left top, right top, from(var(--bf-theme-primary)), color-stop(var(--bf-theme-primary)), color-stop(#fff), to(white)); background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + border-radius: 12px; } .audio-plyer input[type=range]::-moz-range-thumb { @@ -520,6 +521,7 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde -webkit-appearance: none; margin-top: -5px; border-radius: 10px; + border: none; } .audio-plyer input[type=range]::-ms-track { From ff8a889ed45b723b77656d7c89f64dc7374bfb70 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Tue, 3 Oct 2023 00:15:45 +0300 Subject: [PATCH 07/14] Fix: fix set playback rate --- widget/controllers/widget.home.controller.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 27559f2..99b4d9d 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -68,9 +68,6 @@ audioPlayer.settings.get(function (err, data) { console.log('Got player settings first time-----------------------', err, data); if (data) { - // todo : until Mahmoud done - data.playbackRate = 1; - // todo End ----------------- WidgetHome.settings = data; if (!$scope.$$phase) { $scope.$digest(); @@ -133,6 +130,7 @@ } else { audioPlayer.play(WidgetHome.currentTrack); } + setPlaybackSpeed(WidgetHome.settings.playbackRate); }; WidgetHome.playlistPlay = function (track, index) { WidgetHome.isRangeDisabled = false; @@ -368,9 +366,10 @@ if (WidgetHome.settings && value) { WidgetHome.settings.playbackRate = value; audioPlayer.settings.set(WidgetHome.settings); - // todo : uncomment this line after Mahmoud work done - // audioPlayer.setPlaybackRate(value); - $scope.$digest(); + audioPlayer.setPlaybackRate(value); + if (!$scope.$$phase && !$scope.$root.$$phase) { + $scope.$digest(); + } } }; From 8d33e7e1b1161bb0f0848523b00504d635ee1745 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Tue, 3 Oct 2023 21:25:29 +0300 Subject: [PATCH 08/14] Feat: build script enhancement --- build.sh | 1 + 1 file changed, 1 insertion(+) create mode 100644 build.sh diff --git a/build.sh b/build.sh new file mode 100644 index 0000000..e3ad580 --- /dev/null +++ b/build.sh @@ -0,0 +1 @@ +cd .. && rm -rf mediaPlayerPlugin.zip && zip -r mediaPlayerPlugin.zip mediaPlayerPlugin/ -x "*/.*" -x "*/build.sh" -x "mediaPlayerPlugin/node_modules/*" -x "mediaPlayerPlugin/coverage/*" From 223255927597d11f8c3a15e47678feee63d3f085 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Tue, 3 Oct 2023 22:30:04 +0300 Subject: [PATCH 09/14] Fix: update build script --- build.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build.sh b/build.sh index e3ad580..7610f19 100644 --- a/build.sh +++ b/build.sh @@ -1 +1 @@ -cd .. && rm -rf mediaPlayerPlugin.zip && zip -r mediaPlayerPlugin.zip mediaPlayerPlugin/ -x "*/.*" -x "*/build.sh" -x "mediaPlayerPlugin/node_modules/*" -x "mediaPlayerPlugin/coverage/*" +cd .. && rm -rf mediaPlayerPlugin.zip && zip -r mediaPlayerPlugin.zip mediaPlayerPlugin/ -x "*/.*" -x "*/build.sh" -x "*/node_modules/*" -x "*/coverage/*" -x "*/test/*" From 14cc67ebe6de84f6e28e3b9103f15d88e2a81fde Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Wed, 4 Oct 2023 17:52:40 +0300 Subject: [PATCH 10/14] Fix: fix bugs and enhancement --- resources/languages.json | 2 +- widget/app.js | 20 +- widget/app.services.js | 31 +- widget/assets/css/widget.app.css | 1047 ++++++++++-------- widget/controllers/widget.home.controller.js | 15 +- 5 files changed, 610 insertions(+), 505 deletions(-) diff --git a/resources/languages.json b/resources/languages.json index fa811b4..4f185ff 100644 --- a/resources/languages.json +++ b/resources/languages.json @@ -3,7 +3,7 @@ "general": { "title": "General", "labels": { - "PlaybackSpeedTitle": { + "playbackSpeedTitle": { "title": "Playback Speed", "defaultValue": "Playback Speed", "placeholder": "Playback Speed" diff --git a/widget/app.js b/widget/app.js index f748848..0458c12 100644 --- a/widget/app.js +++ b/widget/app.js @@ -89,8 +89,11 @@ }); }; }]) - .run(['$rootScope',function ($rootScope) { - forceHideNavbar(); + .run(['$rootScope',function ($rootScope) { + buildfire.appearance.navbar.hide(null, (err) => { + if (err) return console.error(err); + console.log("Navbar is hidden"); + }); buildfire.navigation.onBackButtonClick = function () { console.log('Back Button called-----------------------------'); @@ -101,19 +104,8 @@ else buildfire.navigation._goBackOne(); } + }]) - .run(['$rootScope',function ($rootScope) { - buildfire.language.get({ stringKey: 'general.PlaybackSpeedTitle' }, (err, result) => { - if (err) return console.error('Error while retrieving string value', err); - $rootScope.PlaybackSpeedTitle = result; - }); - }]); - const forceHideNavbar = function () { - buildfire.appearance.navbar.hide(null, (err) => { - if (err) return console.error(err); - console.log("Navbar is hidden"); - }); - }; }) (window.angular, window.buildfire); diff --git a/widget/app.services.js b/widget/app.services.js index 977b15b..8b63f9c 100644 --- a/widget/app.services.js +++ b/widget/app.services.js @@ -3,9 +3,30 @@ //created MediaPlayerWidgetServices module angular .module('MediaPlayerWidgetServices', []) - .provider('Buildfire', [function () { - this.$get = function () { - return buildfire; - }; - }]); + .provider('Buildfire', [ + function () { + this.$get = function () { + return buildfire; + }; + }, + ]) + .factory('Strings', [ 'Buildfire', function (Buildfire) { + const Strings = function () { + this.getString = function (key, callback) { + Buildfire.language.get({ stringKey: key }, (err, res) => { + if (err) { + console.error(err); + callback(err, null); + } else { + callback(null, res); + } + }); + }; + }; + + return Strings; + }, + ]); + + })(window.angular, window.buildfire); \ No newline at end of file diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index 47d3fc7..64d71f0 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -1,22 +1,24 @@ :root { - --played-tracker-percentage: 0%; + --played-tracker-percentage: 0%; } /* Plugin CSS */ -.media-button-container{ +.media-button-container { display: flex; flex: 1; justify-content: center; align-items: center; } + .media-button-container .play-pause-button { width: 64px; - height: 64px; - border-radius: 50%; + height: 64px; + border-radius: 50%; padding: 0 !important; } -.media-button-container .play-pause-button div{ + +.media-button-container .play-pause-button div { width: 62px; border-radius: 50%; height: 64px; @@ -25,14 +27,15 @@ align-items: center; } -.media-button-container .active{ +.media-button-container .active { fill: var(--bf-theme-primary); } -.media-button-container .not-active{ + +.media-button-container .not-active { fill: #FFF; } -.media-container{ +.media-container { display: flex; justify-content: center; align-items: center; @@ -41,296 +44,348 @@ gap: 24px; } -.media-center-plugin.layout2 .people-banner .people-bg{ - background:rgba(0,0,0,0.8); +.media-center-plugin.layout2 .people-banner .people-bg { + background: rgba(0, 0, 0, 0.8); } -.media-center-plugin.layout2 .people-banner .people-info{ - color:#fff; + +.media-center-plugin.layout2 .people-banner .people-info { + color: #fff; } -.media-center-plugin.layout3 .list-layout .list-item-media .list-media-holder{ - background:none; + +.media-center-plugin.layout3 .list-layout .list-item-media .list-media-holder { + background: none; } -.media-layout .media-item:nth-child(odd){ - padding-left:15px !important; - padding-right:7.5px !important; + +.media-layout .media-item:nth-child(odd) { + padding-left: 15px !important; + padding-right: 7.5px !important; } -.media-layout .media-item:nth-child(even){ - padding-left:7.5px !important; - padding-right:15px !important; + +.media-layout .media-item:nth-child(even) { + padding-left: 7.5px !important; + padding-right: 15px !important; } -.media-layout .media-item{ - margin-bottom:15px; + +.media-layout .media-item { + margin-bottom: 15px; } -.media-layout .media-item .media-holder{ - background:#eef0f0; - position:relative; - border-radius:3px 3px 0 0; - overflow:hidden; + +.media-layout .media-item .media-holder { + background: #eef0f0; + position: relative; + border-radius: 3px 3px 0 0; + overflow: hidden; } -.media-layout .media-item .media-copy{ - border-radius:0 0 3px 3px; - padding:6px 10px; + +.media-layout .media-item .media-copy { + border-radius: 0 0 3px 3px; + padding: 6px 10px; } -.media-layout .media-item .media-holder .media-img-holder{ - max-width:450px; - margin:0 auto; + +.media-layout .media-item .media-holder .media-img-holder { + max-width: 450px; + margin: 0 auto; } -.ecommerce-plugin.layout1 .media-layout .media-item:nth-child(odd){ - padding-left:10px !important; - padding-right:5px !important; + +.ecommerce-plugin.layout1 .media-layout .media-item:nth-child(odd) { + padding-left: 10px !important; + padding-right: 5px !important; } -.ecommerce-plugin.layout1 .media-layout .media-item:nth-child(even){ - padding-left:5px !important; - padding-right:10px !important; + +.ecommerce-plugin.layout1 .media-layout .media-item:nth-child(even) { + padding-left: 5px !important; + padding-right: 10px !important; } -.ecommerce-plugin.layout1 .media-layout .media-item{ - margin-bottom:10px; + +.ecommerce-plugin.layout1 .media-layout .media-item { + margin-bottom: 10px; } -.ecommerce-plugin.layout1 .media-layout .media-item .media-holder .media-img-holder{ - max-width:200px; + +.ecommerce-plugin.layout1 .media-layout .media-item .media-holder .media-img-holder { + max-width: 200px; } -.ecommerce-plugin.layout1 .media-layout .media-item .info-bar{ - padding:6px 0; + +.ecommerce-plugin.layout1 .media-layout .media-item .info-bar { + padding: 6px 0; } /* List Items */ -.list-items .list-item{ - position:relative; +.list-items .list-item { + position: relative; } + .list-items .list-item:before, -.layout3 .list-layout .list-item:after{ - content:''; - border-top:1px solid #ddd !important; - opacity:0.25; - top:0; - left:0; - width:100%; - position:absolute; +.layout3 .list-layout .list-item:after { + content: ''; + border-top: 1px solid #ddd !important; + opacity: 0.25; + top: 0; + left: 0; + width: 100%; + position: absolute; } -.layout3 .list-layout .list-item:after{ - border-top:none !important; - top:inherit; - bottom:0; - border-bottom:1px solid #ddd !important; + +.layout3 .list-layout .list-item:after { + border-top: none !important; + top: inherit; + bottom: 0; + border-bottom: 1px solid #ddd !important; } -.list-items .list-item + .list-item{ - padding-top:10px; - margin-top:10px; + +.list-items .list-item+.list-item { + padding-top: 10px; + margin-top: 10px; } -.list-items .list-item .media{ - width:100px; + +.list-items .list-item .media { + width: 100px; } -.list-items .list-item .content{ - padding-left:110px; - width:100%; + +.list-items .list-item .content { + padding-left: 110px; + width: 100%; } /* List Layout Grids */ -.list-layout .list-item{ - padding-left:15px; - padding-right:8px; +.list-layout .list-item { + padding-left: 15px; + padding-right: 8px; } -.list-layout .list-item + .list-item{ - padding-left:8px; - padding-right:15px; + +.list-layout .list-item+.list-item { + padding-left: 8px; + padding-right: 15px; } -.list-layout .list-item-media{ - position:relative; - left:0; + +.list-layout .list-item-media { + position: relative; + left: 0; -moz-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; } -.list-layout .list-item-media.now-playing:after{ - content:''; - position:absolute; - top:0; - left:0; - width:3px; - height:100%; - background:#09a3ee; -} -.list-layout .list-item-media.edit{ - left:-60px; -} -.list-layout .list-item-media .remove-btn{ - position:absolute; - top:0; - right:-120px; - padding:25px 0; - width:100px; - height:100%; - color:#fff; + +.list-layout .list-item-media.now-playing:after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 100%; + background: #09a3ee; +} + +.list-layout .list-item-media.edit { + left: -60px; +} + +.list-layout .list-item-media .remove-btn { + position: absolute; + top: 0; + right: -120px; + padding: 25px 0; + width: 100px; + height: 100%; + color: #fff; -moz-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; } -.list-layout .list-item-media.edit .remove-btn{ - right:-60px; -} -.list-layout .list-item-media.edit .btns{ - right:58px; -} -.list-layout .list-item-media .list-media-holder{ - margin:0 auto; - max-width:280px; -} -.layout4 .list-layout .list-item-media .list-media-holder{ - max-width:200px; -} -.list-layout .list-item-copy{ - padding:10px 0; - min-height:70px; -} -.list-layout .list-item-copy p.summary{ - font-size:13px; -} -.list-layout span.list-item-date{ - font-size:11px; - font-style:italic; - display:block; - margin:-4px 0 -4px; -} -.layout3 .list-layout{ - position:relative; -} -.layout3 .list-layout:before{ - content:''; - border-top:1px solid #ddd !important; - opacity:0.25; - top:0; - left:0; - position:absolute; - width:100%; -} -.layout3 .list-layout .list-item-media{ - background:none; -} -.layout3 .list-layout .list-item-media .list-media-holder{ - width:110px; - height:60px; - line-height:58px; - margin:inherit; - margin-right:10px; - background:#efefef; - border-radius:4px; - margin:5px 10px 5px 5px; - text-align:center; -} -.media-center-plugin.layout3 .list-layout .list-item-media .list-media-holder{ - background:none; -} -html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holder{ - line-height:60px; -} -.layout3 .list-layout .list-item-media .list-media-holder.square-icon{ - width:60px; -} -.layout3 .list-layout .list-item-media .list-media-holder img{ - max-width:100%; - max-height:100%; - vertical-align:middle; - border-radius:2px; -} -.layout3 .list-layout .list-item-media .list-media-holder .main-icon{ - font-size:44px; - position:relative; - top:8px; -} -.layout3 .list-layout .list-item{ - padding:0; - min-height:71px; - position:relative; -} -.layout3 .list-layout .list-item-copy{ - padding:6px 10px 5px; -} - -.holder.now-playing{ - margin-top:0; - height:100%; - padding:50px 0 0 !important; - color:#fff; -} -.holder.now-playing .blurred-image{ - -o-filter:blur(10px) brightness(0.2); - -moz-filter:blur(10px) brightness(0.2); - -webkit-filter:blur(10px) brightness(0.2); - filter:blur(10px) brightness(0.2); - position:absolute; - top:-5%; - left:-5%; - background:url(http://4.bp.blogspot.com/-8bBgFCVGbpE/TvQU6q_f7qI/AAAAAAAAAEk/b2QtDIIbv4I/s1600/Tycho-Dive.png) no-repeat center center; - -o-background-size:cover; - -moz-background-size:cover; - -webkit-background-size:cover; - background-size:cover; - height:110%; - width:110%; - z-index:0; -} -.holder.now-playing .media-center-plugin{ - position:absolute; - width:300px; - height:530px; - top:45%; - margin-top:-264px; - left:50%; - margin-left:-150px; + +.list-layout .list-item-media.edit .remove-btn { + right: -60px; +} + +.list-layout .list-item-media.edit .btns { + right: 58px; +} + +.list-layout .list-item-media .list-media-holder { + margin: 0 auto; + max-width: 280px; +} + +.layout4 .list-layout .list-item-media .list-media-holder { + max-width: 200px; +} + +.list-layout .list-item-copy { + padding: 10px 0; + min-height: 70px; +} + +.list-layout .list-item-copy p.summary { + font-size: 13px; +} + +.list-layout span.list-item-date { + font-size: 11px; + font-style: italic; + display: block; + margin: -4px 0 -4px; +} + +.layout3 .list-layout { + position: relative; +} + +.layout3 .list-layout:before { + content: ''; + border-top: 1px solid #ddd !important; + opacity: 0.25; + top: 0; + left: 0; + position: absolute; + width: 100%; +} + +.layout3 .list-layout .list-item-media { + background: none; +} + +.layout3 .list-layout .list-item-media .list-media-holder { + width: 110px; + height: 60px; + line-height: 58px; + margin: inherit; + margin-right: 10px; + background: #efefef; + border-radius: 4px; + margin: 5px 10px 5px 5px; + text-align: center; } + +.media-center-plugin.layout3 .list-layout .list-item-media .list-media-holder { + background: none; +} + +html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holder { + line-height: 60px; +} + +.layout3 .list-layout .list-item-media .list-media-holder.square-icon { + width: 60px; +} + +.layout3 .list-layout .list-item-media .list-media-holder img { + max-width: 100%; + max-height: 100%; + vertical-align: middle; + border-radius: 2px; +} + +.layout3 .list-layout .list-item-media .list-media-holder .main-icon { + font-size: 44px; + position: relative; + top: 8px; +} + +.layout3 .list-layout .list-item { + padding: 0; + min-height: 71px; + position: relative; +} + +.layout3 .list-layout .list-item-copy { + padding: 6px 10px 5px; +} + +.holder.now-playing { + margin-top: 0; + height: 100%; + padding: 50px 0 0 !important; + color: #fff; +} + +.holder.now-playing .blurred-image { + -o-filter: blur(10px) brightness(0.2); + -moz-filter: blur(10px) brightness(0.2); + -webkit-filter: blur(10px) brightness(0.2); + filter: blur(10px) brightness(0.2); + position: absolute; + top: -5%; + left: -5%; + background: url(http://4.bp.blogspot.com/-8bBgFCVGbpE/TvQU6q_f7qI/AAAAAAAAAEk/b2QtDIIbv4I/s1600/Tycho-Dive.png) no-repeat center center; + -o-background-size: cover; + -moz-background-size: cover; + -webkit-background-size: cover; + background-size: cover; + height: 110%; + width: 110%; + z-index: 0; +} + +.holder.now-playing .media-center-plugin { + position: absolute; + width: 300px; + height: 530px; + top: 45%; + margin-top: -264px; + left: 50%; + margin-left: -150px; +} + .holder.now-playing .media-holder, -.more-info .media-holder{ - display:table; - text-align:center; - width:280px; - height:280px; - max-width:280px; - max-height:280px; - margin:0 auto; +.more-info .media-holder { + display: table; + text-align: center; + width: 280px; + height: 280px; + max-width: 280px; + max-height: 280px; + margin: 0 auto; } + .holder.now-playing .media-holder .media-inner, -.more-info .media-holder .media-inner{ - max-width:280px; - max-height:280px; - display:table; +.more-info .media-holder .media-inner { + max-width: 280px; + max-height: 280px; + display: table; width: 280px; height: 280px; - vertical-align:middle; + vertical-align: middle; } + .media-player-more-info .media-holder, -.media-player-more-info .media-holder .media-inner{ - height:140px !important; - width:140px !important; +.media-player-more-info .media-holder .media-inner { + height: 140px !important; + width: 140px !important; } + .holder.now-playing .media-holder .media-inner img, -.more-info .media-holder .media-inner img{ +.more-info .media-holder .media-inner img { max-width: 100%; - max-height: 100%; - width: 100%; - height: 100%; + max-height: 100%; + width: 100%; + height: 100%; } -.holder.now-playing .media-holder .media-inner img{ - max-width:100%; - max-height:100%; + +.holder.now-playing .media-holder .media-inner img { + max-width: 100%; + max-height: 100%; } + .holder.now-playing .media-player-info h4, -.holder.now-playing .media-player-info p{ - margin:0; +.holder.now-playing .media-player-info p { + margin: 0; } -.holder.now-playing .media-header-link a{ - color:#fff; + +.holder.now-playing .media-header-link a { + color: #fff; } + .holder.now-playing .media-player-action-btns { display: flex; - justify-content: center; - align-items: center; + justify-content: center; + align-items: center; padding-top: 40px; gap: 16px; } -.holder.now-playing .media-player-action-btns .icon{ - font-size:25px; + +.holder.now-playing .media-player-action-btns .icon { + font-size: 25px; } @@ -339,144 +394,161 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde cursor: pointer; } -.holder.now-playing .media-player-btns .icon.icon-sm{ - font-size:22px; - position:relative; - color:#999; +.holder.now-playing .media-player-btns .icon.icon-sm { + font-size: 22px; + position: relative; + color: #999; } -.holder.now-playing .media-player-btns .icon{ - font-size:42px; + +.holder.now-playing .media-player-btns .icon { + font-size: 42px; } -.holder.now-playing .media-player-btns .icon + .icon{ - margin-left:20px; + +.holder.now-playing .media-player-btns .icon+.icon { + margin-left: 20px; } -.holder.now-playing .media-player-btns .icon.icon-main{ - font-size:58px; - position:relative; + +.holder.now-playing .media-player-btns .icon.icon-main { + font-size: 58px; + position: relative; } /* Media Player Playlist Overlay */ -.media-player-list-layout.layout3 .list-layout .list-item{ - border-bottom:1px solid #333; +.media-player-list-layout.layout3 .list-layout .list-item { + border-bottom: 1px solid #333; } -.media-player-list-layout.layout3 .list-layout .list-item-media .list-media-holder{ - background:none; + +.media-player-list-layout.layout3 .list-layout .list-item-media .list-media-holder { + background: none; } /* Media Player More Info Overlay */ -.media-player-more-info .more-info-list .item{ - border-bottom:1px solid #333; +.media-player-more-info .more-info-list .item { + border-bottom: 1px solid #333; } -.media-player-more-info .more-info-list .item:first-child{ - border-top:1px solid #333; + +.media-player-more-info .more-info-list .item:first-child { + border-top: 1px solid #333; } -.media-player-more-info .more-info-list .item a{ - color:#fff; - padding:10px; - display:block; - font-size:15px; - line-height:20px; + +.media-player-more-info .more-info-list .item a { + color: #fff; + padding: 10px; + display: block; + font-size: 15px; + line-height: 20px; } /* Media Player Settings Overlay */ -.media-player-settings .settings-list .item{ - border-bottom:1px solid #333; - padding:12px 0; +.media-player-settings .settings-list .item { + border-bottom: 1px solid #333; + padding: 12px 0; } -.media-player-settings .settings-list .item:first-child{ - border-top:1px solid #333; + +.media-player-settings .settings-list .item:first-child { + border-top: 1px solid #333; } -.media-player-settings .settings-list .item span{ - color:#fff; - font-size:15px; - line-height:20px; + +.media-player-settings .settings-list .item span { + color: #fff; + font-size: 15px; + line-height: 20px; } + .media-player-settings .settings-list .checkbox label::after, -.notification-plugin .notification-item .checkbox label::after{ - left:-1px; +.notification-plugin .notification-item .checkbox label::after { + left: -1px; } -@media(max-height: 540px){ - .holder.now-playing .media-center-plugin{ - height:464px; - margin-top:-232px; +@media(max-height: 540px) { + .holder.now-playing .media-center-plugin { + height: 464px; + margin-top: -232px; } + .holder.now-playing .media-holder, .holder.now-playing .media-holder .media-inner, - .holder.now-playing .media-holder .media-inner img{ - max-height:200px; - max-width:200px; + .holder.now-playing .media-holder .media-inner img { + max-height: 200px; + max-width: 200px; } - .holder.now-playing .media-player-btns .icon{ - font-size:32px; + + .holder.now-playing .media-player-btns .icon { + font-size: 32px; } - .holder.now-playing .media-player-btns .icon.icon-main{ - font-size:52px; + + .holder.now-playing .media-player-btns .icon.icon-main { + font-size: 52px; } - .holder.now-playing .media-player-btns .icon.icon-sm{ - top:0; + + .holder.now-playing .media-player-btns .icon.icon-sm { + top: 0; } } -@media(max-height: 470px){ - .holder.now-playing .media-center-plugin{ - height:248px; - margin-top:-124px; +@media(max-height: 470px) { + .holder.now-playing .media-center-plugin { + height: 248px; + margin-top: -124px; } - .holder.now-playing .media-holder{ - display:none; + + .holder.now-playing .media-holder { + display: none; } } + /* End Plugin CSS */ -.list-layout .list-item-copy p.summary{ - margin:-5px 0 !important; +.list-layout .list-item-copy p.summary { + margin: -5px 0 !important; } + .body-scroll { - height: auto !important; + height: auto !important; } -.list-layout .col-xs-6:nth-child(odd){ - padding-left:15px !important; - padding-right:7.5px !important; -} -.list-layout .col-xs-6:nth-child(even){ - padding-left:7.5px !important; - padding-right:15px !important; + +.list-layout .col-xs-6:nth-child(odd) { + padding-left: 15px !important; + padding-right: 7.5px !important; } -.layout3 .text-overlay .padded p.track-title{ +.list-layout .col-xs-6:nth-child(even) { + padding-left: 7.5px !important; + padding-right: 15px !important; } +.layout3 .text-overlay .padded p.track-title {} + /*Styles for slider*/ .playerMP { - width: 100%; - display: inline-block; - padding: 0px; - margin: 0px; + width: 100%; + display: inline-block; + padding: 0px; + margin: 0px; } .playerMP div { - width: 15%; - float: left; - text-align: center; - padding: 0px; - margin: 0px; - line-height: 36px; + width: 15%; + float: left; + text-align: center; + padding: 0px; + margin: 0px; + line-height: 36px; } .playerMP div:nth-child(2) { - width: 70%; + width: 70%; } .audio-plyer input[type=range] { - -webkit-appearance: none; - margin: 20px 0; - width: 100%; + -webkit-appearance: none; + margin: 20px 0; + width: 100%; } .audio-plyer input[type=range]:focus { - outline: none; + outline: none; } .audio-plyer input[type=range]::-webkit-slider-runnable-track { @@ -486,8 +558,8 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde border-radius: 12px; animate: 0.2s; background: -webkit-gradient(linear, left top, right top, from(var(--bf-theme-primary)), color-stop(var(--bf-theme-primary)), color-stop(#fff), to(white)); - background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); - background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); } @@ -508,8 +580,8 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde cursor: pointer; animate: 0.2s; background: -webkit-gradient(linear, left top, right top, from(var(--bf-theme-primary)), color-stop(var(--bf-theme-primary)), color-stop(#fff), to(white)); - background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); - background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + background: -o-linear-gradient(left, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); + background: linear-gradient(to right, var(--bf-theme-primary) 0%, var(--bf-theme-primary) var(--played-tracker-percentage), #fff var(--played-tracker-percentage), white 100%); border-radius: 12px; } @@ -525,264 +597,279 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde } .audio-plyer input[type=range]::-ms-track { - width: 100%; - height: 8.4px; - cursor: pointer; - animate: 0.2s; - background: transparent; - border-color: transparent; - border-width: 16px 0; - color: transparent; + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; } .audio-plyer input[type=range]::-ms-fill-lower { - background: #2a6495; - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } .audio-plyer input[type=range]::-ms-fill-upper { - background: #3071a9; - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } .audio-plyer input[type=range]::-ms-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 36px; - width: 16px; - border-radius: 3px; - background: #ffffff; - cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; } .audio-plyer input[type=range]:focus::-ms-fill-lower { - background: #3071a9; + background: #3071a9; } .audio-plyer input[type=range]:focus::-ms-fill-upper { - background: #367ebd; + background: #367ebd; } + /* Styles for volume slider*/ .volume input[type=range] { - -webkit-appearance: none; - margin: 0 0; - width: 100%; + -webkit-appearance: none; + margin: 0 0; + width: 100%; } .volume input[type=range]:focus { - outline: hidden; + outline: hidden; } .volume input[type=range]::-webkit-slider-runnable-track { - width: 25px; - height: 20px; - cursor: pointer; - animate: 0.2s; - background: transparent; - border-radius: 10px; - -webkit-appearance: none; + width: 25px; + height: 20px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-radius: 10px; + -webkit-appearance: none; } .volume input[type=range]::-webkit-slider-thumb { - height: 20px; - width: 20px; - background: #ffffff; - cursor: pointer; - -webkit-appearance: none; - margin-left: -5px; - border-radius: 10px; + height: 20px; + width: 20px; + background: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-left: -5px; + border-radius: 10px; } .volume input[type=range]:focus::-webkit-slider-runnable-track { - background: darkblue; + background: darkblue; } .volume input[type=range]::-moz-range-track { - height: 12px; - width: 7px; - cursor: pointer; - animate: 0.2s; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - background: #3071a9; - border-radius: 1.3px; - border: 0.2px solid #010101; + height: 12px; + width: 7px; + cursor: pointer; + animate: 0.2s; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; } .volume input[type=range]::-moz-range-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 16px; - width: 17px; - border-radius: 3px; - background: #ffffff; - cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 16px; + width: 17px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; } .volume input[type=range]::-ms-track { - width: 100%; - height: 8.4px; - cursor: pointer; - animate: 0.2s; - background: transparent; - border-color: transparent; - border-width: 16px 0; - color: transparent; + width: 100%; + height: 8.4px; + cursor: pointer; + animate: 0.2s; + background: transparent; + border-color: transparent; + border-width: 16px 0; + color: transparent; } .volume input[type=range]::-ms-fill-lower { - background: #2a6495; - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } .volume input[type=range]::-ms-fill-upper { - background: #3071a9; - border: 0.2px solid #010101; - border-radius: 2.6px; - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } .volume input[type=range]::-ms-thumb { - box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; - border: 1px solid #000000; - height: 36px; - width: 26px; - border-radius: 3px; - background: #ffffff; - cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 36px; + width: 26px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; } .volume input[type=range]:focus::-ms-fill-lower { - background: #3071a9; + background: #3071a9; } .volume input[type=range]:focus::-ms-fill-upper { - background: #367ebd; + background: #367ebd; } + input.volume-button[type=range]:focus::-ms-fill-upper { - background: #367ebd; + background: #367ebd; } -.duration-ui{ - float: right; - font-size: 13px; +.duration-ui { + float: right; + font-size: 13px; } + .layout1 .duration-ui, -.layout4 .duration-ui{ - position:relative; - top:8px; +.layout4 .duration-ui { + position: relative; + top: 8px; } + .playcount-ui, .pausecount-ui, -.duration-ui{ - font-size:11px; - font-style:italic; +.duration-ui { + font-size: 11px; + font-style: italic; } -.layout3 .duration-ui{ - margin-top:4px; + +.layout3 .duration-ui { + margin-top: 4px; } -.layout2.layout3 .duration-ui{ - margin-top:-18px; + +.layout2.layout3 .duration-ui { + margin-top: -18px; } -.noTracksMsg -{ - background-color: lightgrey; - padding: 10px 10px 10px 90px; - border: 1px solid grey; - border-radius: 4px; +.noTracksMsg { + background-color: lightgrey; + padding: 10px 10px 10px 90px; + border: 1px solid grey; + border-radius: 4px; } -.clickable{ - cursor: pointer; +.clickable { + cursor: pointer; } .playcount-ui:before { - content: "\e612"; - font-family: 'icomoon'; - font-size: 13px; - line-height: 24px; - position:relative; - top:1px; - margin-right: 3px; - font-style:normal; - } - -.bold{ + content: "\e612"; + font-family: 'icomoon'; + font-size: 13px; + line-height: 24px; + position: relative; + top: 1px; + margin-right: 3px; + font-style: normal; +} + +.bold { font-weight: bold; } -.media-player-button-selected{ +.media-player-button-selected { border-bottom: 1px solid; padding-bottom: 3px; } -.list-layout.has-btns .list-item{ - position:relative; +.list-layout.has-btns .list-item { + position: relative; } + .ecommerce-plugin .list-layout.has-cart .list-item-copy, -.list-layout.has-btns .list-item-copy{ - padding-right:88px !important; +.list-layout.has-btns .list-item-copy { + padding-right: 88px !important; } + .list-layout.has-cart .add-to-cart, -.list-layout.has-btns .btns{ - position:absolute; - top:50%; - margin-top:-16px; - right:18px; +.list-layout.has-btns .btns { + position: absolute; + top: 50%; + margin-top: -16px; + right: 18px; } -.list-layout.has-btns .btns{ - margin-top:-18px; + +.list-layout.has-btns .btns { + margin-top: -18px; } + .holder .list-layout .add-to-cart, -.list-layout.has-btns .btns{ - padding:5px; - display:inline-block; - width:32px; - height:32px; +.list-layout.has-btns .btns { + padding: 5px; + display: inline-block; + width: 32px; + height: 32px; } -.holder .media-layout .add-to-cart{ - padding:4px; - width:30px; - height:30px; + +.holder .media-layout .add-to-cart { + padding: 4px; + width: 30px; + height: 30px; } + .holder .list-layout .add-to-cart .icon, -.holder .media-layout .add-to-cart .icon{ - font-size:18px; - vertical-align:middle; +.holder .media-layout .add-to-cart .icon { + font-size: 18px; + vertical-align: middle; } -.list-layout.has-btns .btns .icon{ - font-size:24px; - color:#fff; + +.list-layout.has-btns .btns .icon { + font-size: 24px; + color: #fff; } -.time-indicator{ + +.time-indicator { margin-top: -25px !important; opacity: 0.6 !important; } /* Modal */ -.modal{ - height:100%; - background:rgba(0,0,0,0.8); +.modal { + height: 100%; + background: rgba(0, 0, 0, 0.8); } -.modal .modal-dialog{ - position:relative; - top:40%; - transform:translateY(-50%) !important; - margin:0 15px !important; + +.modal .modal-dialog { + position: relative; + top: 40%; + transform: translateY(-50%) !important; + margin: 0 15px !important; } + /*Style to fix the audio player ui*/ -.audio-player{ +.audio-player { overflow: hidden !important; position: fixed; width: 100%; height: 100%; -} +} \ No newline at end of file diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 99b4d9d..1edc7c8 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -4,14 +4,19 @@ angular .module('MediaPlayerPluginWidget') .controller('WidgetHomeCtrl', ['$scope', '$timeout', 'Buildfire', - '$rootScope', 'Modals', - function ($scope, $timeout, Buildfire, $rootScope, Modals) { + '$rootScope', 'Modals', 'Strings', + function ($scope, $timeout, Buildfire, $rootScope, Modals, Strings) { console.log('WidgetHomeCtrl Controller Loaded-------------------------------------'); var WidgetHome = this; WidgetHome.currentTime = 0.0; WidgetHome.volume = 1; WidgetHome.isRangeDisabled = true; $rootScope.openPlaylist = false; + WidgetHome.strings = {}; + const strings = new Strings(); + strings.getString('general.playbackSpeedTitle', (err, res) => { + WidgetHome.strings.playbackSpeedTitle = res; + }); const playbackSpeedOptions = [ { text: '
0.5x
', @@ -89,7 +94,7 @@ } WidgetHome.currentTime = e.data.currentTime; WidgetHome.duration = e.data.duration; - WidgetHome.progressBarStyle(e.data.currentTime); + WidgetHome.updateProgressBarStyle(e.data.currentTime); break; case 'audioEnded': WidgetHome.playing = false; @@ -349,7 +354,7 @@ WidgetHome.openPlaybackDrawer = function () { buildfire.components.drawer.open( { - content: `${$rootScope.PlaybackSpeedTitle}`, + content: `${WidgetHome.strings.playbackSpeedTitle}`, enableFilter: false, isHTML:true, listItems: playbackSpeedOptions, @@ -451,7 +456,7 @@ * progress bar style * @param {Number} value */ - WidgetHome.progressBarStyle = function (value) { + WidgetHome.updateProgressBarStyle = function (value) { const percentage = (value / WidgetHome.duration) * 100; if (percentage) { document.documentElement.style.setProperty( From 3457a128fe00115ad7b7f407169332638b2289f5 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Wed, 4 Oct 2023 21:28:01 +0300 Subject: [PATCH 11/14] Chore: refactore playback speed --- widget/controllers/widget.home.controller.js | 8 +++----- widget/index.html | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 1edc7c8..55f5af2 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -135,7 +135,6 @@ } else { audioPlayer.play(WidgetHome.currentTrack); } - setPlaybackSpeed(WidgetHome.settings.playbackRate); }; WidgetHome.playlistPlay = function (track, index) { WidgetHome.isRangeDisabled = false; @@ -369,9 +368,8 @@ const setPlaybackSpeed = function (value) { if (WidgetHome.settings && value) { - WidgetHome.settings.playbackRate = value; + WidgetHome.settings.playbackSpeed = value; audioPlayer.settings.set(WidgetHome.settings); - audioPlayer.setPlaybackRate(value); if (!$scope.$$phase && !$scope.$root.$$phase) { $scope.$digest(); } @@ -407,7 +405,7 @@ * @param loop * @param autoJumpToLastPosition * @param shufflePlaylist - * @param playbackRate + * @param playbackSpeed * @constructor */ function AudioSettings(settings) { @@ -416,7 +414,7 @@ this.autoJumpToLastPosition = settings.autoJumpToLastPosition; //If a track has [lastPosition] use it to start playing the audio from there this.shufflePlaylist = settings.shufflePlaylist;// shuffle the playlist this.isPlayingCurrentTrack = settings.isPlayingCurrentTrack;// Tells whether current is playing or not - this.playbackRate = settings.playbackRate;// Track playback speed rate + this.playbackSpeed = settings.playbackSpeed;// Track playback speed rate } diff --git a/widget/index.html b/widget/index.html index 6fec658..705caa9 100644 --- a/widget/index.html +++ b/widget/index.html @@ -158,7 +158,7 @@

No Audio Currently Selected

- {{WidgetHome.settings.playbackRate | number:'1'}}x + {{WidgetHome.settings.playbackSpeed ? WidgetHome.settings.playbackSpeed : 1 | number:'1'}}x playlist From ad95a9113702cf68b24e17266d7966df49c54d61 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Wed, 4 Oct 2023 21:36:53 +0300 Subject: [PATCH 12/14] Feat: update build script --- build.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build.sh b/build.sh index 7610f19..998d00a 100644 --- a/build.sh +++ b/build.sh @@ -1 +1 @@ -cd .. && rm -rf mediaPlayerPlugin.zip && zip -r mediaPlayerPlugin.zip mediaPlayerPlugin/ -x "*/.*" -x "*/build.sh" -x "*/node_modules/*" -x "*/coverage/*" -x "*/test/*" +cd .. && rm -rf mediaPlayerPlugin.zip && zip -r mediaPlayerPlugin.zip mediaPlayerPlugin/ -x "*/package-lock.json" -x "*/build.sh" -x "*/node_modules/*" -x "*/coverage/*" -x "*/test/*" From cf5ddd2fc6bea03079e8b10d3fc27b556bd07c18 Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Thu, 12 Oct 2023 23:34:11 +0300 Subject: [PATCH 13/14] Fix: fix issues & enhancement --- widget/assets/css/widget.app.css | 35 +++++++++----------- widget/controllers/widget.home.controller.js | 2 ++ widget/index.html | 13 +++----- 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index 64d71f0..7c880b0 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -295,7 +295,6 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .holder.now-playing { margin-top: 0; height: 100%; - padding: 50px 0 0 !important; color: #fff; } @@ -318,13 +317,16 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde } .holder.now-playing .media-center-plugin { - position: absolute; - width: 300px; - height: 530px; - top: 45%; - margin-top: -264px; - left: 50%; - margin-left: -150px; + position: relative; + height: 100%; + padding-bottom: calc(32px + env(safe-area-inset-bottom)); + max-width: 660px; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: space-around ; + padding: 16px 16px 32px; + gap: 8px; } .holder.now-playing .media-holder, @@ -381,7 +383,7 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde justify-content: center; align-items: center; padding-top: 40px; - gap: 16px; + gap: 45px; } .holder.now-playing .media-player-action-btns .icon { @@ -461,16 +463,12 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde } @media(max-height: 540px) { - .holder.now-playing .media-center-plugin { - height: 464px; - margin-top: -232px; - } .holder.now-playing .media-holder, .holder.now-playing .media-holder .media-inner, .holder.now-playing .media-holder .media-inner img { - max-height: 200px; - max-width: 200px; + max-height: 120px; + max-width: 120px; } .holder.now-playing .media-player-btns .icon { @@ -487,10 +485,6 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde } @media(max-height: 470px) { - .holder.now-playing .media-center-plugin { - height: 248px; - margin-top: -124px; - } .holder.now-playing .media-holder { display: none; @@ -545,6 +539,7 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde -webkit-appearance: none; margin: 20px 0; width: 100%; + position: relative; } .audio-plyer input[type=range]:focus { @@ -571,6 +566,8 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde -webkit-appearance: none; margin-top: -7px; border-radius: 100%; + position: absolute; + left: calc(var(--played-tracker-percentage) - 8px); } diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js index 55f5af2..1c2636b 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -14,6 +14,7 @@ $rootScope.openPlaylist = false; WidgetHome.strings = {}; const strings = new Strings(); + document.documentElement.style.setProperty('--played-tracker-percentage','0%'); strings.getString('general.playbackSpeedTitle', (err, res) => { WidgetHome.strings.playbackSpeedTitle = res; }); @@ -95,6 +96,7 @@ WidgetHome.currentTime = e.data.currentTime; WidgetHome.duration = e.data.duration; WidgetHome.updateProgressBarStyle(e.data.currentTime); + WidgetHome.isRangeDisabled = false; break; case 'audioEnded': WidgetHome.playing = false; diff --git a/widget/index.html b/widget/index.html index 705caa9..4abee24 100644 --- a/widget/index.html +++ b/widget/index.html @@ -52,12 +52,12 @@ 'width': '110%', 'z-index': '0'}">
-
+
-
@@ -105,9 +105,6 @@

No Audio Currently Selected

style="width: 149px; border-radius:4px; background:#fff; margin-top: -93px;margin-left: -14px;z-index: 1000000"/>
-
- -
@@ -217,9 +214,9 @@

Playlist is empty.

- -
From cc0ac193bde4f48e44dcd0490f4d8b8a3d44b90b Mon Sep 17 00:00:00 2001 From: Ibrahem alnumman Date: Mon, 16 Oct 2023 23:38:10 +0300 Subject: [PATCH 14/14] Fix: fix UI --- widget/assets/css/widget.app.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css index 7c880b0..dcafb7f 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -395,6 +395,10 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde width: 25%; cursor: pointer; } +.holder.now-playing .media-player-action-btns span.playback-speed { + font-size: 16px; + font-weight: 500; +} .holder.now-playing .media-player-btns .icon.icon-sm { font-size: 22px; @@ -462,13 +466,16 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde left: -1px; } -@media(max-height: 540px) { - +@media(max-height: 600px) { + .holder.now-playing .media-holder, + .more-info .media-holder { + padding-top: 12px; + } .holder.now-playing .media-holder, .holder.now-playing .media-holder .media-inner, .holder.now-playing .media-holder .media-inner img { - max-height: 120px; - max-width: 120px; + max-height: 230px; + max-width: 230px; } .holder.now-playing .media-player-btns .icon { @@ -482,6 +489,10 @@ html[browser="Firefox"] .layout3 .list-layout .list-item-media .list-media-holde .holder.now-playing .media-player-btns .icon.icon-sm { top: 0; } + .holder.now-playing .media-player-action-btns { + padding-top: 8px; + padding-bottom: 8px; + } } @media(max-height: 470px) {