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

use svg video markers

Browse source
This commit is contained in:
rlx 2011-09-02 00:32:23 +00:00
parent 12423e7b03
commit 9a7a0acd89
24 changed files with 55 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
source/Ox.UI/css/Ox.UI.css
View file

@ -1815,9 +1815,9 @@ Video
.OxTimelineLarge .OxCut { .OxTimelineLarge .OxCut {
position: absolute; position: absolute;
top: 66px; top: 66px;
width: 2px; width: 4px;
height: 4px; height: 4px;
margin-left: -1px; margin-left: -2px;
z-index: 10; z-index: 10;
} }
.OxTimelineLarge .OxMarkerPointIn { .OxTimelineLarge .OxMarkerPointIn {
@ -1839,7 +1839,7 @@ Video
position: absolute; position: absolute;
top: 2px; top: 2px;
width: 9px; width: 9px;
height: 5px; height: 9px;
z-index: 10; z-index: 10;
} }
.OxTimelineLarge .OxSubtitle { .OxTimelineLarge .OxSubtitle {
@ -1961,10 +1961,11 @@ Video
} }
.OxVideoPlayer .OxPointMarker { .OxVideoPlayer .OxPointMarker {
display: none;
position: absolute; position: absolute;
width: 16px; width: 16px;
height: 16px; height: 16px;
display: none; opacity: 0.5;
} }
.OxVideoPlayer .OxPointMarkerInTop { .OxVideoPlayer .OxPointMarkerInTop {
left: 4px; left: 4px;

21
source/Ox.UI/js/Bar/Ox.Progressbar.js
View file

@ -79,8 +79,7 @@ Ox.Progressbar = function(options, self) {
function cancel() { function cancel() {
self.cancelled = true; self.cancelled = true;
self.options.progress = 1; stop();
setProgress();
that.triggerEvent('cancel'); that.triggerEvent('cancel');
} }
@ -119,17 +118,19 @@ Ox.Progressbar = function(options, self) {
self.$progress.stop().animate({ self.$progress.stop().animate({
width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px' width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px'
}, 250, function() { }, 250, function() {
if (self.options.progress == 1) { self.options.progress == 1 && stop();
pause();
self.$time && self.$time
.addClass('OxSmall')
.html(self.cancelled ? 'Cancelled' : 'Complete');
self.$pauseButton.options({disabled: true});
self.$cancelButton.options({disabled: true});
}
}); });
} }
function stop() {
pause();
self.$time && self.$time
.addClass('OxSmall')
.html(self.cancelled ? 'Cancelled' : 'Complete');
self.$pauseButton.options({disabled: true});
self.$cancelButton.options({disabled: true});
}
function togglePaused() { function togglePaused() {
self.options.paused = !self.options.paused; self.options.paused = !self.options.paused;
if (self.options.paused) { if (self.options.paused) {

10
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -62,12 +62,12 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$positionMarker = $('<img>') self.$positionMarker = $('<img>')
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarkerPlay.png' src: Ox.UI.getImageURL('markerPlay')
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
width: '9px', width: '9px',
height: '5px', height: '9px',
zIndex: 10 zIndex: 10
}) })
.appendTo(that.$element); .appendTo(that.$element);
@ -75,11 +75,11 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$pointMarker = {}; self.$pointMarker = {};
['in', 'out'].forEach(function(point) { ['in', 'out'].forEach(function(point) {
var titleCase = Ox.toTitleCase(point); var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>') self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titleCase) .addClass('OxPointMarker' + titlecase)
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png' src: Ox.UI.getImageURL('marker' + titlecase)
}) })
.css({ .css({
position: 'absolute', position: 'absolute',

6
source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
View file

@ -64,7 +64,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$cuts[i] = $('<img>') self.$cuts[i] = $('<img>')
.addClass('OxCut') .addClass('OxCut')
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarkerCut.png' src: Ox.UI.getImageURL('markerCut')
}) })
.css({ .css({
left: (v * self.fps) + 'px' left: (v * self.fps) + 'px'
@ -75,7 +75,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$markerPosition = $('<img>') self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition') .addClass('OxMarkerPosition')
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarkerPlay.png' src: Ox.UI.getImageURL('markerPlay')
}) })
.appendTo(that.$element); .appendTo(that.$element);
setMarker(); setMarker();
@ -85,7 +85,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$pointMarker[point] = $('<img>') self.$pointMarker[point] = $('<img>')
.addClass('OxMarkerPoint' + titlecase) .addClass('OxMarkerPoint' + titlecase)
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarker' + titlecase + '.png' src: Ox.UI.getImageURL('marker' + titlecase)
}) })
.appendTo(self.$timeline); .appendTo(self.$timeline);
setPointMarker(point); setPointMarker(point);

