add loading/seeking icon

source/Ox.UI/js/Video/Ox.VideoElement.js

@@ -47,6 +47,12 @@ Ox.VideoElement = function(options, self) {
                     that.triggerEvent('progress', {
                         video: self.video
                     });
+                },
+                seeked: function() {
+                    that.triggerEvent('seeked');
+                },
+                seeking: function() {
+                    that.triggerEvent('seeking');
                 }
             });
 

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -65,10 +65,25 @@ Ox.VideoPlayer = function(options, self) {
                     src: getBufferedImageURL()
                 })
                 //self.$bar.html(Ox.formatDuration(data.video.buffered.end(data.video.buffered.length - 1)))
-            }
+            },
+            seeked: hideLoadingIcon,
+            seeking: showLoadingIcon
         })
         .appendTo(that);
 
+    self.$loadingIcon = $('<img>')
+        .attr({
+            src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
+        })
+        .css({
+            position: 'absolute',
+            left: self.options.width / 2 - 16 + 'px',
+            top: self.options.height / 2 - 16 + 'px',
+            width: '32px',
+            height: '32px'
+        })
+        .appendTo(that.$element);
+
     self.$controls = Ox.Bar({
             size: self.barHeight
         })
@@ -243,6 +258,7 @@ Ox.VideoPlayer = function(options, self) {
         Ox.print('!!!!', data.video.width, data.video.height, data.video.videoWidth, data.video.videoHeight)
         self.duration = data.video.duration;
         Ox.print('DURATION', Ox.formatDuration(self.duration));
+        hideLoadingIcon();
         that.gainFocus().bindEvent({
             key_space: function() {
                 self.$playButton.toggleTitle();
@@ -294,6 +310,12 @@ Ox.VideoPlayer = function(options, self) {
         }, 1000);
     }
 
+    function hideLoadingIcon() {
+        self.$loadingIcon.animate({
+            opacity: 0
+        }, 0);
+    }
+
     function showControls() {
         clearTimeout(self.controlsTimeout);
         self.$controls.animate({
@@ -301,6 +323,11 @@ Ox.VideoPlayer = function(options, self) {
         }, 250);
     }
 
+    function showLoadingIcon() {
+        self.$loadingIcon.animate({
+            opacity: 1
+        }, 0);
+    }
     function toggleMute() {
         self.$video.toggleMute();
     }