CC-6095 - placeholder div for empty library views; placeholder icons

airtime_mvc/application/controllers/LocaleController.php

@@ -51,6 +51,9 @@ class LocaleController extends Zend_Controller_Action
             //library/events/library_showbuilder.js
             //already in library/events/library_playlistbuilder.js
             "Please select a cursor position on timeline." => _("Please select a cursor position on timeline."),
+            "You haven't added any " => _("You haven't added any "),
+            "Learn about " => _("Learn about "),
+            "Click 'New' to create one." => _("Click 'New' to create one."),
             //"Adding 1 Item" => _("Adding 1 Item"),
             //"Adding %s Items" => _("Adding %s Items"),
             //library/library.js
@@ -62,7 +65,8 @@ class LocaleController extends Zend_Controller_Action
             "Deselect all" => _("Deselect all"),
             "Are you sure you want to delete the selected item(s)?" => _("Are you sure you want to delete the selected item(s)?"),
             "Scheduled" => _("Scheduled"),
-            "Playlist" => _("Playlist / Block"),
+            "Tracks" => _("Tracks"),
+            "Playlist" => _("Playlist"),
             "Title" => _("Title"),
             "Creator" => _("Creator"),
             "Album" => _("Album"),

airtime_mvc/public/css/dashboard.css

@@ -136,6 +136,33 @@ div.btn > span {
     border: 1px solid #5b5b5b;
 }
 
+#library_empty_image {
+    opacity: .3;
+
+    top: -20px;
+    margin-top: -2px;
+    padding-right: 2px; /* For the webstream icon */
+}
+
+#library_empty {
+    display: none;
+    font-size: 16px;
+    position: absolute;
+    width: 100%;
+    top: 44%;
+    text-align: center;
+    color: #efefef;
+}
+
+#library_empty a {
+    font-size: 0.85em;
+    text-decoration: none;
+}
+
+#library_empty a:visited {
+    color: #1683b0;
+}
+
 thead th.ui-state-default {
     border: solid #666;
     border-width: 0 0 1px 1px;

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

@@ -70,11 +70,60 @@ var AIRTIME = (function(AIRTIME) {
         mod.redrawChosen();
         mod.checkToolBarIcons();
 
-        var cb = $('th.library_checkbox');
+        var cb = $('th.library_checkbox'),
-            if (cb.find("input").length == 0) {
+            emptyRow = $('#library_display').find('tr:has(td.dataTables_empty)');
-                cb.append("<input id='super-checkbox' type='checkbox'>");
+        if (cb.find("input").length == 0) {
+            cb.append("<input id='super-checkbox' type='checkbox'>");
+        }
+
+        if (emptyRow.length > 0) {
+            emptyRow.hide();
+            var opts = {},
+                mediaType = parseInt($('.media_type_selector.selected').attr('data-selection-id')),
+                img = $('#library_empty_image');
+            // TODO: once the new manual pages are added, change links!
+            if (mediaType > 1) {
+                opts.subtext = $.i18n._("Click 'New' to create one now.");
+                opts.href = "http://sourcefabric.booktype.pro/airtime-pro-for-broadcasters/library/";
+            } else {
+                opts.subtext = $.i18n._("Click 'Upload' to add some now.");
+                opts.href = "http://sourcefabric.booktype.pro/airtime-pro-for-broadcasters/add-media/";
             }
 
+            switch(mediaType) {
+                case 1:
+                    opts.media = $.i18n._('tracks');
+                    opts.icon = 'icon-music';
+                    break;
+                case 2:
+                    opts.media = $.i18n._('playlists');
+                    opts.icon = 'icon-list';
+                    break;
+                case 3:
+                    opts.media = $.i18n._('smart blocks');
+                    opts.icon = 'icon-time';
+                    break;
+                case 4:
+                    opts.media = $.i18n._('webstreams');
+                    opts.icon = 'icon-random';
+                    break;
+            }
+
+            // Remove all classes for when we change between empty media types
+            img.removeClass(function() {
+                return $( this ).attr( "class" );
+            });
+            img.addClass("icon-white " + opts.icon);
+            $('#library_empty_text').html(
+                $.i18n._("You haven't added any ") + opts.media + "."
+                + "<br/>" + opts.subtext
+                + "<br/><a href='" + opts.href + "'>" + $.i18n._("Learn about ") + opts.media + "</a>"
+            );
+            $('#library_empty').show();
+        } else {
+            $('#library_empty').hide();
+        }
+
         if ($("#show_builder_table").is(":visible")) {
             $('#library_display tr.lib-audio, tr.lib-pl, tr.lib-stream')
                 .draggable(

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

@@ -565,7 +565,7 @@ var AIRTIME = (function(AIRTIME) {
                         "sZeroRecords": $.i18n._("No matching results found.")
                     });
                     break;
-            };
+            }
 
         }
 
@@ -775,7 +775,7 @@ var AIRTIME = (function(AIRTIME) {
             "oLanguage": getLibraryDatatableStrings(),
 
             // R = ColReorder, C = ColVis
-            "sDom": 'Rf<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t><"F"ilp>>',
+            "sDom": 'Rf<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t<"#library_empty"<"#library_empty_image"><"#library_empty_text">>><"F"ilp>>',
 
             "oColVis": {
                 "sAlign": "right",
@@ -844,8 +844,8 @@ var AIRTIME = (function(AIRTIME) {
 
         AIRTIME.library.setupLibraryToolbar(oTable);
 
-        $libTable.find("tbody").on("dblclick", "tr", function(ev) {
+        $libTable.find("tbody").on("dblclick", "tr[class*='lib'] > td:not(.dataTables_empty)", function(ev) {
-            var data = $(this).data("aData");
+            var tr = $(this).parent, data = tr.data("aData");
             AIRTIME.library.dblClickAdd(data, data.ftype);
         });
 
@@ -878,7 +878,7 @@ var AIRTIME = (function(AIRTIME) {
             }
         });
 
-        $libTable.find("tbody").on("mousedown", "tr[class*='lib'] > td:not(.library_checkbox)", function(ev) {
+        $libTable.find("tbody").on("mousedown", "tr[class*='lib'] > td:not(.library_checkbox, .dataTables_empty)", function(ev) {
             var $tr = $(this).parent(),
             // Get the ID of the selected row
                 $rowId = $tr.attr("id");
@@ -927,7 +927,7 @@ var AIRTIME = (function(AIRTIME) {
             }
         });
 
-        $libTable.find("tbody").on("click", "tr > td:not(.library_checkbox)", function(e) {
+        $libTable.find("tbody").on("click", "tr > td:not(.library_checkbox, .dataTables_empty)", function(e) {
             var tr = $(this).parent();
             if (flagForDeselection) {
                 flagForDeselection = false;