add new symbols

demos/video/js/video.js

@@ -40,11 +40,14 @@ Ox.load('UI', {
                     enableVolume: true,
                     focus: 'mouseenter',
                     height: 192,
+                    'in': 3128.72, 
                     logoLink: 'http://next.0xdb.org/' + id,
                     logoTitle: 'Watch on 0xdb',
                     logo: 'png/logo.png',
+                    out: 3130.72,
                     paused: true,
                     poster: poster,
+                    posterFrame: 3168.04,
                     //showIconOnLoad: true,
                     showProgress: false,
                     subtitles: 'srt/' + id + '.srt',

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

@@ -96,6 +96,7 @@ Ox.VideoPlayer = function(options, self) {
             playInToOut: false,
             position: 0,
             poster: '',
+            posterFrame: -1,
             preload: 'auto',
             out: 0,
             resolution: 0,
@@ -355,6 +356,70 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    self.$posterMarker = $('<div>')
+        .css({
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+        })
+        .hide()
+        .appendTo(self.$videoContainer);
+
+    self.$posterMarkerLeft = $('<div>')
+        .css({
+            float: 'left',
+            background: 'rgba(0, 0, 0, 0.5)'
+        })
+        .css({
+            width: Math.floor((self.options.width - self.options.height) / 2) + 'px',
+            height: self.options.height + 'px'
+        })
+        .appendTo(self.$posterMarker);
+
+    self.$posterMarkerCenter = $('<div>')
+        .css({
+            border: '1px solid rgba(255, 255, 255, 0.1)'
+        })
+        .css({
+            float: 'left',
+            width: (self.options.height - 2) + 'px',
+            height: (self.options.height - 2) + 'px'
+        })
+        .appendTo(self.$posterMarker);
+
+    self.$posterMarkerRight = $('<div>')
+        .css({
+            background: 'rgba(0, 0, 0, 0.5)'
+        })
+        .css({
+            float: 'left',
+            width: Math.ceil((self.options.width - self.options.height) / 2) + 'px',
+            height: self.options.height + 'px'
+        })
+        .appendTo(self.$posterMarker);
+
+    self.$pointMarker = {};
+    ['in', 'out'].forEach(function(point) {
+        self.$pointMarker[point] = {};
+        ['top', 'bottom'].forEach(function(edge) {
+            var titleCase = Ox.toTitleCase(point) + Ox.toTitleCase(edge);
+            self.$pointMarker[point][edge] = $('<img>')
+                .addClass('OxMarkerPoint OxMarker' + titleCase)
+                .attr({
+                    src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png'
+                })
+                .hide()
+                .appendTo(self.$videoContainer);
+            /*
+            if (self.options.points[i] == self.options.position) {
+                self.$pointMarker[point][edge].show();
+            }
+            */
+        });
+    });
+
     if (self.options.subtitles.length || true) { // fixme
         self.$subtitle = $('<div>')
             //.addClass('OxSubtitle')
@@ -1547,6 +1612,26 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    function setMarkers() {
+        self.options.position == self.options.posterFrame ?
+            self.$posterMarker.show() : self.$posterMarker.hide();
+        Ox.forEach(self.$pointMarker, function(markers, point) {
+            Ox.forEach(markers, function(marker) {
+                self.options.position == self.options[point] ?
+                    marker.show() : marker.hide();
+            });
+        });
+    }
+
+    function hideMarkers() {
+        self.$posterMarker.hide();
+        Ox.forEach(self.$pointMarker, function(markers) {
+            Ox.forEach(markers, function(marker) {
+                marker.hide();
+            });
+        });
+    }
+
     function setPosition(position, from) {
         position = Ox.limit(position, self['in'], self['out']);
         self.options.position = Math.round(
@@ -1567,6 +1652,7 @@ Ox.VideoPlayer = function(options, self) {
             }, 250);
             self.posterIsVisible = false;
         }
+        self.options.paused && setMarkers();
         self.$subtitle && setSubtitle();
         self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
             position: self.options.position
@@ -1913,6 +1999,7 @@ Ox.VideoPlayer = function(options, self) {
                     opacity: 0
                 }, 250, togglePlayIcon);
             }
+            hideMarkers();
         }
         if (self.$playButton && from != 'button') {
             self.$playButton.toggleTitle();

source/Ox.UI/themes/classic/_index.html

@@ -56,12 +56,13 @@
                     'arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown',
                     'left', 'right', 'up', 'down',
                     'pause', 'playInToOut', 'goToIn', 'goToOut', 'setIn', 'setOut',
+                    'goToPoster', 'setPoster',
                     'center', 'zoom', 'grow', 'shrink', 'fill', 'fit',
                     'unmute', 'volumeUp', 'volumeDown', 'mute',
                     'undo', 'redo', 'unlock', 'lock',
                     'mount', 'unmount', 'sync',
                     'info', 'warning', 'help',
-                    'check', 'bracket',
+                    'check', 'embed', 'bracket',
                     'delete', 'download', 'edit', 'find', 'flag', 'like',
                     'publish', 'set', 'star', 'user', 'view', 'loading'
                 ].forEach(function(symbol) {

source/Ox.UI/themes/classic/svg/symbolAdd.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
     <g stroke="#404040" stroke-width="48">
-        <line x1="128" y1="0" x2="128" y2="256"/>
+        <line x1="128" y1="16" x2="128" y2="240"/>
-        <line x1="0" y1="128" x2="256" y2="128"/>
+        <line x1="16" y1="128" x2="240" y2="128"/>
     </g>
 </svg>

source/Ox.UI/themes/classic/svg/symbolEmbed.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <line x1="88" y1="40" x2="40" y2="128" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
+    <line x1="40" y1="128" x2="88" y2="216" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
+    <line x1="168" y1="40" x2="216" y2="128" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
+    <line x1="216" y1="128" x2="168" y2="216" stroke="#404040" stroke-linecap="round" stroke-width="48"/>
+</svg>

source/Ox.UI/themes/classic/svg/symbolGoToPoster.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <polygon points="40,32 136,128 40,224" fill="#404040"/>
+    <line x1="128" y1="48" x2="208" y2="48" stroke="#404040" stroke-width="32"/>
+    <line x1="192" y1="32" x2="192" y2="224" stroke="#404040" stroke-width="32"/>
+    <line x1="208" y1="208" x2="128" y2="208" stroke="#404040" stroke-width="32"/>
+</svg>

source/Ox.UI/themes/classic/svg/symbolRemove.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
-    <g stroke="#404040" stroke-width="48" stroke-linecap="round">
+    <g stroke="#404040" stroke-width="48">
-        <line x1="0" y1="128" x2="256" y2="128"/>
+        <line x1="16" y1="128" x2="240" y2="128"/>
     </g>
 </svg>

source/Ox.UI/themes/classic/svg/symbolSetPoster.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+    <rect x="80" y="48" width="96" height="160" fill="none" stroke="#404040" stroke-width="32"/>
+</svg>