New loading animation, mostly done (needs random channel images behind the static)

css/layout.css

@@ -179,12 +179,74 @@ input.add-channel {
 }
 
 #main-container {
-    margin-top: 10px;
+    padding-top: 10px;
     height: 660px;
     max-height: 660px;
     position: relative;
 }
 
+#loading {
+    display: none;
+    position: absolute;
+    z-index: 10001;
+    background: #cee3fe;
+    top: 0;
+    left: 20px;
+    width: 980px;
+    height: 670px;
+}
+
+body.video-loading #loading {
+    display: block;
+}
+
+#loading .tv {
+    position: relative;
+    width: 490px;
+    height: 560px;
+    margin: 0 auto;
+    margin-top: 50px;
+}
+
+#loading .tv:before {
+    content: '';
+    z-index: 1000;
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: url(../img/loading-tv.png);
+}
+
+#loading .tv:after {
+    content: '';
+    z-index: 999;
+    position: absolute;
+    left: 51px;
+    top: 157px;
+    display: block;
+    width: 310px;
+    height: 244px;
+    background: rgba(255, 255, 255, 1) url(../img/static-bg.png);
+
+    animation: animatedBackground 5s linear infinite;
+}
+
+@keyframes animatedBackground {
+    0% {
+        background-color: rgba(255, 255, 255, 1);
+        background-position: 0 0;
+    }
+    50% {
+        background-color: rgba(255, 255, 255, 0.5);
+        background-position: 0 -100%;
+    }
+    100% {
+        background-color: rgba(255, 255, 255, 1);
+        background-position: 0 -200%;
+    }
+}
+
 #video-container {
     position: relative;
 }

css/theme_light.css

@@ -149,5 +149,5 @@ a.nav-button:hover {
 }
 
 .loading {
-    background-image: url('../img/loading_light.gif');
+    /*background-image: url('../img/loading_light.gif');*/
 }

index.html

@@ -150,6 +150,9 @@
   <div id="video-view">
     <div id="video-list" class="animated"></div>
     <div id="main-container" class="grid-container">
+      <div id="loading">
+         <div class="tv"></div>
+      </div>
       <div id="video-container">
         <div id="video-embed" class="grid-100 mobile-grid-100">
 

js/tv.js

@@ -419,7 +419,7 @@ function displayChannel(chan){
                     href: '#' + Globals.channels[chan].feed,
                     title: chan_title
                 })
-                .removeClass('loading') // temp
+                // .removeClass('loading') // temp
                 .find('.thumbnail')
                     .css({
                         'background-image': 'url(' + data.thumbnail_url + ')'
@@ -469,7 +469,8 @@ function loadChannel(channel, video_id) {
     title = "/"+title[1]+"/"+title[2];
 
     $video_title.html('Loading '+title+' ...');
-    $video_embed.addClass('loading');
+    // $video_embed.addClass('loading');
+    $('body').addClass('video-loading');
     $video_embed.empty();
     
     // TODO: Change to highlight the channel in the grid instead
@@ -516,11 +517,12 @@ function loadChannel(channel, video_id) {
                         Globals.cur_video = 0;
                         loadVideo('first');
                     }
-                    $video_embed.removeClass('loading');
+                    // $video_embed.removeClass('loading');
                 }else{
-                    $video_embed.removeClass('loading');
+                    // $video_embed.removeClass('loading');
                     alert('No videos found in '+Globals.channels[this_chan].channel);
                 }
+                $('body').removeClass('video-loading');
             },
             error: function(jXHR, textStatus, errorThrown) {
                 if(textStatus !== 'abort'){
@@ -775,7 +777,8 @@ function loadVideo(video) {
         var $video_embed = $('#video-embed');
 
         $video_embed.empty();
-        $video_embed.addClass('loading');
+        // $video_embed.addClass('loading');
+        $('body').addClass('video-loading');
         
         var embed = $.unescapifyHTML(Globals.videos[this_chan].video[selected_video].media_embed.content);
         embed = prepEmbed(embed, Globals.videos[this_chan].video[selected_video].domain);
@@ -792,7 +795,8 @@ function loadVideo(video) {
                                 + "&url="+redditlink);
         $('#video-share-link').attr("href", redditlink);
         $video_embed.html(embed);
-        $video_embed.removeClass('loading');
+        // $video_embed.removeClass('loading');
+        $('body').removeClass('video-loading');
 
         addListeners(Globals.videos[this_chan].video[selected_video].domain);
 
@@ -901,11 +905,13 @@ function loadPromo(type, id, desc){
 
         var $video_embed = $('#video-embed');
         $video_embed.empty();
-        $video_embed.addClass('loading');
+        // $video_embed.addClass('loading');
+        $('body').addClass('video-loading');
 
         $('#video-title').text(unescape(desc));
         $video_embed.html(embed);
-        $video_embed.removeClass('loading');
+        // $video_embed.removeClass('loading');
+        $('body').removeClass('video-loading');
 
         addListeners(domain);