SAAS-989 - Move file metadata editor to right-hand showbuilder pane

airtime_mvc/application/forms/EditAudioMD.php

@@ -11,15 +11,13 @@ class Application_Form_EditAudioMD extends Zend_Form
          // Set the method for the display form to POST
         $this->setMethod('post');
 
-        $this->addElement('hidden', 'file_id', array(
+        $file_id = new Zend_Form_Element_Hidden('file_id');
-            'value' => $p_id
+        $file_id->setValue($p_id);
-        ));
+        $file_id->addDecorator('HtmlTag', array('tag' => 'div', 'style' => 'display:none'));
+        $file_id->removeDecorator('Label');
+        $this->addElement($file_id);
+
         // Add title field
-        /*$this->addElement('text', 'track_title', array(
-            'label'      => _('Title:'),
-            'class'      => 'input_text',
-            'filters'    => array('StringTrim'),
-        ));*/
         $track_title = new Zend_Form_Element_Text('track_title');
         $track_title->class = 'input_text';
         $track_title->setLabel(_('Title:'))
@@ -30,11 +28,6 @@ class Application_Form_EditAudioMD extends Zend_Form
         $this->addElement($track_title);
 
         // Add artist field
-        /*$this->addElement('text', 'artist_name', array(
-            'label'      => _('Creator:'),
-            'class'      => 'input_text',
-            'filters'    => array('StringTrim'),
-        ));*/
         $artist_name = new Zend_Form_Element_Text('artist_name');
         $artist_name->class = 'input_text';
         $artist_name->setLabel(_('Creator:'))
@@ -51,7 +44,7 @@ class Application_Form_EditAudioMD extends Zend_Form
             ->setFilters(array('StringTrim'))
             ->setValidators(array(
                 new Zend_Validate_StringLength(array('max' => 512))
-            ));;
+            ));
         $this->addElement($album_title);
 
         // Add track number field
@@ -178,7 +171,7 @@ class Application_Form_EditAudioMD extends Zend_Form
         // Add the submit button
         $this->addElement('button', 'editmdsave', array(
             'ignore'     => true,
-            'class'    => 'btn',
+            'class'      => 'btn btn-small',
             'label'      => _('Save'),
             'decorators' => array(
                 'ViewHelper'
@@ -188,7 +181,7 @@ class Application_Form_EditAudioMD extends Zend_Form
         // Add the submit button
         $this->addElement('button', 'editmdcancel', array(
             'ignore'   => true,
-            'class'    => 'btn md-cancel',
+            'class'    => 'btn btn-small md-cancel',
             'label'    => _('Cancel'),
             'decorators' => array(
                 'ViewHelper'

airtime_mvc/public/css/_showbuilder.css

@@ -37,23 +37,28 @@ div.ColVis_collectionBackground {
 /* Scroll bars */
 
 ::-webkit-scrollbar {
-    width: 8px;
+    width: 7px;
-    height: 8px;
+    height: 7px;
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    background: transparent none;
-    /*border-radius: 10px;*/
+}
+
+.wrapper::-webkit-scrollbar-track {
+    background-color: rgba(255, 93, 26, .2);
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.75);
 }
 
 ::-webkit-scrollbar-thumb {
     background-color: #ff5d1a;
-    /*border-radius: 10px;*/
+    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.75);
+    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.75);
 }
 
 ::-webkit-scrollbar-corner {
-    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.75);
+    background-color: #000;
 }
 
 /* Show Builder*/
@@ -108,9 +113,6 @@ div.ColVis_collectionBackground {
         flex: 8 100%;
         min-height: 50%;
     }
-    #side_playlist {
-        margin-top: 0 !important;
-    }
     #media_type_nav {
         display: -webkit-box;
         display: -moz-box;
@@ -139,8 +141,11 @@ div.ColVis_collectionBackground {
 
 @media screen and (max-width: 780px) {
     .wrapper {
-        height: 100% !important; /* Correct for margins */
+        /*height: 100% !important; /!* Correct for margins *!/*/
-        padding: 0 !important;
+        padding: 4px !important;
+    }
+    #media_type_nav {
+        min-width: 555px;
     }
 }
 
@@ -239,7 +244,7 @@ div.ColVis_collectionBackground {
 
 #advanced_search {
     position: absolute;
-    left: -500px;
+    left: -420px;
     padding: 5px;
     margin-top: -2px;
 }
@@ -368,6 +373,43 @@ div.ColVis_collectionBackground {
 
 /* Media editors */
 
+/* File Metadata Editor */
+
+#edit-md-dialog {
+    width: 100%;
+    background: none;
+    border: none;
+    box-shadow: none;
+}
+
+#edit-md-dialog label {
+    font-size: 14px;
+    font-weight: normal;
+
+    color: #efefef;
+}
+
+#side_playlist .zend_form dt {
+    float: left;
+    width: 40%;
+
+    text-align: right;
+
+    line-height: 20px;
+    margin: 0 0 10px;
+    padding-right: 4px;
+}
+
+#side_playlist .zend_form dd {
+    float: left;
+    width: auto;
+
+    font-size: 14px;
+    margin: 0 0 10px;
+}
+
+/* Playlist/Block/Webstream Editors */
+
 #side_playlist {
     margin-top: 34px;
     width: 100%; /* Override because we're using flexbox */