10
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -100,13 +100,13 @@ Ox.SmallVideoTimeline = function(options, self) {
} else { } else {
self.$positionMarker = $('<img>') self.$positionMarker = $('<img>')
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarkerPlay.png' src: Ox.UI.getImageURL('markerPlay')
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
top: '2px', top: '2px',
width: '9px', width: '9px',
height: '5px', height: '9px',
zIndex: 10 zIndex: 10
}) })
.appendTo(that.$element); .appendTo(that.$element);
@ -116,11 +116,11 @@ Ox.SmallVideoTimeline = function(options, self) {
if (self.options.type == 'editor') { if (self.options.type == 'editor') {
self.$pointMarker = {}; self.$pointMarker = {};
['in', 'out'].forEach(function(point) { ['in', 'out'].forEach(function(point) {
var titleCase = Ox.toTitleCase(point); var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>') self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titleCase) .addClass('OxPointMarker' + titlecase)
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png' src: Ox.UI.getImageURL('marker' + titlecase)
}) })
.css({ .css({
position: 'absolute', position: 'absolute',

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

@ -410,7 +410,7 @@ Ox.VideoPlayer = function(options, self) {
self.$pointMarker[point][edge] = $('<img>') self.$pointMarker[point][edge] = $('<img>')
.addClass('OxPointMarker OxPointMarker' + titleCase) .addClass('OxPointMarker OxPointMarker' + titleCase)
.attr({ .attr({
src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png' src: Ox.UI.getImageURL('marker' + titleCase)
}) })
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
}); });

BIN
source/Ox.UI/png/pluginChromeFrame128.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
source/Ox.UI/png/videoMarkerCut.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
source/Ox.UI/png/videoMarkerIn.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
source/Ox.UI/png/videoMarkerInBottom.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
source/Ox.UI/png/videoMarkerInTop.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
source/Ox.UI/png/videoMarkerOut.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
source/Ox.UI/png/videoMarkerOutBottom.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
source/Ox.UI/png/videoMarkerOutTop.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
source/Ox.UI/png/videoMarkerPlay.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.8 KiB

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="80,240 128,64 176,240" fill="#FFFFFF" stroke="#000000" stroke-width="32"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="32,244 244,32 244,244" fill="#FFFFFF" stroke="#000000" stroke-width="24"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="8,8 88,8 88,168 248,168 248,248 8,248" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 184 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="8,8 248,8 248,88 88,88 88,248 8,248" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 182 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="12,32 224,244 12,244" fill="#FFFFFF" stroke="#000000" stroke-width="24"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 167 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="168,8 248,8 248,248 8,248 8,168 168,168" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 186 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="8,8 248,8 248,248 168,248 168,88 8,88" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 184 B

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

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="16,8 240,8 128,128" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 165 B

2
tools/build/build.py
View file

@ -49,7 +49,7 @@ files = ['Ox.UI/css/Ox.UI.css']
path = source_path + 'Ox.UI/themes/classic/svg/' path = source_path + 'Ox.UI/themes/classic/svg/'
for filename in os.listdir(path): for filename in os.listdir(path):
svg = read_file(path + filename) svg = read_file(path + filename)
svg = svg.replace('#404040', '#FFFFFF').replace('#000000', '#FFFFFF') svg = svg.replace('#000000', '#XXXXXX').replace('#404040', '#XXXXXX').replace('#FFFFFF', '#000000').replace('#XXXXXX', '#FFFFFF')
write_file(path.replace('/classic/', '/modern/') + filename, svg) write_file(path.replace('/classic/', '/modern/') + filename, svg)
imageURLs = {} imageURLs = {}