feat(playlist): added support for kiosk mode & minor polish/fix, closes #6727

public/app/features/dashboard/dashnav/dashnav.html

@@ -14,6 +14,18 @@
 	</span>
 </a>
 
+<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
+	<li>
+		<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
+	</li>
+	<li>
+		<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
+	</li>
+	<li>
+		<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
+	</li>
+</ul>
+
 <ul class="nav pull-left dashnav-action-icons">
 	<li ng-show="::dashboardMeta.canStar">
 		<a class="pointer" ng-click="starDashboard()">
@@ -68,18 +80,6 @@
 	</li>
 </ul>
 
-<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
-	<li>
-		<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
-	</li>
-	<li>
-		<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
-	</li>
-	<li>
-		<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
-	</li>
-</ul>
-
 <ul class="nav pull-right">
 	<li ng-show="dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
 		<a ng-click="exitFullscreen()">

public/app/features/playlist/playlist_srv.ts

@@ -1,7 +1,6 @@
 ///<reference path="../../headers/common.d.ts" />
 
 import angular from 'angular';
-import config from 'app/core/config';
 import coreModule from '../../core/core_module';
 import kbn from 'app/core/utils/kbn';
 
@@ -11,6 +10,7 @@ class PlaylistSrv {
   private index: number;
   private interval: any;
   private playlistId: number;
+  private startUrl: string;
 
   /** @ngInject */
   constructor(private $rootScope: any, private $location: any, private $timeout: any, private backendSrv: any) { }
@@ -21,7 +21,7 @@ class PlaylistSrv {
     var playedAllDashboards = this.index > this.dashboards.length - 1;
 
     if (playedAllDashboards) {
-      window.location.href = `${config.appSubUrl}/playlists/play/${this.playlistId}`;
+      window.location.href = this.startUrl;
     } else {
       var dash = this.dashboards[this.index];
       this.$location.url('dashboard/' + dash.uri);
@@ -39,6 +39,7 @@ class PlaylistSrv {
   start(playlistId) {
     this.stop();
 
+    this.startUrl = window.location.href;
     this.index = 0;
     this.playlistId = playlistId;
     this.$rootScope.playlistSrv = this;

public/sass/components/_view_states.scss

@@ -9,35 +9,6 @@
   }
 }
 
-.playlist-active {
-  @include hide-controls();
-
-  .navbar-inner {
-    background: transparent;
-  }
-  .navbar-brand-btn,
-  .navbar-page-btn {
-    border: none;
-    background: transparent;
-    .fa, .icon-gf {
-      opacity: 0;
-    }
-  }
-
-  .dashnav-refresh-action,
-  .dashnav-zoom-out,
-  .dashnav-action-icons,
-  .dashnav-move-timeframe  {
-    display: none;
-  }
-
-  .dash-playlist-actions {
-    a {
-      color: $text-color-faint !important;
-    }
-  }
-}
-
 .hide-controls {
   @include hide-controls();
 }
@@ -49,6 +20,7 @@
   }
 }
 
+.playlist-active,
 .user-activity-low {
   .add-row-panel-hint,
   .dash-row-menu-container,
@@ -90,3 +62,12 @@
     transition: transform 1.5s ease-in-out 1s;
   }
 }
+
+.playlist-active {
+  .dash-playlist-actions  {
+    .fa {
+      opacity: 1;
+      color: $text-color-faint !important;
+    }
+  }
+}

public/sass/pages/_dashboard.scss

@@ -218,3 +218,4 @@ div.flot-text {
     padding: 0.5rem .5rem .2rem .5rem;
   }
 }
+