use svg video markers
|
@ -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;
|
||||
|
|
|
@ -79,8 +79,7 @@ Ox.Progressbar = function(options, self) {
|
|||
|
||||
function cancel() {
|
||||
self.cancelled = true;
|
||||
self.options.progress = 1;
|
||||
setProgress();
|
||||
stop();
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
|
||||
|
@ -119,7 +118,11 @@ 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) {
|
||||
self.options.progress == 1 && stop();
|
||||
});
|
||||
}
|
||||
|
||||
function stop() {
|
||||
pause();
|
||||
self.$time && self.$time
|
||||
.addClass('OxSmall')
|
||||
|
@ -127,8 +130,6 @@ Ox.Progressbar = function(options, self) {
|
|||
self.$pauseButton.options({disabled: true});
|
||||
self.$cancelButton.options({disabled: true});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function togglePaused() {
|
||||
self.options.paused = !self.options.paused;
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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
After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
3
source/Ox.UI/themes/classic/svg/markerCut.svg
Normal 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>
|
After Width: | Height: | Size: 168 B |
3
source/Ox.UI/themes/classic/svg/markerIn.svg
Normal 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>
|
After Width: | Height: | Size: 168 B |
3
source/Ox.UI/themes/classic/svg/markerInBottom.svg
Normal 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>
|
After Width: | Height: | Size: 184 B |
3
source/Ox.UI/themes/classic/svg/markerInTop.svg
Normal 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>
|
After Width: | Height: | Size: 182 B |
3
source/Ox.UI/themes/classic/svg/markerOut.svg
Normal 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>
|
After Width: | Height: | Size: 167 B |
3
source/Ox.UI/themes/classic/svg/markerOutBottom.svg
Normal 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>
|
After Width: | Height: | Size: 186 B |
3
source/Ox.UI/themes/classic/svg/markerOutTop.svg
Normal 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>
|
After Width: | Height: | Size: 184 B |
3
source/Ox.UI/themes/classic/svg/markerPlay.svg
Normal 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>
|
After Width: | Height: | Size: 165 B |
|
@ -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 = {}
|
||||
|
|