Merge pull request #4 from nteske/main

Added a New Play All Button
BuildFire · Oct 19, 2021 · c6a7ca9 · c6a7ca9
2 parents 8658322 + cda1d62
commit c6a7ca9
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 7 deletions.
diff --git a/control/settings/controllers/settings.home.controller.js b/control/settings/controllers/settings.home.controller.js
@@ -17,6 +17,8 @@
                     Settings.data.design.skipMediaPage = true;
                 if (typeof (Settings.data.content.autoPlay) == 'undefined')
                     Settings.data.content.autoPlay = true;
+                if (typeof (Settings.data.content.playAllButton) == 'undefined')
+                    Settings.data.content.playAllButton = false;
                 if (typeof (Settings.data.content.autoPlayDelay) == 'undefined')
                     Settings.data.content.autoPlayDelay = { label: "Off", value: 0 };
             }, (err) => {
@@ -70,6 +72,14 @@
                 }
             };
 
+            Settings.setPlayAllButton = (e) => {
+                let value = e.target.checked;
+                if (value != Settings.data.content.playAllButton) {
+                    Settings.data.content.playAllButton = value;
+                    MediaCenter.save(Settings.data).then(() => {});
+                }
+            };
+
             Settings.setAutoPlayDelay = (option) => {
                 if (option.value != Settings.data.content.autoPlayDelay.value) {
                     Settings.data.content.autoPlayDelay = option;

diff --git a/control/settings/templates/home.html b/control/settings/templates/home.html
@@ -26,6 +26,21 @@
     </div>
 </div>
 
+<div class="input-control side-label margin-bottom-thirty" ng-show="Settings.data.content.autoPlay">
+    <label for="">Show "Play All" Button
+        <span class="customTooltipBox btn-primary">
+            <span class="customTooltipText">
+                Allows users to see a "Play All" button that starts playing the first item in their playlist
+            </span>
+        </span>
+    </label>
+    <div class="button-switch">
+        <input id="playAllButtonSwitch" type="checkbox" ng-click="Settings.setPlayAllButton($event)" ng-checked="Settings.data.content.playAllButton">
+        <label for="playAllButtonSwitch" class="label-success"></label>
+    </div>
+</div>
+
+
 <div class="setting-toggle margin-bottom-thirty">
     <p class="setting-label">
         Auto Play Delay

diff --git a/widget/assets/css/icons/ic_play_material.svg b/widget/assets/css/icons/ic_play_material.svg
diff --git a/widget/assets/css/media.css b/widget/assets/css/media.css
@@ -4,7 +4,7 @@ html{
 }
 
 .slide.safe-area {
-    padding-top: env(safe-area-inset-top) !important;
+    /* padding-top: env(safe-area-inset-top) !important; */
 }
 
 .caption {

diff --git a/widget/assets/css/widget.app.css b/widget/assets/css/widget.app.css
@@ -1045,4 +1045,44 @@ input[type=range]::-ms-track {
 	overflow: hidden;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;  
+}
+
+.box-play-all{
+    width: 100%;
+	height: 50px;
+	padding: 16px;
+    position: sticky;
+    top: 0;
+	background-color: var(--bf-theme-background);
+    z-index: 100;
+	-webkit-box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+	   -moz-box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+	box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+	-o-box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+}
+
+.button-play-all{
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	position: absolute;
+	right: 15px;
+	bottom: -24px;
+	background-color: var(--bf-theme-title-bar);
+	cursor: pointer;
+	z-index: 100;
+	box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+	-moz-box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+	-webkit-box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+	-o-box-shadow: rgb(0 0 0 / 60%) 0px 1px 5px;
+}
+
+.image-play-all{
+ 	width: 100%;
+ 	height: 100%;
+	background-color: var(--bf-theme-icons);
+	-webkit-mask: url(icons/ic_play_material.svg) no-repeat center;
+	mask: url(icons/ic_play_material.svg) no-repeat center;
+	-webkit-mask-size: 35px;
+	mask-size: 35px;
 }
diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js
@@ -7,16 +7,17 @@
                 $rootScope.showFeed = true;
                 var WidgetHome = this;
                 WidgetHome.deepLink = false;
+                WidgetHome.totalRecord = null;
                 $rootScope.loadingData = true;
                 $rootScope.autoPlay = true;
-
-                const isLauncher = window.location.href.includes('launcherPlugin');
+                
+/*                 const isLauncher = window.location.href.includes('launcherPlugin');
                 const slideElement = document.querySelector(".slide");
                 if (isLauncher) {
                     slideElement.classList.add("safe-area");
                 } else {
                     slideElement.classList.remove("safe-area");
-                }
+                } */
 
                 buildfire.navigation.onAppLauncherActive(() => {
                     $rootScope.refreshItems();
@@ -33,6 +34,7 @@
                             transferAudioContentToPlayList: false,
                             forceAutoPlay: false,
                             autoPlay: true,
+                            playAllButton: false,
                             autoPlayDelay: { label: "Off", value: 0 },
                             globalPlaylist: true,
                         },
@@ -82,6 +84,7 @@
 
                     $rootScope.autoPlay = typeof MediaCenterInfo.data.content.autoPlay !== 'undefined' ? MediaCenterInfo.data.content.autoPlay : true;
                     $rootScope.autoPlayDelay = typeof MediaCenterInfo.data.content.autoPlayDelay !== 'undefined' ? MediaCenterInfo.data.content.autoPlayDelay : { label: "Off", value: 0 };
+                    $rootScope.playAllButton = typeof MediaCenterInfo.data.content.playAllButton !== 'undefined' ? MediaCenterInfo.data.content.playAllButton : false;
                 },
                     function fail() {
                         MediaCenterInfo = _infoData;
@@ -158,6 +161,17 @@
                     }
                 };
 
+                WidgetHome.playAll = function(){
+                    WidgetHome.goToMedia(0);
+                }
+
+                WidgetHome.showNumberOfItems = function (){
+                    if(WidgetHome.totalRecord != null){
+                        return WidgetHome.totalRecord+" "+ strings.get("playAllHeader.plAllItems");
+                    }
+                    else return strings.get("playAllHeader.plAllLoading");
+                }
+
                 WidgetHome.setEmptyState = function () {
                     $rootScope.showFeed = true;
                     $rootScope.showEmptyState = true;
@@ -197,8 +211,9 @@
                             $rootScope.forceAutoPlay = false; // WidgetHome.media.data.content.forceAutoPlay
                             $rootScope.skipMediaPage = WidgetHome.media.data.design.skipMediaPage;
 
-                            $rootScope.autoPlay = typeof MediaCenterInfo.data.content.autoPlay !== 'undefined' ? MediaCenterInfo.data.content.autoPlay : true;
+                            $rootScope.autoPlay = typeof WidgetHome.media.data.content.autoPlay !== 'undefined' ? WidgetHome.media.data.content.autoPlay : true;
                             $rootScope.autoPlayDelay = typeof WidgetHome.media.data.content.autoPlayDelay !== 'undefined' ? WidgetHome.media.data.content.autoPlayDelay : { label: "Off", value: 0 };
+                            $rootScope.playAllButton = typeof WidgetHome.media.data.content.playAllButton !== 'undefined' ? WidgetHome.media.data.content.playAllButton : false;
 
                             if (view && event.data.content && event.data.content.images) {
                                 view.loadItems(event.data.content.images);
@@ -331,7 +346,7 @@
                         WidgetHome.items.splice(index, 1);
                         if (!$scope.$$phase && !$scope.$root.$$phase) $scope.$apply();
                         buildfire.dialog.toast({
-                            message: `Item removed from playlist`,
+                            message: strings.get('playlist.removedFromPlaylist'),
                             type: 'success',
                             duration: 2000
                         });
@@ -427,6 +442,7 @@
                                         $rootScope.myItems = WidgetHome.items;
                                         resolve();
                                     }
+                                    WidgetHome.totalRecord=WidgetHome.items.length;
                             }).catch(err => {
                                 console.error(err);
                                 resolve()

diff --git a/widget/controllers/widget.media.controller.js b/widget/controllers/widget.media.controller.js
@@ -293,7 +293,7 @@
 
                             $rootScope.autoPlay = typeof WidgetMedia.media.data.content.autoPlay !== 'undefined' ? WidgetMedia.media.data.content.autoPlay : true;
                             $rootScope.autoPlayDelay = typeof WidgetMedia.media.data.content.autoPlayDelay !== 'undefined' ? WidgetMedia.media.data.content.autoPlayDelay : { label: "Off", value: 0 };
-
+                            $rootScope.playAllButton =  typeof WidgetMedia.media.data.content.playAllButton !== 'undefined' ? WidgetMedia.media.data.content.playAllButton : false;
                             // Update Data in media contoller
                             WidgetMedia.fixIOSAutoPlay();
                             $rootScope.refreshItems();

diff --git a/widget/index.html b/widget/index.html
@@ -85,6 +85,7 @@ <h5 class="margin-top-zero">{{delayCountdownText}}</h5>
     </div>
 </body>
 <script>
+    buildfire.appearance.titlebar.show();
     window.strings = new buildfire.services.Strings("en-us", stringsConfig);
     strings.init();
     function callPlayer(frame_id, func, args) {

diff --git a/widget/js/shared/stringsConfig.js b/widget/js/shared/stringsConfig.js
@@ -121,6 +121,23 @@ var stringsConfig = {
         defaultValue: "Remove",
       },
     },
+  },
+  playAllHeader: {
+    title: "Play All",
+    labels: {
+      plAllLoading: {
+        title: "Loading Message",
+        placeholder: "Loading..",
+        maxLength: 50,
+        defaultValue: "Loading..",
+      },
+      plAllItems: {
+        title: "Items Count",
+        placeholder: "Items",
+        maxLength: 70,
+        defaultValue: "Items",
+      }
+    },
   },
     deeplink: {
       title: "Deep link",

diff --git a/widget/templates/home.html b/widget/templates/home.html
@@ -1,4 +1,11 @@
 <div id="home">
+    <div class="box-play-all" ng-show="autoPlay && playAllButton && WidgetHome.totalRecord > 0">
+        <p id="items-play-all">{{WidgetHome.showNumberOfItems()}}</p>
+        <div class="button-play-all primary" ng-click="WidgetHome.playAll()">
+            <div class="image-play-all">
+            </div>
+        </div>
+    </div>
     <div
         ng-if="WidgetHome.media.data.design.listLayout"
         ng-style="WidgetHome.deepLink ? {'visibility':'visible'} : {'visibility':'hidden'}"