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

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

@ -79,8 +79,7 @@ Ox.Progressbar = function(options, self) {
function cancel() {
self.cancelled = true;
self.options.progress = 1;
setProgress();
stop();
that.triggerEvent('cancel');
}
@ -119,17 +118,19 @@ Ox.Progressbar = function(options, self) {
self.$progress.stop().animate({
width: Math.round(14 + self.options.progress * (self.trackWidth - 16)) + 'px'
}, 250, function() {
if (self.options.progress == 1) {
pause();
self.$time && self.$time
.addClass('OxSmall')
.html(self.cancelled ? 'Cancelled' : 'Complete');
self.$pauseButton.options({disabled: true});
self.$cancelButton.options({disabled: true});
}
self.options.progress == 1 && stop();
});
}
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() {
self.options.paused = !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>')
.attr({
src: Ox.UI.PATH + 'png/videoMarkerPlay.png'
src: Ox.UI.getImageURL('markerPlay')
})
.css({
position: 'absolute',
width: '9px',
height: '5px',
height: '9px',
zIndex: 10
})
.appendTo(that.$element);
@ -75,11 +75,11 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$pointMarker = {};
['in', 'out'].forEach(function(point) {
var titleCase = Ox.toTitleCase(point);
var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titleCase)
.addClass('OxPointMarker' + titlecase)
.attr({
src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png'
src: Ox.UI.getImageURL('marker' + titlecase)
})
.css({
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>')
.addClass('OxCut')
.attr({
src: Ox.UI.PATH + 'png/videoMarkerCut.png'
src: Ox.UI.getImageURL('markerCut')
})
.css({
left: (v * self.fps) + 'px'
@ -75,7 +75,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: Ox.UI.PATH + 'png/videoMarkerPlay.png'
src: Ox.UI.getImageURL('markerPlay')
})
.appendTo(that.$element);
setMarker();
@ -85,7 +85,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$pointMarker[point] = $('<img>')
.addClass('OxMarkerPoint' + titlecase)
.attr({
src: Ox.UI.PATH + 'png/videoMarker' + titlecase + '.png'
src: Ox.UI.getImageURL('marker' + titlecase)
})
.appendTo(self.$timeline);
setPointMarker(point);

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

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