From 2e860071877d4503f28cdd8c933e5fd541faf482 Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Tue, 4 Feb 2014 09:32:53 +0000
Subject: [PATCH] VideoPlayer: use new video icon, avoid showing first frame of
 video if position is set, fix showIcon/showIconOnLoad, remove non existing
 options from documentation

---
 source/Ox.UI/js/Video/VideoPlayer.js | 57 +++++++++++++++-------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js
index 18e87f45..9735ee9d 100644
--- a/source/Ox.UI/js/Video/VideoPlayer.js
+++ b/source/Ox.UI/js/Video/VideoPlayer.js
@@ -39,9 +39,6 @@ Ox.VideoPlayer <f> Generic Video Player
         height <n|144> Height in px (excluding external controls)
         in <n> In point (sec)
         invertHighlight <b|false> If true, invert selection highlight on timeline
-        keepIconVisible <b|false> If true, play icon stays visible after mouseleave
-        keepLargeTimelineVisible <b|false> If true, large timeline stays visible after mouseleave
-        keepLogoVisible <b|false> If true, logo stays visible after mouseleave
         logo <s|''> Logo image URL
         logoLink <s|''> Logo link URL
         logoTitle <s|''> Text for Logo tooltip // fixme: shouldn't this be logoTooltip then?s
@@ -139,9 +136,6 @@ Ox.VideoPlayer = function(options, self) {
             fullscreen: false,
             height: 144,
             'in': 0,
-            keepIconVisible: false,
-            keepLargeTimelineVisible: false,
-            keepLogoVisible: false,
             logo: '',
             logoLink: '',
             logoTitle: '',
@@ -363,8 +357,7 @@ Ox.VideoPlayer = function(options, self) {
 
     if (
         (!self.options.externalControls &&
-        (self.options.controlsTop.length || self.options.controlsBottom.length)) ||
-        self.options.showIcon
+        (self.options.controlsTop.length || self.options.controlsBottom.length))
     ) {
         that.on({
             mouseenter: function() {
@@ -433,6 +426,8 @@ Ox.VideoPlayer = function(options, self) {
             .appendTo(self.$videoContainer);
 
         self.$video.$element.css({position: 'absolute'});
+        // avoid showing first frame
+        self.$video.hide();
 
     } else {
 
@@ -541,7 +536,7 @@ Ox.VideoPlayer = function(options, self) {
             .attr({
                 src: Ox.UI.getImageURL('symbol' + (
                     self.options.paused ? 'Play' : 'Pause'
-                ), 'video')
+                ), 'videoIcon')
             })
             .appendTo(self.$videoContainer);
         if (self.options.showIcon) {
@@ -560,7 +555,7 @@ Ox.VideoPlayer = function(options, self) {
             .addClass('OxCensoredIcon OxVideo')
             .attr({
                 src: Ox.UI.getImageURL(
-                    'symbol' + self.options.censoredIcon, 'video'
+                    'symbol' + self.options.censoredIcon, 'videoIcon'
                 )
             })
             .hide()
@@ -1772,6 +1767,15 @@ Ox.VideoPlayer = function(options, self) {
         });
     }
 
+    function hidePoster() {
+        if (self.posterIsVisible) {
+            self.$poster.animate({
+                opacity: 0
+            }, 250);
+            self.posterIsVisible = false;
+        }
+    }
+
     function isEqual(a, b) {
         return Math.abs(a - b) < 0.001;
     }
@@ -1846,12 +1850,12 @@ Ox.VideoPlayer = function(options, self) {
 
         hideLoadingIcon();
         if (self.options.showIcon || self.options.showIconOnLoad) {
-            //!self.options.keepIconVisible && self.$playIcon.addClass('OxInterface');
-            if (self.options.showIconOnLoad) {
-                self.$playIcon.animate({
-                    opacity: 1
-                }, 250);
-            }
+            self.$playIcon.animate({
+                opacity: 1
+            }, 250);
+        }
+        if (self.options.showControlsOnLoad) {
+            showControls();
         }
         !hadDuration && self.$timeline && self.$timeline.replaceWith(
             self.$timeline = getTimeline()
@@ -2079,7 +2083,9 @@ Ox.VideoPlayer = function(options, self) {
         self.seekTimeout = 0;
         Ox.Log('Video', 'hide loading icon')
         hideLoadingIcon();
+        self.$video.show();
         self.$playIcon && self.$playIcon.show();
+        hidePoster();
     }
 
     function seeking() {
@@ -2144,12 +2150,6 @@ Ox.VideoPlayer = function(options, self) {
                 }, 250);
                 self.iconIsVisible = false;
             }
-            if (self.posterIsVisible) {
-                self.$poster.animate({
-                    opacity: 0
-                }, 250);
-                self.posterIsVisible = false;
-            }
             self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
                 position: self.options.position
             });
@@ -2530,21 +2530,26 @@ Ox.VideoPlayer = function(options, self) {
             clearInterval(self.playInterval);
             if (self.options.showIcon) {
                 togglePlayIcon();
-                self.options.showIcon && self.$playIcon.animate({
+                self.$playIcon.animate({
                     opacity: 1
                 }, 250);
             }
             self.playInToOut = false;
         } else {
+            hidePoster();
             if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
                 setPosition(self.options['in']);
             }
             self.$video.play();
             self.playInterval = setInterval(playing, self.millisecondsPerFrame);
-            if (self.options.showIcon) {            
-                self.options.showIcon && self.$playIcon.animate({
+            if (self.options.showIcon) {
+                self.$playIcon.animate({
                     opacity: 0
                 }, 250, togglePlayIcon);
+            } else if (self.options.showIconOnLoad) {
+                self.$playIcon.animate({
+                    opacity: 0
+                }, 250);
             }
             self.options.showMarkers && hideMarkers();
         }
@@ -2563,7 +2568,7 @@ Ox.VideoPlayer = function(options, self) {
         self.$playIcon.attr({
             src: Ox.UI.getImageURL(
                 'symbol' + (self.options.paused ? 'Play' : 'Pause'
-            ), 'video')
+            ), 'videoIcon')
         });
     }