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

updates for players, timelines and markers

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

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

@ -576,7 +576,7 @@ OxButton
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
//-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
} }
/* /*
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
@ -1798,51 +1798,52 @@ Video
} }
.OxTimelineLarge { .OxLargeVideoTimeline {
position: absolute; position: absolute;
height: 72px; height: 72px;
margin: 0 4px 0 4px; margin: 0 4px 0 4px;
overflow: hidden; overflow: hidden;
} }
.OxTimelineLarge > div { .OxLargeVideoTimeline > div {
position: absolute; position: absolute;
height: 72px; height: 72px;
} }
.OxTimelineLarge > div > img { .OxLargeVideoTimeline > div > img {
position: absolute; position: absolute;
top: 4px; top: 4px;
} }
.OxTimelineLarge .OxCut { .OxLargeVideoTimeline .OxCut {
position: absolute;
top: 66px;
width: 4px;
height: 4px;
margin-left: -2px;
z-index: 10;
}
.OxTimelineLarge .OxMarkerPointIn {
position: absolute; position: absolute;
top: 64px; top: 64px;
width: 6px; width: 6px;
height: 6px; height: 6px;
margin-left: -3px;
z-index: 10;
}
.OxLargeVideoTimeline .OxMarkerPointIn {
position: absolute;
top: 63px;
width: 7px;
height: 7px;
margin-left: -6px;
z-index: 10;
}
.OxLargeVideoTimeline .OxMarkerPointOut {
position: absolute;
top: 63px;
width: 7px;
height: 7px;
z-index: 10;
}
.OxLargeVideoTimeline .OxMarkerPosition {
position: absolute;
top: 2px;
width: 11px;
height: 11px;
margin-left: -5px; margin-left: -5px;
z-index: 10; z-index: 10;
} }
.OxTimelineLarge .OxMarkerPointOut { .OxLargeVideoTimeline .OxSubtitle {
position: absolute;
top: 64px;
width: 6px;
height: 6px;
z-index: 10;
}
.OxTimelineLarge .OxMarkerPosition {
position: absolute;
top: 2px;
width: 9px;
height: 9px;
z-index: 10;
}
.OxTimelineLarge .OxSubtitle {
position: absolute; position: absolute;
bottom: 9px; bottom: 9px;
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
@ -1860,7 +1861,7 @@ Video
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
} }
.OxTimelineLarge .OxSubtitle.OxHighlight { .OxLargeVideoTimeline .OxSubtitle.OxHighlight {
border-color: rgba(255, 255, 0, 1); border-color: rgba(255, 255, 0, 1);
} }
.OxTimelineSmall { .OxTimelineSmall {
@ -1880,17 +1881,60 @@ Video
.OxTimelineSmall > div > .OxTimelineSmallImage { .OxTimelineSmall > div > .OxTimelineSmallImage {
margin-top: 1px; margin-top: 1px;
} }
.OxTimelineSmall .OxMarkerPointIn {
.OxSmallVideoTimeline .OxMarkerPlay {
position: absolute; position: absolute;
width: 6px; width: 14px;
height: 6px; height: 14px;
margin-left: -1px; border-width: 1px;
border-style: solid;
border-radius: 8px;
} }
.OxTimelineSmall .OxMarkerPointOut { .OxSmallVideoTimeline .OxMarkerPlay > div {
width: 10px;
height: 10px;
border-width: 2px;
border-style: solid;
border-radius: 7px;
}
.OxSmallVideoTimeline .OxMarkerPlay > div > div {
width: 8px;
height: 8px;
border-width: 1px;
border-style: solid;
border-radius: 5px;
}
.OxSmallVideoTimeline .OxMarkerPointIn,
.OxBlockVideoTimeline .OxMarkerPointIn {
position: absolute; position: absolute;
width: 6px; width: 7px;
height: 6px; height: 7px;
margin-left: -2px;
z-index: 10;
}
.OxSmallVideoTimeline .OxMarkerPointIn {
top: 15px;
}
.OxSmallVideoTimeline .OxMarkerPointOut,
.OxBlockVideoTimeline .OxMarkerPointOut {
position: absolute;
width: 7px;
height: 7px;
margin-left: 4px; margin-left: 4px;
z-index: 10;
}
.OxSmallVideoTimeline .OxMarkerPointOut {
top: 15px;
}
.OxSmallVideoTimeline .OxMarkerPosition,
.OxBlockVideoTimeline .OxMarkerPosition {
position: absolute;
width: 11px;
height: 11px;
z-index: 10;
}
.OxSmallVideoTimeline .OxMarkerPosition {
top: 2px;
} }
@ -1905,10 +1949,6 @@ Video
.OxVideoPlayer .OxControls { .OxVideoPlayer .OxControls {
position: absolute; position: absolute;
} }
.OxVideoPlayer .OxControls.OxOnScreen {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxVideoPlayer .OxControls > * { .OxVideoPlayer .OxControls > * {
float: left; float: left;
} }
@ -1918,8 +1958,6 @@ Video
right: 0; right: 0;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
display: none; display: none;
} }
.OxVideoPlayer .OxFind > * { .OxVideoPlayer .OxFind > * {
@ -1930,9 +1968,26 @@ Video
padding-top: 2px; padding-top: 2px;
font-size: 9px; font-size: 9px;
text-align: center; text-align: center;
color: rgb(255, 255, 255);
} }
.OxVideoPlayer .OxInput {
background: transparent;
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxVideoPlayer div.OxInput.OxFocus {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxVideoPlayer input.OxInput {
height: 16px;
padding: 0 3px 0 3px;
border: 0;
border-radius: 8px;
}
.OxVideoPlayer .OxLoadingIcon { .OxVideoPlayer .OxLoadingIcon {
position: absolute; position: absolute;
left: 0; left: 0;
@ -1989,7 +2044,6 @@ Video
padding: 2px; padding: 2px;
font-size: 9px; font-size: 9px;
text-align: center; text-align: center;
color: rgb(255, 255, 255);
} }
.OxVideoPlayer .OxPositionInput { .OxVideoPlayer .OxPositionInput {
@ -2010,16 +2064,11 @@ Video
.OxVideoPlayer .OxResolution > div { .OxVideoPlayer .OxResolution > div {
width: 52px; width: 52px;
height: 16px; height: 16px;
background: rgba(32, 32, 32, 0.5);
} }
.OxVideoPlayer .OxResolution > div:first-child { .OxVideoPlayer .OxResolution > div:first-child {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.OxVideoPlayer .OxResolution > div.OxSelected {
background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
}
.OxVideoPlayer .OxResolution > div > * { .OxVideoPlayer .OxResolution > div > * {
float: left; float: left;
} }
@ -2029,7 +2078,6 @@ Video
padding-top: 2px; padding-top: 2px;
font-size: 9px; font-size: 9px;
text-align: right; text-align: right;
color: rgb(255, 255, 255);
cursor: default; cursor: default;
} }
.OxVideoPlayer .OxResolution > div > img { .OxVideoPlayer .OxResolution > div > img {
@ -2045,7 +2093,6 @@ Video
padding: 2px; padding: 2px;
font-size: 9px; font-size: 9px;
text-align: center; text-align: center;
color: rgb(255, 255, 255);
cursor: default; cursor: default;
} }
@ -2061,7 +2108,6 @@ Video
.OxVideoPlayer .OxTitle { .OxVideoPlayer .OxTitle {
padding-top: 1px; padding-top: 1px;
text-align: center; text-align: center;
color: rgb(255, 255, 255);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -2078,8 +2124,6 @@ Video
height: 16px; height: 16px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
display: none; display: none;
} }
.OxVideoPlayer .OxVolume > * { .OxVideoPlayer .OxVolume > * {
@ -2088,25 +2132,16 @@ Video
.OxVideoPlayer .OxVolume .OxRange .OxTrack { .OxVideoPlayer .OxVolume .OxRange .OxTrack {
padding: 1px; padding: 1px;
border: 0; border: 0;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
} }
.OxVideoPlayer .OxVolume .OxRange .OxThumb { .OxVideoPlayer .OxVolume .OxRange .OxThumb {
padding: 1px 7px 1px 7px; padding: 1px 7px 1px 7px;
border: 0; border: 0;
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
} }
.OxVideoPlayer .OxVolume .OxVolumeValue { .OxVideoPlayer .OxVolume .OxVolumeValue {
width: 24px; width: 24px;
padding-top: 2px; padding-top: 2px;
font-size: 9px; font-size: 9px;
text-align: center; text-align: center;
color: rgb(255, 255, 255);
} }
.OxVideoPreview { .OxVideoPreview {

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

@ -38,7 +38,7 @@ Ox.Theme = function(theme) {
$this.attr({ $this.attr({
src: Ox.UI.getImageURL(Ox.UI.getImageName(src), theme) 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; return theme;

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

@ -15,6 +15,7 @@ Ox.BlockVideoTimeline = function(options, self) {
width: 0 width: 0
}) })
.options(options || {}) .options(options || {})
.addClass('OxBlockVideoTimeline')
.css({ .css({
position: 'absolute', position: 'absolute',
//background: 'rgba(192, 192, 192, 0.1)' //background: 'rgba(192, 192, 192, 0.1)'
@ -62,14 +63,9 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$positionMarker = $('<img>') self.$positionMarker = $('<img>')
.attr({ .attr({
src: Ox.UI.getImageURL('markerPlay') src: Ox.UI.getImageURL('markerPosition')
})
.css({
position: 'absolute',
width: '9px',
height: '9px',
zIndex: 10
}) })
.addClass('OxMarkerPosition')
.appendTo(that.$element); .appendTo(that.$element);
setPositionMarker(); setPositionMarker();
@ -77,17 +73,10 @@ Ox.BlockVideoTimeline = function(options, self) {
['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('OxMarkerPoint' + titlecase)
.attr({ .attr({
src: Ox.UI.getImageURL('marker' + titlecase) src: Ox.UI.getImageURL('marker' + titlecase)
}) })
.css({
position: 'absolute',
width: '6px',
height: '6px',
marginLeft: (point == 'in' ? -1 : 4) + 'px',
zIndex: 10
})
.appendTo(that.$element); .appendTo(that.$element);
setPointMarker(point); setPointMarker(point);
}); });
@ -205,13 +194,13 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$pointMarker[point].css({ self.$pointMarker[point].css({
left: (position % self.options.width) + 'px', left: (position % self.options.width) + 'px',
top: (parseInt(position / self.options.width) * top: (parseInt(position / self.options.width) *
(self.height + self.margin) + 16) + 'px' (self.height + self.margin) + 15) + 'px'
}); });
} }
function setPositionMarker() { function setPositionMarker() {
self.$positionMarker.css({ 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) * top: (parseInt(self.options.position / self.options.width) *
(self.height + self.margin) + 2) + 'px' (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 width: 0
}) })
.options(options || {}) .options(options || {})
.addClass('OxTimelineLarge') .addClass('OxLargeVideoTimeline')
.mouseleave(mouseleave) .mouseleave(mouseleave)
.mousemove(mousemove) .mousemove(mousemove)
.bindEvent({ .bindEvent({
@ -75,7 +75,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$markerPosition = $('<img>') self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition') .addClass('OxMarkerPosition')
.attr({ .attr({
src: Ox.UI.getImageURL('markerPlay') src: Ox.UI.getImageURL('markerPosition')
}) })
.appendTo(that.$element); .appendTo(that.$element);
setMarker(); setMarker();
@ -134,7 +134,7 @@ Ox.LargeVideoTimeline = function(options, self) {
function setMarker() { function setMarker() {
self.$markerPosition.css({ 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') { if (self.options.type == 'player') {
self.$positionMarker = $('<div>') self.$positionMarker = $('<div>')
.css({ .addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
position: 'absolute', .append($('<div>').append($('<div>')))
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',
})
)
)
.appendTo(that.$element); .appendTo(that.$element);
} else { } else {
self.$positionMarker = $('<img>') self.$positionMarker = $('<img>')
.addClass('OxMarkerPosition')
.attr({ .attr({
src: Ox.UI.getImageURL('markerPlay') src: Ox.UI.getImageURL('markerPosition')
})
.css({
position: 'absolute',
top: '2px',
width: '9px',
height: '9px',
zIndex: 10
}) })
.appendTo(that.$element); .appendTo(that.$element);
} }
@ -118,18 +89,10 @@ Ox.SmallVideoTimeline = function(options, self) {
['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('OxMarkerPoint' + titlecase)
.attr({ .attr({
src: Ox.UI.getImageURL('marker' + titlecase) 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); .appendTo(that.$element);
setPointMarker(point); setPointMarker(point);
}); });
@ -213,7 +176,7 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker.css({ self.$positionMarker.css({
left: self.interfaceLeft + Math.round( left: self.interfaceLeft + Math.round(
self.options.position * self.imageWidth / self.options.duration 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'); setPointMarker('out');
} else if (key == 'paused') { } else if (key == 'paused') {
self.$positionMarkerRing.css({ self.$positionMarker[
borderColor: 'rgba(255, 255, 255, ' + (self.options.paused ? 0.5 : 1) + ')' self.options.paused ? 'addClass' : 'removeClass'
}) ]('OxPaused');
} else if (key == 'position') { } else if (key == 'position') {
setPositionMarker(); setPositionMarker();
} else if (key == 'results') { } 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', tooltip: 'Find',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: toggleFind click: toggleFind
}) })
@ -479,7 +478,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Enter Fullscreen', 'Exit Fullscreen'], tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
toggleFullscreen('button'); toggleFullscreen('button');
@ -495,7 +493,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point', tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: goToPoint click: goToPoint
}) })
@ -512,7 +509,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Mute', 'Unmute'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
toggleMuted('button'); toggleMuted('button');
@ -528,7 +524,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Next', tooltip: 'Next',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
goToNextClip(1); goToNextClip(1);
@ -548,7 +543,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Play', 'Pause'], tooltip: ['Play', 'Pause'],
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
togglePaused('button'); togglePaused('button');
@ -564,7 +558,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Play In to Out', tooltip: 'Play In to Out',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: playInToOut click: playInToOut
}) })
@ -637,7 +630,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Previous', tooltip: 'Previous',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
goToNextClip(-1); goToNextClip(-1);
@ -701,7 +693,6 @@ Ox.VideoPlayer = function(options, self) {
.html(resolution + 'p') .html(resolution + 'p')
.appendTo($item); .appendTo($item);
$('<img>') $('<img>')
.addClass('OxVideo')
.attr({ .attr({
src: resolution == self.options.resolution ? src: resolution == self.options.resolution ?
Ox.UI.getImageURL('symbolCheck', 'modern') : Ox.UI.getImageURL('symbolCheck', 'modern') :
@ -721,7 +712,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Scale to Fill', 'Scale to Fit'], tooltip: ['Scale to Fill', 'Scale to Fit'],
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent('click', function() { .bindEvent('click', function() {
toggleScale('button'); toggleScale('button');
}) })
@ -735,7 +725,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point', tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: setPoint click: setPoint
}) })
@ -752,7 +741,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Larger', 'Smaller'], tooltip: ['Larger', 'Smaller'],
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent('click', toggleSize) .bindEvent('click', toggleSize)
.appendTo(self['$controls' + titleCase]); .appendTo(self['$controls' + titleCase]);
@ -801,7 +789,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Volume', tooltip: 'Volume',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: toggleVolume click: toggleVolume
}) })
@ -844,7 +831,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Previous', tooltip: 'Previous',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
goToNextResult(-1); goToNextResult(-1);
@ -859,7 +845,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Next', tooltip: 'Next',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
goToNextResult(1); goToNextResult(1);
@ -895,7 +880,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Clear', tooltip: 'Clear',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
self.options.find = ''; self.options.find = '';
@ -918,7 +902,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Hide', tooltip: 'Hide',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: toggleFind click: toggleFind
}) })
@ -947,7 +930,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: 'Hide', tooltip: 'Hide',
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: toggleVolume click: toggleVolume
}) })
@ -962,7 +944,6 @@ Ox.VideoPlayer = function(options, self) {
tooltip: ['Mute', 'Unmute'], tooltip: ['Mute', 'Unmute'],
type: 'image' type: 'image'
}) })
.addClass('OxVideo')
.bindEvent({ .bindEvent({
click: function() { click: function() {
toggleMuted(); toggleMuted();

66
source/Ox.UI/themes/classic/css/classic.css
View file

@ -197,6 +197,11 @@ Forms
background: rgb(192, 192, 192); background: rgb(192, 192, 192);
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
} }
.OxThemeClassic .OxButton.OxSymbol.OxDisabled {
background: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.OxThemeClassic .OxButton.OxSelected, .OxThemeClassic .OxButton.OxSelected,
.OxThemeClassic .OxSelect.OxSelected { .OxThemeClassic .OxSelect.OxSelected {
@ -559,29 +564,54 @@ Video
================================================================================ ================================================================================
*/ */
.OxThemeClassic .OxVideoPlayer .OxInput { .OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay {
background: rgba(0, 0, 0, 0); border-color: rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
} }
.OxThemeClassic .OxVideoPlayer div.OxInput.OxFocus { .OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay > div {
-moz-box-shadow: 0 0 0; border-color: rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 0;
} }
.OxThemeClassic .OxVideoPlayer input.OxInput { .OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay.OxPaused > div {
height: 16px; border-color: rgba(0, 0, 0, 0.5);
padding: 0 3px 0 3px;
border: 0;
border-radius: 8px;
color: rgb(255, 255, 255);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
} }
.OxThemeClassic .OxVideoPlayer .OxRange .OxThumb:active { .OxThemeClassic .OxSmallVideoTimeline .OxMarkerPlay > div > div {
background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5)); border-color: rgba(255, 255, 255, 0.5);
background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
} }
.OxThemeClassic .OxVideoPlayer .OxControls.OxOnScreen {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxFind {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer input.OxInput {
background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
background-image: -webkit-linear-gradient(top, rgba(176, 176, 176, 1), rgba(224, 224, 224, 1));
}
.OxThemeClassic .OxVideoPlayer .OxResolution > div {
background: rgba(224, 224, 224, 0.5);
}
.OxThemeClassic .OxVideoPlayer .OxResolution > div.OxSelected {
background-image: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5));
background-image: -webkit-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(208, 208, 208, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxTrack {
background-image: -moz-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
background-image: -webkit-linear-gradient(top, rgba(192, 192, 192, 0.5), rgba(255, 255, 255, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxThumb {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
.OxThemeClassic .OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(192, 192, 192, 0.5));
}
/* /*
================================================================================ ================================================================================

0
source/Ox.UI/themes/classic/svg/markerPlay.svg → source/Ox.UI/themes/classic/svg/markerPosition.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 165 B

After

Width:  |  Height:  |  Size: 165 B

65
source/Ox.UI/themes/modern/css/modern.css
View file

@ -198,6 +198,11 @@ Forms
background: rgb(80, 80, 80); background: rgb(80, 80, 80);
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
} }
.OxThemeModern .OxButton.OxSymbol.OxDisabled {
background: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.OxThemeModern .OxButton.OxSelected, .OxThemeModern .OxButton.OxSelected,
.OxThemeModern .OxSelect.OxSelected, .OxThemeModern .OxSelect.OxSelected,
.OxThemeModern .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected { .OxThemeModern .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected {
@ -552,37 +557,63 @@ Video
} }
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay {
border-color: rgba(0, 0, 0, 0.5);
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay > div {
border-color: rgba(255, 255, 255, 1);
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay.OxPaused > div {
border-color: rgba(255, 255, 255, 0.5);
}
.OxThemeModern .OxSmallVideoTimeline .OxMarkerPlay > div > div {
border-color: rgba(0, 0, 0, 0.5);
}
.OxThemeModern .OxVideoPlayer .OxButton.OxDisabled { .OxThemeModern .OxVideoPlayer .OxButton.OxDisabled {
background: transparent; background: transparent;
opacity: 0.25; opacity: 0.25;
} }
.OxThemeModern .OxVideoPlayer .OxInput { .OxThemeModern .OxVideoPlayer .OxControls.OxOnScreen {
background: transparent; background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-moz-box-shadow: 0 0 0; background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-webkit-box-shadow: 0 0 0;
} }
.OxThemeModern .OxVideoPlayer div.OxInput.OxFocus { .OxThemeModern .OxVideoPlayer .OxFind {
-moz-box-shadow: 0 0 0; background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-webkit-box-shadow: 0 0 0; background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
} }
.OxThemeModern .OxVideoPlayer input.OxInput { .OxThemeModern .OxVideoPlayer input.OxInput {
height: 16px; background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
padding: 0 3px 0 3px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(32, 32, 32, 1));
border: 0; }
border-radius: 8px; .OxThemeModern .OxVideoPlayer .OxResolution > div {
color: rgb(255, 255, 255); background: rgba(32, 32, 32, 0.5);
}
.OxThemeModern .OxVideoPlayer .OxResolution > div.OxSelected {
background-image: -moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
background-image: -webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5));
}
.OxThemeModern .OxVideoPlayer .OxVolume {
background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
}
.OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxTrack {
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5));
} }
.OxThemeModern .OxVideoPlayer input.OxInput.OxPlaceholder { .OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxThumb {
//opacity: 0.25; background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
} }
.OxThemeModern .OxVideoPlayer .OxRange .OxThumb:active { .OxThemeModern .OxVideoPlayer .OxVolume .OxRange .OxThumb:active {
background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5)); background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.5), rgba(0, 0, 0, 0.5)); background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
} }
// fixme: used?
.OxThemeModern .OxVideoPlayer .OxSelect { .OxThemeModern .OxVideoPlayer .OxSelect {
border-color: transparent; border-color: transparent;
//margin-left: 0px; //margin-left: 0px;