diff --git a/build.sh b/build.sh new file mode 100644 index 0000000..998d00a --- /dev/null +++ b/build.sh @@ -0,0 +1 @@ +cd .. && rm -rf mediaPlayerPlugin.zip && zip -r mediaPlayerPlugin.zip mediaPlayerPlugin/ -x "*/package-lock.json" -x "*/build.sh" -x "*/node_modules/*" -x "*/coverage/*" -x "*/test/*" 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..4f185ff --- /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..0458c12 100644 --- a/widget/app.js +++ b/widget/app.js @@ -89,7 +89,12 @@ }); }; }]) - .run(['$rootScope',function ($rootScope) { + .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-----------------------------'); if ($rootScope.openPlaylist) { @@ -99,6 +104,8 @@ else buildfire.navigation._goBackOne(); } - }]); + + }]) + }) (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 78bb10d..dcafb7f 100644 --- a/widget/assets/css/widget.app.css +++ b/widget/assets/css/widget.app.css @@ -1,740 +1,883 @@ +:root { + --played-tracker-percentage: 0%; +} + /* Plugin CSS */ -.media-button-container{ +.media-button-container { display: flex; flex: 1; justify-content: center; align-items: center; } -.media-container{ + +.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{ - 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:240px; -} -.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:50%; - 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%; + 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: 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, -.more-info .media-holder{ - display:table; - text-align:center; - width:240px; - height:240px; - max-width:240px; - max-height:240px; - 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:240px; - max-height:240px; - display:table-cell; - vertical-align:middle; +.more-info .media-holder .media-inner { + max-width: 280px; + max-height: 280px; + display: table; + width: 280px; + height: 280px; + 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{ - max-height:100%; - width:auto; +.more-info .media-holder .media-inner img { + max-width: 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-player-action-btns { + display: flex; + justify-content: center; + align-items: center; + padding-top: 40px; + gap: 45px; } -.holder.now-playing .media-header-link a{ - color:#fff; + +.holder.now-playing .media-player-action-btns .icon { + font-size: 25px; } -.holder.now-playing .media-player-action-btns .icon{ - font-size:25px; + + +.holder.now-playing .media-player-action-btns span { + width: 25%; + cursor: pointer; } -.holder.now-playing .media-player-action-btns .icon + .icon{ - margin-left:60px; +.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; - 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: 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 img{ - max-height:200px; - max-width:200px; + .holder.now-playing .media-holder .media-inner, + .holder.now-playing .media-holder .media-inner img { + max-height: 230px; + max-width: 230px; + } + + .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; + .holder.now-playing .media-player-action-btns { + padding-top: 8px; + padding-bottom: 8px; } } -@media(max-height: 470px){ - .holder.now-playing .media-center-plugin{ - height:248px; - margin-top:-124px; - } - .holder.now-playing .media-holder{ - display:none; +@media(max-height: 470px) { + + .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: 13px 0; - width: 100%; + -webkit-appearance: none; + margin: 20px 0; + width: 100%; + position: relative; } .audio-plyer input[type=range]:focus { - outline: none; + outline: none; } .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) 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]::-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) - 8px); } -.audio-plyer input[type=range]:focus::-webkit-slider-runnable-track { - background: #367ebd; -} .audio-plyer input[type=range]::-moz-range-track { width: 100%; - height: 10px; + height: 6px; 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%); + border-radius: 12px; } .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; border-radius: 10px; + border: none; } .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/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 664609d..1c2636b 100644 --- a/widget/controllers/widget.home.controller.js +++ b/widget/controllers/widget.home.controller.js @@ -4,14 +4,47 @@ 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(); + document.documentElement.style.setProperty('--played-tracker-percentage','0%'); + strings.getString('general.playbackSpeedTitle', (err, res) => { + WidgetHome.strings.playbackSpeedTitle = res; + }); + 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) =>{ @@ -62,6 +95,8 @@ } WidgetHome.currentTime = e.data.currentTime; WidgetHome.duration = e.data.duration; + WidgetHome.updateProgressBarStyle(e.data.currentTime); + WidgetHome.isRangeDisabled = false; break; case 'audioEnded': WidgetHome.playing = false; @@ -316,6 +351,36 @@ WidgetHome.openMoreInfo = false; }; + //! --------------------------- Playback options -------------------------------------- + WidgetHome.openPlaybackDrawer = function () { + buildfire.components.drawer.open( + { + content: `${WidgetHome.strings.playbackSpeedTitle}`, + enableFilter: false, + isHTML:true, + 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.playbackSpeed = value; + audioPlayer.settings.set(WidgetHome.settings); + if (!$scope.$$phase && !$scope.$root.$$phase) { + $scope.$digest(); + } + } + }; + + + //! --------------------------- End : Playback options -------------------------------------- + /** * Track Smaple * @param title @@ -342,6 +407,7 @@ * @param loop * @param autoJumpToLastPosition * @param shufflePlaylist + * @param playbackSpeed * @constructor */ function AudioSettings(settings) { @@ -350,6 +416,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.playbackSpeed = settings.playbackSpeed;// Track playback speed rate } @@ -385,5 +452,18 @@ }*/ }; + /** + * progress bar style + * @param {Number} value + */ + WidgetHome.updateProgressBarStyle = function (value) { + const percentage = (value / WidgetHome.duration) * 100; + if (percentage) { + document.documentElement.style.setProperty( + '--played-tracker-percentage', + `${percentage}%` + ); + } + }; }]); })(window.angular, window); \ No newline at end of file diff --git a/widget/index.html b/widget/index.html index 1ce50b9..4abee24 100644 --- a/widget/index.html +++ b/widget/index.html @@ -1,7 +1,7 @@ - + @@ -17,6 +17,7 @@ + @@ -51,15 +52,12 @@ 'width': '110%', 'z-index': '0'}">
-
- Open Playlist -
-
+
-
@@ -107,38 +105,63 @@

No Audio Currently Selected

style="width: 149px; border-radius:4px; background:#fff; margin-top: -93px;margin-left: -14px;z-index: 1000000"/>
-
- -
-
- - - -
-
-
- +
+
+ + + + + + + + + +
- + + pause +
- - +
- + + pause +
-
- - - +
+ + + + + + + + + +
+
+ + {{WidgetHome.settings.playbackSpeed ? WidgetHome.settings.playbackSpeed : 1 | number:'1'}}x + + playlist + + + +
@@ -191,9 +214,9 @@

Playlist is empty.

- -