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

demos/video/js/video.js

@@ -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,

source/Ox.UI/css/Ox.UI.css

@@ -1647,80 +1647,234 @@ Video
     margin-left: 4px;
 }
 
-.OxVideoPlayer > .OxBar .OxInputGroup {
+
-    //width: 98px;
+.OxVideoPlayer {
+    position: absolute;
 }
-.OxVideoPlayer > .OxBar .OxButton {
+.OxVideoPlayer.OxFocus {
-    margin-right: -1px;
+    -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 .OxControls {
-.OxVideoPlayer > .OxBar .OxLabel {
+    position: absolute;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
 }
-.OxVideoPlayer > .OxBar .OxInput,
+.OxVideoPlayer .OxControls.OxOnScreen {
-.OxVideoPlayer > .OxBar .OxLabel {
+    background-image: -moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
-    padding: 0;
+    background-image: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5));
 }
-.OxVideoPlayer > .OxBar .OxLabel {
+.OxVideoPlayer .OxControls > * {
-    //width: 22px;
+    float: left;
-    //background: rgb(32, 32, 32);
 }
+
+.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;
+    bottom: 0;
-}
+    margin: auto;
-.OxVideoPlayer .OxMarkerFrame > div {
+    border: 2px solid rgb(255, 255, 255);
-    float: left;
-}
-.OxVideoPlayer .OxMarkerFrame > .OxFrame {
     background: rgba(0, 0, 0, 0.5);
+    opacity: 0;
 }
-.OxVideoPlayer .OxMarkerFrame > .OxPoster {
+
-    border: 1px solid rgba(255, 255, 255, 0.5);
+.OxVideoPlayer .OxPointMarker {
-}
-.OxVideoPlayer .OxMarkerPoint {
     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);
 }
 
 /*

source/Ox.UI/js/Core/Ox.Theme.js

@@ -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(

source/Ox.UI/themes/classic/css/classic.css

@@ -456,9 +456,29 @@ Video
 ================================================================================
 */
 
-.OxThemeClassic .OxVideoPlayer {
+.OxThemeClassic .OxVideoPlayer .OxInput {
-    background: rgb(255, 255, 255);
+    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));
+}
+
 
 /*
 ================================================================================

source/Ox.UI/themes/modern/css/modern.css

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