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

move css to css file, add markers (in/out/poster)

Browse source
This commit is contained in:
rolux 2011-05-18 15:02:02 +02:00
parent 6b33c631a9
commit 8fe529df81
6 changed files with 709 additions and 651 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
demos/video/js/video.js
View file

@ -38,6 +38,7 @@ Ox.load('UI', {
enableFullscreen: true,
enableKeyboard: true,
enableVolume: true,
find: 'brick',
focus: 'mouseenter',
height: 192,
'in': 3128.72,
@ -49,7 +50,7 @@ Ox.load('UI', {
poster: poster,
posterFrame: 3168.04,
//showIconOnLoad: true,
showProgress: false,
showMarkers: true,
subtitles: 'srt/' + id + '.srt',
timeline: 'png/timeline.16.png',
title: 'Brick - Rian Johnson - 2005',
@ -67,9 +68,9 @@ Ox.load('UI', {
Ox.VideoPlayer({
enableKeyboard: true,
height: videoSize.height,
'in': 3128.725,
'in': 3128.72,
//keepIconVisible: true,
out: 3130.725,
out: 3130.72,
paused: true,
playInToOut: true,
//preload: 'none',
@ -90,12 +91,15 @@ Ox.load('UI', {
enableVolume: true,
externalControls: true,
height: 192,
'in': 3128.725,
'in': 3128.72,
largeTimeline: function(i) {
return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
},
out: 3130.725,
out: 3130.72,
paused: true,
position: 3168.04,
posterFrame: 3168.04,
showMarkers: true,
showMilliseconds: 2,
subtitles: 'srt/' + id + '.srt',
timeline: timeline,

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

@ -1647,80 +1647,234 @@ Video
margin-left: 4px;
}
.OxVideoPlayer > .OxBar .OxInputGroup {
//width: 98px;
.OxVideoPlayer {
position: absolute;
}
.OxVideoPlayer > .OxBar .OxButton {
margin-right: -1px;
.OxVideoPlayer.OxFocus {
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
}
.OxVideoPlayer > .OxBar .OxButton,
.OxVideoPlayer > .OxBar .OxInput,
.OxVideoPlayer > .OxBar .OxLabel {
-moz-border-radius: 0;
-webkit-border-radius: 0;
.OxVideoPlayer .OxControls {
position: absolute;
}
.OxVideoPlayer > .OxBar .OxInput,
.OxVideoPlayer > .OxBar .OxLabel {
padding: 0;
.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 > .OxBar .OxLabel {
//width: 22px;
//background: rgb(32, 32, 32);
.OxVideoPlayer .OxControls > * {
float: left;
}
.OxVideoPlayer .OxFind {
position: absolute;
right: 0;
border-bottom-left-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;
}
.OxVideoPlayer .OxFind > * {
float: left;
}
.OxVideoPlayer .OxFind .OxResults {
width: 24px;
padding-top: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
}
.OxVideoPlayer .OxLoadingIcon {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 16px;
bottom: 0;
margin: auto;
opacity: 1;
}
.OxVideoPlayer .OxMarkerFrame {
.OxVideoPlayer .OxLogo {
position: absolute;
opacity: 0.25;
}
.OxVideoPlayer .OxPlayIcon {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 16px;
}
.OxVideoPlayer .OxMarkerFrame > div {
float: left;
}
.OxVideoPlayer .OxMarkerFrame > .OxFrame {
bottom: 0;
margin: auto;
border: 2px solid rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.OxVideoPlayer .OxMarkerFrame > .OxPoster {
border: 1px solid rgba(255, 255, 255, 0.5);
}
.OxVideoPlayer .OxMarkerPoint {
.OxVideoPlayer .OxPointMarker {
position: absolute;
width: 16px;
height: 16px;
display: none;
}
.OxVideoPlayer .OxMarkerInTop {
.OxVideoPlayer .OxPointMarkerInTop {
left: 4px;
top: 4px;
}
.OxVideoPlayer .OxMarkerInBottom {
.OxVideoPlayer .OxPointMarkerInBottom {
left: 4px;
bottom: 20px;
bottom: 4px;
}
.OxVideoPlayer .OxMarkerOutTop {
.OxVideoPlayer .OxPointMarkerOutTop {
right: 4px;
top: 4px;
}
.OxVideoPlayer .OxMarkerOutBottom {
.OxVideoPlayer .OxPointMarkerOutBottom {
right: 4px;
bottom: 20px;
bottom: 4px;
}
.OxVideoPlayer .OxPosition {
height: 12px;
padding: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
}
.OxVideoPlayer .OxPositionInput {
display: none;
}
.OxVideoPlayer .OxPoster {
position: absolute;
}
.OxVideoPlayer .OxPosterMarker {
position: absolute;
display: none;
}
.OxVideoPlayer .OxPosterMarkerCenter {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.1);
background: transparent;
}
.OxVideoPlayer .OxPosterMarkerLeft,
.OxVideoPlayer .OxPosterMarkerRight {
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.OxVideoPlayer .OxResolution {
position: absolute;
right: 0;
bottom: 16px;
background: transparent; // fixme: needed?;
display: none;
}
.OxVideoPlayer .OxResolution > div {
width: 52px;
height: 16px;
background: rgba(32, 32, 32, 0.5);
}
.OxVideoPlayer .OxResolution > div:first-child {
border-top-left-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 > * {
float: left;
}
.OxVideoPlayer .OxResolution > div > div {
width: 36px;
height: 14px;
padding-top: 2px;
font-size: 9px;
text-align: right;
color: rgb(255, 255, 255);
cursor: default;
}
.OxVideoPlayer .OxResolution > div > img {
width: 9px;
height: 9px;
padding: 3px 3px 4px 4px;
}
.OxVideoPlayer .OxResolutionButton {
width: 32px;
height: 12px;
padding: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
cursor: default;
}
.OxVideoPlayer .OxSubtitle {
position: absolute;
left: 0;
right: 0;
text-align: center;
//text-shadow: rgba(0, 0, 0, 1) 2px 2px 0px;
text-shadow: rgba(0, 0, 0, 1) 0 0 4px;
color: rgb(255, 255, 255);
z-index: 10;
}
.OxVideoPlayer .OxTitle {
padding-top: 1px;
text-align: center;
color: rgb(255, 255, 255);
overflow: hidden;
text-overflow: ellipsis;
}
.OxVideoPlayer .OxVideoContainer {
position: absolute;
background: rgb(0, 0, 0);
overflow: hidden;
}
.OxVideoPlayer .OxVolume {
position: absolute;
left: 0;
height: 16px;
border-top-left-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;
}
.OxVideoPlayer .OxVolume > * {
float: left;
}
.OxVideoPlayer .OxVolume .OxRange .OxTrack {
padding: 1px;
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 {
padding: 1px 7px 1px 7px;
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 {
width: 24px;
padding-top: 2px;
font-size: 9px;
text-align: center;
color: rgb(255, 255, 255);
}
/*

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

@ -32,7 +32,7 @@ Ox.Theme = function(theme) {
Ox.UI.$body
.addClass('OxTheme' + Ox.toTitleCase(theme))
.removeClass('OxTheme' + Ox.toTitleCase(currentTheme));
$('img').add('input[type=image]').each(function() {
$('img:not(.OxVideo)').add('input[type=image]:not(.OxVideo)').each(function() {
var $this = $(this);
$this.attr({
src: $this.attr('src').replace(

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

File diff suppressed because it is too large Load diff

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

@ -456,9 +456,29 @@ Video
================================================================================
*/
.OxThemeClassic .OxVideoPlayer {
background: rgb(255, 255, 255);
.OxThemeClassic .OxVideoPlayer .OxInput {
background: rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxThemeClassic .OxVideoPlayer div.OxInput.OxFocus {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxThemeClassic .OxVideoPlayer input.OxInput {
height: 16px;
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 {
background: -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));
}
/*
================================================================================

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

@ -459,15 +459,35 @@ Video
background: rgb(48, 48, 48);
}
.OxThemeModern .OxVideo.OxFocus {
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
.OxThemeModern .OxVideoPlayer .OxButton.OxDisabled {
background: transparent;
opacity: 0.25;
}
.OxThemeModern .OxVideoPlayer {
background: rgb(0, 0, 0);
.OxThemeModern .OxVideoPlayer .OxInput {
background: transparent;
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxThemeModern .OxVideoPlayer div.OxInput.OxFocus {
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;
}
.OxThemeModern .OxVideoPlayer input.OxInput {
height: 16px;
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));
}
.OxThemeModern .OxVideoPlayer .OxRange .OxThumb:active {
background: -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));
}
/*
================================================================================