podcast smartblock generation: add success message and conditional hide

airtime_mvc/application/views/scripts/podcast/podcast.phtml

@@ -7,28 +7,34 @@
     <div class="inner_editor_wrapper">
         <form class="podcast-metadata">
             <input ng-value="podcast.id" class="obj_id" type="hidden"/>
-            <div>
+            <div class="podcast-metadata-row">
                 <label for="podcast_name"><?php echo _("Podcast Name: ") ?></label>
-                <input name="podcast_name" type="text" ng-model="podcast.title" value={{podcast.title}} class="podcast-metadata-field">
+                <input name="podcast_name" type="text" ng-model="podcast.title" value={{podcast.title}} >
             </div>
-            <div>
+            <div class="podcast-metadata-row">
                 <label for="podcast_url"><?php echo _("Podcast URL: ") ?></label>
-                <a href="{{podcast.url}}" target="_blank">
+                <a href="{{podcast.url}}" target="_blank" class="podcast-url">{{podcast.url}}</a>
-                    <span class="podcast-metadata-field">{{podcast.url}}</span>
-                </a>
             </div>
-            <div style="padding-top: 0.1em;">
+            <div class="podcast-metadata-row">
-                <label for="podcast_auto_ingest"><input name="podcast_auto_ingest" ng-model="podcast.auto_ingest" type="checkbox" class="float-right"/></label>
+                <div>
-                <span class="podcast-metadata-field"><?php echo _("Automatically download latest episodes?") ?></span>
+                    <input name="podcast_auto_ingest"  id="podcast_auto_ingest" ng-model="podcast.auto_ingest" type="checkbox"/>
+                </div>
+                <label for="podcast_auto_ingest"><?php echo _("Automatically download latest episodes") ?></label>
             </div>
-            <div style="padding-top: 0.1em;">
+            <div class="podcast-metadata-row">
-                <label for="podcast_album_override"><input name="podcast_album_override" ng-model="podcast.album_override" type="checkbox" class="no-float"/></label>
+                <div>
-                <span class="podcast-metadata-field"><?php echo _("Override album name with podcast name during ingest."); ?></span>
+                    <input name="podcast_album_override" id="podcast_album_override" ng-model="podcast.album_override" type="checkbox" />
+                </div>
+                <label for="podcast_album_override"><?php echo _("Overwrite album name"); ?></label>
             </div>
-            <div style="padding-top: 0.1em;">
+            <div class="podcast-metadata-row" >
-                <button ng-click="createSmartblock()" class="btn" type="button" name="smartblock">
+                <div></div>
-                    <?php echo _("Generate Smartblock and Playlist for Podcast") ?>
+                <div>
-                </button>
+                    <button ng-click="createSmartblock()" ng-disabled="!podcast.album_override" class="btn" type="button" name="smartblock">
+                        <?php echo _("Generate Smartblock and Playlist for Podcast") ?>
+                    </button>
+                    <div class='pc-sb-success success' style='display:none'></span></div>
+                </div>
             </div>
         </form>
     </div>
@@ -46,6 +52,6 @@
                 <?php echo _("Save") ?>
             </button>
         </div>
-        <div class='success' style='display:none'></span></div>
+        <div class='success' style='display:none'></div>
     </div>
 </div>

airtime_mvc/public/css/styles.css

@@ -4137,66 +4137,34 @@ li .ui-state-hover {
     padding: 5px 0 0 5px;
 }
 
-.podcast-metadata p {
+.podcast-metadata-row {
-    text-align: center;
+    margin: 10px 0;
-    padding: 0 10px;
+    display: flex;
-    margin-top: 0;
+    align-items: center;
 }
-
+.podcast-metadata .podcast-metadata-row * {
-.podcast-metadata label,
+    line-height: 1.3;
-.podcast-metadata input:not([type="checkbox"]),
+    position: static;
-.podcast-metadata select,
-.podcast-metadata textarea,
-.media-metadata label,
-.media-metadata input:not([type="checkbox"]),
-.media-metadata select,
-.media-metadata textarea {
-    margin: 4px 0;
-}
-
-.podcast-metadata input[type="checkbox"] {
-    float: left;
-    margin: 8px 0 0;
-}
-
-.podcast-metadata input[type="checkbox"].no-float {
     float: none;
-    margin: 8px 0 0;
+}
+.podcast-metadata-row > *:first-child {
+    flex: 0 0 25%;
+    max-width: 25%;
+    text-align: right;
+    padding-right: 2%;
+    box-sizing: border-box;
+}
+.podcast-metadata-row > *:last-child {
+    flex: 0 0 75%;
+    max-width: 75%;
+    box-sizing: border-box;
+    text-align: left;
 }
 
-.podcast-metadata input[type="checkbox"].float-right {
+.podcast-url {
-    float:right;
-    margin: 8px 0 0;
-
-}
-
-.podcast-metadata label,
-.media-metadata label {
-    display: block;
-    width: 20%;
-    float: left;
-}
-
-.podcast-metadata input:not([type="checkbox"]),
-.podcast-metadata select,
-.podcast-metadata textarea,
-.media-metadata input:not([type="checkbox"]),
-.media-metadata select,
-.media-metadata textarea {
-    width: 60%;
-    float: left;
-}
-
-.podcast-metadata-field {
-    display: inline-block;
-    width: 60%;
-    min-width: 60%;
-    max-width: 60%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin: 4px 0;
-    line-height: 24px;
 }
 
 .podcast_episodes_imported {
@@ -4221,6 +4189,17 @@ li .ui-state-hover {
     overflow: auto;
 }
 
+
+#podcast_url_dialog table tr td {
+    padding: 0;
+}
+
+#podcast_url_dialog .errors {
+    display: inline-block;
+    float: right;
+    width: 50%;
+}
+
 /* UI Revamp Video */
 
 #whatsnew {
@@ -4336,16 +4315,6 @@ li .ui-state-hover {
     float: right;
 }
 
-#podcast_url_dialog table tr td {
-    padding: 0;
-}
-
-#podcast_url_dialog .errors {
-    display: inline-block;
-    float: right;
-    width: 50%;
-}
-
 #upgrade-feature-locked {
     margin: 0 auto;
     width: 50%;

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

@@ -61,7 +61,16 @@ var AIRTIME = (function (AIRTIME) {
                     id: $scope.podcast.id,
                     title: $scope.podcast.title
                 }, 
-                callback
+                function() {
+                    var successMsg = $('.active-tab .pc-sb-success')
+                    successMsg.text($.i18n._('Smartblock and playlist generated'));
+                    successMsg.show();
+                    setTimeout(function(){
+                        successMsg.hide();
+                    }, 5000);
+                    dt = $('table[id="library_display"]').dataTable();
+                    dt.fnStandingRedraw();
+                }
             );
             // save podcast
             $scope.savePodcast();