0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add new symbols

Browse source
This commit is contained in:
rolux 2011-05-18 09:38:11 +02:00
parent 5f8f1904fd
commit 6b33c631a9
8 changed files with 111 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demos/video/js/video.js
View file

@ -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',

87
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -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();

3
source/Ox.UI/themes/classic/_index.html
View file

@ -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) {

4
source/Ox.UI/themes/classic/svg/symbolAdd.svg
View file

@ -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="0" y1="128" x2="256" y2="128"/>
<line x1="128" y1="16" x2="128" y2="240"/>
<line x1="16" y1="128" x2="240" y2="128"/>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 229 B

After

Width:  |  Height:  |  Size: 231 B

6
source/Ox.UI/themes/classic/svg/symbolEmbed.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 490 B

6
source/Ox.UI/themes/classic/svg/symbolGoToPoster.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 378 B

4
source/Ox.UI/themes/classic/svg/symbolRemove.svg
View file

@ -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">
<line x1="0" y1="128" x2="256" y2="128"/>
<g stroke="#404040" stroke-width="48">
<line x1="16" y1="128" x2="240" y2="128"/>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 175 B

3
source/Ox.UI/themes/classic/svg/symbolSetPoster.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 169 B