@@ -394,8 +436,6 @@ div.ColVis_collectionBackground {
     flex: 1 auto;
     margin-right: 10px;
     text-align: center;
-
-    min-width: 555px;
 }
 
 #media_type_nav div {

airtime_mvc/public/js/airtime/library/_library.js

@@ -508,8 +508,8 @@ var AIRTIME = (function(AIRTIME) {
             "aoColumns": [
                 /* ftype */           { "sTitle" : ""                             , "mDataProp" : "ftype"        , "bSearchable" : false                 , "bVisible"    : false                   }          ,
                 /* Type */            { "sTitle" : ""                             , "mDataProp" : "image"        , "bSearchable" : false                 , "sWidth"      : "16px"                  , "sClass" : "library_type" , "iDataSort" : 0                  }  ,
-                /* Is Scheduled */    { "sTitle" : $.i18n._("Scheduled")          , "mDataProp" : "is_scheduled" , "bVisible"    : false                 , "bSearchable" : false                 , "sWidth"      : "90px"                  , "sClass" : "library_is_scheduled"}  ,
+                ///* Is Scheduled */    { "sTitle" : $.i18n._("Scheduled")          , "mDataProp" : "is_scheduled" , "bVisible"    : false                 , "bSearchable" : false                 , "sWidth"      : "90px"                  , "sClass" : "library_is_scheduled"}  ,
-                /* Is Playlist */     { "sTitle" : $.i18n._("Playlist / Block")   , "mDataProp" : "is_playlist"  , "bSearchable" : false                 , "sWidth"      : "110px"                  , "sClass" : "library_is_playlist"}  ,
+                ///* Is Playlist */     { "sTitle" : $.i18n._("Playlist / Block")   , "mDataProp" : "is_playlist"  , "bSearchable" : false                 , "sWidth"      : "110px"                  , "sClass" : "library_is_playlist"}  ,
                 /* Title */           { "sTitle" : $.i18n._("Title")              , "mDataProp" : "track_title"  , "sClass"      : "library_title"       , "sWidth"      : "170px"                 }          ,
                 /* Creator */         { "sTitle" : $.i18n._("Creator")            , "mDataProp" : "artist_name"  , "sClass"      : "library_creator"     , "sWidth"      : "160px"                 }          ,
                 /* Album */           { "sTitle" : $.i18n._("Album")              , "mDataProp" : "album_title"  , "sClass"      : "library_album"       , "sWidth"      : "150px"                 }          ,
@@ -1203,6 +1203,8 @@ $(document).ready(function() {
                 oTable.fnStandingRedraw();
             }
         });
+
+        AIRTIME.playlist.closeTab();
     });
 
     $('#editmdcancel').live("click", function() {

airtime_mvc/public/js/airtime/library/_spl.js

@@ -16,7 +16,7 @@ var AIRTIME = (function(AIRTIME){
         widgetHeight,
         resizeTimeout,
         width,
-        $plCount = 0,
+        $tabCount = 0,
         $openTabs = {};
 
     function isTimeValid(time) {
@@ -432,29 +432,63 @@ var AIRTIME = (function(AIRTIME){
         $pl.find("#obj_lastMod").val(modified);
     }
 
-    function openPlaylist(json) {
+    /*
-        $plCount++;
+     * Should all be moved to builder.js eventually
+     */
+    function openFileMdEditor(json) {
+        $tabCount++;
         var tabId = $openTabs[json.id];
         if ($openTabs[json.id] !== undefined) {
             AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
             return;
         }
 
-        var wrapper = "<div id='side_playlist' class='pl-content pl-tab-content-" + $plCount + "'><div class='editor_pane_wrapper'></div></div>",
+        var wrapper = "<div id='side_playlist' class='pl-content pl-tab-content-" + $tabCount + "'><div class='editor_pane_wrapper'></div></div>",
-            t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $plCount),
+            t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount),
             pane = $(".editor_pane_wrapper:last"),
-            name = pane.append(json.html).find("#playlist_name_display").text(),
+            name = pane.append(json.dialog).find("#track_title").val() + $.i18n._(" - Metadata Editor"),
-            tab = "<li id='pl-tab-" + $plCount + "' role='presentation' class='active'><a href='#'>" + name + "</a></li>",
+            tab = "<li id='pl-tab-" + $tabCount + "' role='presentation' class='active'><a href='#'>" + name + "</a></li>",
             tabs = $(".nav.nav-tabs");
 
         if (json.id) {
-            $openTabs[json.id] = $plCount;
+            $openTabs[json.id] = $tabCount;
         }
 
-
         $(".nav.nav-tabs li").removeClass("active");
         tabs.append(tab);
-        var newTab = $("#pl-tab-" + $plCount);
+        var newTab = $("#pl-tab-" + $tabCount);
+
+        newTab.on("click", function() {
+            AIRTIME.showbuilder.switchTab(t, newTab);
+        });
+        pane.find("#editmdcancel").on("click", function() {
+            closeTab();
+        });
+        AIRTIME.showbuilder.switchTab(t, newTab);
+    }
+
+    function openPlaylist(json) {
+        $tabCount++;
+        var tabId = $openTabs[json.id];
+        if ($openTabs[json.id] !== undefined) {
+            AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId));
+            return;
+        }
+
+        var wrapper = "<div id='side_playlist' class='pl-content pl-tab-content-" + $tabCount + "'><div class='editor_pane_wrapper'></div></div>",
+            t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount),
+            pane = $(".editor_pane_wrapper:last"),
+            name = pane.append(json.html).find("#playlist_name_display").text(),
+            tab = "<li id='pl-tab-" + $tabCount + "' role='presentation' class='active'><a href='#'>" + name + "</a></li>",
+            tabs = $(".nav.nav-tabs");
+
+        if (json.id) {
+            $openTabs[json.id] = $tabCount;
+        }
+
+        $(".nav.nav-tabs li").removeClass("active");
+        tabs.append(tab);
+        var newTab = $("#pl-tab-" + $tabCount);
 
         newTab.on("click", function() {
             AIRTIME.showbuilder.switchTab(t, newTab);
@@ -464,10 +498,6 @@ var AIRTIME = (function(AIRTIME){
         AIRTIME.showbuilder.switchTab(t, newTab);
         AIRTIME.playlist.init();
 
-        //setUpPlaylist();
-        //setCueEvents();
-        //setFadeEvents();
-
         // functions in smart_blockbuilder.js
         setupUI();
         appendAddButton();
@@ -492,6 +522,10 @@ var AIRTIME = (function(AIRTIME){
         AIRTIME.showbuilder.switchTab($("#show_builder .outer-datatable-wrapper"), $("#timeline-tab"));
     }
 
+    mod.closeTab = function() {
+        closeTab();
+    };
+
     //Purpose of this function is to iterate over all playlist elements
     //and verify whether they can be previewed by the browser or not. If not
     //then the playlist element is greyed out
@@ -1073,6 +1107,10 @@ var AIRTIME = (function(AIRTIME){
             });
     };
 
+    mod.fileMdEdit = function(json) {
+        openFileMdEditor(json);
+    };
+
     mod.fnEdit = function(id, type, url) {
         //openPlaylistPanel();
         stopAudioPreview();

airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js

@@ -307,7 +307,8 @@ var AIRTIME = (function(AIRTIME) {
 
             if (data.ftype === "audioclip") {
                 $.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){
-                    buildEditMetadataDialog(json);
+                    AIRTIME.playlist.fileMdEdit(json);
+                    //buildEditMetadataDialog(json);
                 });
             } else if (data.ftype === "playlist" || data.ftype === "block") {
                 AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit');