sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

updates for players, timelines and markers

Browse source
This commit is contained in:
rlx 2011-09-02 03:28:43 +00:00
commit 18f117138d
9 changed files with 213 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.UI/js/Core/Ox.Theme.js
View file

@ -38,7 +38,7 @@ Ox.Theme = function(theme) {
$this.attr({
src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme)
});
Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
//Ox.print(Ox.UI.getImageName(src), Ox.UI.getImageURL(Ox.UI.getImageName(src), theme))
});
}
return theme;

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

@ -15,6 +15,7 @@ Ox.BlockVideoTimeline = function(options, self) {
width: 0
})
.options(options || {})
.addClass('OxBlockVideoTimeline')
.css({
position: 'absolute',
//background: 'rgba(192, 192, 192, 0.1)'
@ -62,14 +63,9 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$positionMarker = $('<img>')
.attr({
src: Ox.UI.getImageURL('markerPlay')
})
.css({
position: 'absolute',
width: '9px',
height: '9px',
zIndex: 10
src: Ox.UI.getImageURL('markerPosition')
})
.addClass('OxMarkerPosition')
.appendTo(that.$element);
setPositionMarker();
@ -77,17 +73,10 @@ Ox.BlockVideoTimeline = function(options, self) {
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titlecase)
.addClass('OxMarkerPoint' + titlecase)
.attr({
src: Ox.UI.getImageURL('marker' + titlecase)
})
.css({
position: 'absolute',
width: '6px',
height: '6px',
marginLeft: (point == 'in' ? -1 : 4) + 'px',
zIndex: 10
})
.appendTo(that.$element);
setPointMarker(point);
});
@ -205,13 +194,13 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$pointMarker[point].css({
left: (position % self.options.width) + 'px',
top: (parseInt(position / self.options.width) *
(self.height + self.margin) + 16) + 'px'
(self.height + self.margin) + 15) + 'px'
});
}
function setPositionMarker() {
self.$positionMarker.css({
left: (self.options.position % self.options.width) + 'px',
left: (self.options.position % self.options.width) - 1 + 'px',
top: (parseInt(self.options.position / self.options.width) *
(self.height + self.margin) + 2) + 'px'
});

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

@ -28,7 +28,7 @@ Ox.LargeVideoTimeline = function(options, self) {
width: 0
})
.options(options || {})
.addClass('OxTimelineLarge')
.addClass('OxLargeVideoTimeline')
.mouseleave(mouseleave)
.mousemove(mousemove)
.bindEvent({
@ -75,7 +75,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: Ox.UI.getImageURL('markerPlay')
src: Ox.UI.getImageURL('markerPosition')
})
.appendTo(that.$element);
setMarker();
@ -134,7 +134,7 @@ Ox.LargeVideoTimeline = function(options, self) {
function setMarker() {
self.$markerPosition.css({
left: (self.center - 4) + 'px',
left: self.center + 'px',
});
}

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

@ -71,43 +71,14 @@ Ox.SmallVideoTimeline = function(options, self) {
if (self.options.type == 'player') {
self.$positionMarker = $('<div>')
.css({
position: 'absolute',
width: '14px',
height: '14px',
border: '1px solid rgba(0, 0, 0, 0.5)',
borderRadius: '8px'
})
.append(
self.$positionMarkerRing = $('<div>')
.css({
width: '10px',
height: '10px',
border: '2px solid rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')',
borderRadius: '7px',
})
.append(
$('<div>')
.css({
width: '8px',
height: '8px',
border: '1px solid rgba(0, 0, 0, 0.5)',
borderRadius: '5px',
})
)
)
.addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
.append($('<div>').append($('<div>')))
.appendTo(that.$element);
} else {
self.$positionMarker = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: Ox.UI.getImageURL('markerPlay')
})
.css({
position: 'absolute',
top: '2px',
width: '9px',
height: '9px',
zIndex: 10
src: Ox.UI.getImageURL('markerPosition')
})
.appendTo(that.$element);
}
@ -118,18 +89,10 @@ Ox.SmallVideoTimeline = function(options, self) {
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>')
.addClass('OxPointMarker' + titlecase)
.addClass('OxMarkerPoint' + titlecase)
.attr({
src: Ox.UI.getImageURL('marker' + titlecase)
})
.css({
position: 'absolute',
top: '16px',
width: '6px',
height: '6px',
marginLeft: (point == 'in' ? -1 : 4) + 'px',
zIndex: 10
})
.appendTo(that.$element);
setPointMarker(point);
});
@ -213,7 +176,7 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker.css({
left: self.interfaceLeft + Math.round(
self.options.position * self.imageWidth / self.options.duration
) - (self.options.type == 'editor' ? 4 : 0) + self.options._offset + 'px'
) - (self.options.type == 'editor' ? 5 : 0) + self.options._offset + 'px'
});
}
@ -256,9 +219,9 @@ Ox.SmallVideoTimeline = function(options, self) {
});
setPointMarker('out');
} else if (key == 'paused') {
self.$positionMarkerRing.css({
borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')'
})
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {

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

@ -462,7 +462,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Find',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleFind
})
@ -479,7 +478,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
toggleFullscreen('button');
@ -495,7 +493,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: goToPoint
})
@ -512,7 +509,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Mute', 'Unmute'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
toggleMuted('button');
@ -528,7 +524,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Next',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextClip(1);
@ -548,7 +543,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Play', 'Pause'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
togglePaused('button');
@ -564,7 +558,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Play In to Out',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: playInToOut
})
@ -637,7 +630,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Previous',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextClip(-1);
@ -701,7 +693,6 @@ Ox.VideoPlayer = function(options, self) {
.html(resolution + 'p')
.appendTo($item);
$('<img>')
.addClass('OxVideo')
.attr({
src: resolution == self.options.resolution ?
Ox.UI.getImageURL('symbolCheck', 'modern') :
@ -721,7 +712,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Scale to Fill', 'Scale to Fit'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent('click', function() {
toggleScale('button');
})
@ -735,7 +725,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: setPoint
})
@ -752,7 +741,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Larger', 'Smaller'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent('click', toggleSize)
.appendTo(self['$controls' + titleCase]);
@ -801,7 +789,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Volume',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleVolume
})
@ -844,7 +831,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Previous',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextResult(-1);
@ -859,7 +845,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Next',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
goToNextResult(1);
@ -895,7 +880,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Clear',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
self.options.find = '';
@ -918,7 +902,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Hide',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleFind
})
@ -947,7 +930,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Hide',
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: toggleVolume
})
@ -962,7 +944,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Mute', 'Unmute'],
type: 'image'
})
.addClass('OxVideo')
.bindEvent({
click: function() {
toggleMuted();