Layout Editor: we should not show the playlist editor for dynamic pla…

…ylists (#2712) relates to xibosignageltd/xibo-private#838
xibosignage · Aug 28, 2024 · c34e640 · c34e640
1 parent 8be002a
commit c34e640
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 19 deletions.
diff --git a/ui/src/layout-editor/main.js b/ui/src/layout-editor/main.js
@@ -3604,11 +3604,17 @@ lD.openContextMenu = function(obj, position = {x: 0, y: 0}) {
   // and has at least one widget
   layoutObject.playlistCanBeConverted = (
     layoutObject.isPlaylist &&
-    !$(obj).find('.playlist-edit-btn')
-      .hasClass('subplaylist-inline-edit-btn') &&
+    !$(obj).hasClass('playlist-global-editable') &&
     layoutObject.playlists.widgets.length > 0
   );
 
+  // Check if it's a dynamic playlist
+  layoutObject.isDynamicPlaylist =
+    (
+      layoutObject.isPlaylist &&
+      $(obj).hasClass('playlist-dynamic')
+    );
+
   // Create menu and append to the designer div
   // ( using the object extended with translations )
   lD.editorContainer.append(

diff --git a/ui/src/layout-editor/viewer.js b/ui/src/layout-editor/viewer.js
@@ -907,6 +907,7 @@ Viewer.prototype.handleInteractions = function() {
 
           if (
             $target.data('subType') === 'playlist' &&
+            !$target.hasClass('playlist-dynamic') &&
             $target.hasClass('editable')
           ) {
             // Edit region if it's a playlist
@@ -1307,14 +1308,26 @@ Viewer.prototype.renderRegion = function(
         isEmpty: res.extra && res.extra.empty,
         trans: viewerTrans,
         canEditPlaylist: false,
+        isDynamicPlaylist: false,
       };
 
       // Append playlist controls using appendOptions
       const appendPlaylistControls = function() {
+        // Mark playlist container as global-editable or dynamic
+        $container.toggleClass(
+          'playlist-global-editable',
+          appendOptions.canEditPlaylist,
+        );
+        $container.toggleClass(
+          'playlist-dynamic',
+          appendOptions.isDynamicPlaylist,
+        );
+
+        // Append playlist controls to container
         $container.append(viewerPlaylistControlsTemplate(appendOptions));
       };
 
-      // If it's playslist with a single subplaylist widget
+      // If it's playlist with a single subplaylist widget
       if (
         Object.keys(region.widgets).length === 1 &&
         Object.values(region.widgets)[0].subType === 'subplaylist' &&
@@ -1336,8 +1349,14 @@ Viewer.prototype.renderRegion = function(
             success: function(_res) {
               // User has permissions
               if (_res.data && _res.data.length > 0) {
-                appendOptions.canEditPlaylist = true;
-                appendOptions.canEditPlaylistId = subPlaylistId;
+                // Check if playlist is dynamic
+                if (_res.data[0].isDynamic === 1) {
+                  appendOptions.isDynamicPlaylist = true;
+                } else {
+                  // If it's not dynamic, enable editing
+                  appendOptions.canEditPlaylist = true;
+                  appendOptions.canEditPlaylistId = subPlaylistId;
+                }
               }
 
               // Append playlist controls

diff --git a/ui/src/style/layout-editor.scss b/ui/src/style/layout-editor.scss
@@ -459,7 +459,7 @@ body.editor-opened {
         .designer-region-playlist {
             background: transparent;
 
-            .playlist-edit-btn {
+            .playlist-edit-btn, .dynamic-playlist-icon {
                 position: absolute;
                 top: 2px;
                 right: 2px;
@@ -488,6 +488,12 @@ body.editor-opened {
                 }
             }
 
+            .dynamic-playlist-icon {
+                background-color: darken($xibo-color-primary, 20%);
+                opacity: 0.7;
+                cursor: inherit;
+            }
+
             &:hover > .playlist-edit-btn {
                 opacity: 0.7;
 

diff --git a/ui/src/templates/context-menu.hbs b/ui/src/templates/context-menu.hbs
@@ -62,15 +62,17 @@
             {{/eq}}
 
             {{#if isPlaylist}}
-                <div class="context-menu-btn editPlaylistBtn" data-title="{{trans.editPlaylist}}" data-action="editPlaylist" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
-                    <i class="fa fa-edit"></i><span>{{trans.editPlaylist}}</span>
-                </div>
-
-                {{#if playlistCanBeConverted}}
-                    <div class="context-menu-btn convertPlaylistButton" data-title="{{trans.convertPlaylistHelpText}}" data-action="convertPlaylist" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
-                        <i class="fa fa-refresh"></i><span>{{trans.convertPlaylist}}</span>
+                {{#unless isDynamicPlaylist}}
+                    <div class="context-menu-btn editPlaylistBtn" data-title="{{trans.editPlaylist}}" data-action="editPlaylist" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                        <i class="fa fa-edit"></i><span>{{trans.editPlaylist}}</span>
                     </div>
-                {{/if}}
+
+                    {{#if playlistCanBeConverted}}
+                        <div class="context-menu-btn convertPlaylistButton" data-title="{{trans.convertPlaylistHelpText}}" data-action="convertPlaylist" data-toggle="tooltip" data-container=".context-menu" data-placement="bottom">
+                            <i class="fa fa-refresh"></i><span>{{trans.convertPlaylist}}</span>
+                        </div>
+                    {{/if}}
+                {{/unless}}
             {{/if}}
 
             {{#if isFrameOrZone}}

diff --git a/ui/src/templates/viewer-playlist-controls.hbs b/ui/src/templates/viewer-playlist-controls.hbs
@@ -1,8 +1,14 @@
-<div class="playlist-edit-btn viewer-object-select {{#if canEditPlaylist}}subplaylist-inline-edit-btn{{/if}}"
-    data-child-playlist-id="{{canEditPlaylistId}}"
-    title="{{trans.editPlaylistTitle}}">
-    <i class="fa fa-list-ol" aria-hidden="true"></i>
-</div>
+{{#if isDynamicPlaylist}}
+    <div class="dynamic-playlist-icon" title="{{trans.dynamicPlaylistTitle}}">
+        <i class="fa fa-magic" aria-hidden="true"></i>
+    </div>    
+{{else}}
+    <div class="playlist-edit-btn viewer-object-select {{#if canEditPlaylist}}subplaylist-inline-edit-btn{{/if}}"
+        data-child-playlist-id="{{canEditPlaylistId}}"
+        title="{{trans.editPlaylistTitle}}">
+        <i class="fa fa-list-ol" aria-hidden="true"></i>
+    </div>
+{{/if}}
 {{#if isEmpty}}
     <div class="playlist-preview-empty">
         <i alt="{{ "A playlist region" }}"

diff --git a/views/layout-designer-page.twig b/views/layout-designer-page.twig
@@ -93,6 +93,7 @@
                     empty: '{{ "Empty Playlist"|trans }}',
                     invalidRegion: '{{ "Invalid Region"|trans }}',
                     editPlaylistTitle: '{{ "Edit Playlist"|trans }}',
+                    dynamicPlaylistTitle: '{{ "Dynamic Playlist"|trans }}',
                 };
 
                 var timelineTrans = {