add timeline view

build/css/ox.ui.classic.css

@@ -337,4 +337,28 @@ Scrollbars
 .OxThemeClassic ::-webkit-scrollbar:active,
 .OxThemeClassic ::-webkit-scrollbar-thumb:active {
     background: rgb(208, 208, 208);
+}
+
+/*
+================================================================================
+Video
+================================================================================
+*/
+
+.OxThemeClassic .OxVideoPlayer {
+    background: rgb(255, 255, 255);
+}
+
+/*
+================================================================================
+Miscellaneous
+================================================================================
+*/
+
+.OxThemeClassic .OxTooltip {
+    border: 1px solid rgba(128, 128, 128, 0.75);
+    background: rgba(255, 255, 255, 0.75);
+    color: rgba(128, 128, 128, 1);
+    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

build/css/ox.ui.css

@@ -1196,6 +1196,188 @@ Scrollbars
     -webkit-border-radius: 6px;
 }
 
+/*
+================================================================================
+Video
+================================================================================
+*/
+
+.OxEditor .OxVideoPlayer {
+    position: absolute;
+    margin: 4px;
+    //background: red;
+}
+
+
+
+.OxTimelineLarge {
+    position: absolute;
+    height: 72px;
+    margin: 0 4px 0 4px;
+    overflow: hidden;
+}
+.OxTimelineLarge > div {
+    position: absolute;
+    height: 72px;
+}
+.OxTimelineLarge > div > img {
+    position: absolute;
+    top: 4px;
+}
+.OxTimelineLarge .OxCut {
+    position: absolute;
+    top: 66px;
+    width: 2px;
+    height: 4px;
+    margin-left: -1px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxMarkerPointIn {
+    position: absolute;
+    top: 64px;
+    width: 6px;
+    height: 6px;
+    margin-left: -5px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxMarkerPointOut {
+    position: absolute;
+    top: 64px;
+    width: 6px;
+    height: 6px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxMarkerPosition {
+    position: absolute;
+    top: 2px;
+    width: 9px;
+    height: 5px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxSubtitle {
+    position: absolute;
+    bottom: 9px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    padding: 1px;
+    background: rgba(0, 0, 0, 0.25);
+    font-size: 8px;
+    line-height: 10px;
+    text-align: center;
+    text-overflow: ellipsis;
+    text-shadow: rgba(0, 0, 0, 1) 1px 1px 1px;
+    color: rgb(255, 255, 255);
+    cursor: default;
+    overflow: hidden;
+    z-index: 10;
+    -moz-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 {
+    border-color: rgba(255, 255, 0, 1);
+}
+.OxTimelineSmall {
+    position: absolute;
+}
+.OxTimelineSmall > div {
+    position: absolute;
+    height: 18px;
+    margin: 3px 4px 3px 4px;
+    overflow: hidden;
+}
+.OxTimelineSmall > div > img {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.OxTimelineSmall > div > .OxTimelineSmallImage {
+    margin-top: 1px;
+}
+.OxTimelineSmall .OxMarkerPointIn {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    margin-left: -1px;
+}
+.OxTimelineSmall .OxMarkerPointOut {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    margin-left: 4px;
+}
+
+.OxVideoPlayer > .OxBar .OxInputGroup {
+    //width: 98px;
+}
+.OxVideoPlayer > .OxBar .OxButton {
+    margin-right: -1px;
+}
+.OxVideoPlayer > .OxBar .OxButton,
+.OxVideoPlayer > .OxBar .OxInput,
+.OxVideoPlayer > .OxBar .OxLabel {
+    padding: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+.OxVideoPlayer > .OxBar .OxLabel {
+    //width: 22px;
+    //background: rgb(32, 32, 32);
+}
+.OxVideoPlayer .OxLoadingIcon {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 16px;
+    margin: auto;
+}
+.OxVideoPlayer .OxMarkerFrame {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 16px;
+}
+.OxVideoPlayer .OxMarkerFrame > div {
+    float: left;
+}
+.OxVideoPlayer .OxMarkerFrame > .OxFrame {
+    background: rgba(0, 0, 0, 0.5);
+}
+.OxVideoPlayer .OxMarkerFrame > .OxPoster {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.OxVideoPlayer .OxMarkerPoint {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+}
+.OxVideoPlayer .OxMarkerInTop {
+    left: 4px;
+    top: 4px;
+}
+.OxVideoPlayer .OxMarkerInBottom {
+    left: 4px;
+    bottom: 20px;
+}
+.OxVideoPlayer .OxMarkerOutTop {
+    right: 4px;
+    top: 4px;
+}
+.OxVideoPlayer .OxMarkerOutBottom {
+    right: 4px;
+    bottom: 20px;
+}
+.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;
+}
+
 /*
 ================================================================================
 Miscellaneous

build/css/ox.ui.modern.css

@@ -311,6 +311,17 @@ Scrollbars
     background: rgb(64, 64, 64);
 }
 
+
+/*
+================================================================================
+Video
+================================================================================
+*/
+
+.OxThemeModern .OxVideoPlayer {
+    background: rgb(0, 0, 0);
+}
+
 /*
 ================================================================================
 Miscellaneous

build/js/ox.js

@@ -1573,6 +1573,14 @@ Ox.endsWith = function(str, sub) {
     return str.substr(-sub.length) === sub;
 };
 
+Ox.highlight = function(txt, str) {
+    // fixme: move to ox.ui
+    return str ? txt.replace(
+        new RegExp('(' + str + ')', 'ig'),
+        '<span class="OxHighlight">$1</span>'
+    ) : txt;
+}
+
 Ox.pad = function(str, len, pad, pos) {
     /*
     >>> Ox.pad(1, 2)

build/json/ox.ui.images.json

@@ -1 +1 @@
-["png/ox.ui/browserChrome128.png", "png/ox.ui/browserFirefox128.png", "png/ox.ui/browserInternetExplorer128.png", "png/ox.ui/browserOpera128.png", "png/ox.ui/browserSafari128.png", "png/ox.ui/markerBlue.png", "png/ox.ui/markerGreen.png", "png/ox.ui/markerRed.png", "png/ox.ui/markerYellow.png", "png/ox.ui/transparent.png", "png/ox.ui/videoMarkerCut.png", "png/ox.ui/videoMarkerIn.png", "png/ox.ui/videoMarkerInBottom.png", "png/ox.ui/videoMarkerInTop.png", "png/ox.ui/videoMarkerOut.png", "png/ox.ui/videoMarkerOutBottom.png", "png/ox.ui/videoMarkerOutTop.png", "png/ox.ui/videoMarkerPlay.png", "png/ox.ui.classic/loading.png", "png/ox.ui.classic/scrollbarHorizontalDecrement.png", "png/ox.ui.classic/scrollbarHorizontalIncrement.png", "png/ox.ui.classic/scrollbarVerticalDecrement.png", "png/ox.ui.classic/scrollbarVerticalIncrement.png", "png/ox.ui.classic/symbolAbove.png", "png/ox.ui.classic/symbolAdd.png", "png/ox.ui.classic/symbolBelow.png", "png/ox.ui.classic/symbolCheck.png", "png/ox.ui.classic/symbolClear.png", "png/ox.ui.classic/symbolClose.png", "png/ox.ui.classic/symbolCollapse.png", "png/ox.ui.classic/symbolDate.png", "png/ox.ui.classic/symbolEdit.png", "png/ox.ui.classic/symbolExpand.png", "png/ox.ui.classic/symbolFind.png", "png/ox.ui.classic/symbolHelp.png", "png/ox.ui.classic/symbolInfo.png", "png/ox.ui.classic/symbolLocation.png", "png/ox.ui.classic/symbolLock.png", "png/ox.ui.classic/symbolMute.png", "png/ox.ui.classic/symbolNext.png", "png/ox.ui.classic/symbolNone.png", "png/ox.ui.classic/symbolPause.png", "png/ox.ui.classic/symbolPlay.png", "png/ox.ui.classic/symbolPrevious.png", "png/ox.ui.classic/symbolRemove.png", "png/ox.ui.classic/symbolSelect.png", "png/ox.ui.classic/symbolSpin.png", "png/ox.ui.classic/symbolTime.png", "png/ox.ui.classic/symbolUnlock.png", "png/ox.ui.classic/symbolUnmute.png", "png/ox.ui.classic/symbolUser.png", "png/ox.ui.classic/symbolVolume.png", "png/ox.ui.classic/symbolWarning.png", "png/ox.ui.future/buttonAdd.png", "png/ox.ui.future/buttonClose.png", "png/ox.ui.future/buttonPause.png", "png/ox.ui.future/buttonPlay.png", "png/ox.ui.future/buttonRemove.png", "png/ox.ui.modern/buttonClear.png", "png/ox.ui.modern/icon.png", "png/ox.ui.modern/iconFind.png", "png/ox.ui.modern/loading.png", "png/ox.ui.modern/scrollbarHorizontalDecrement.png", "png/ox.ui.modern/scrollbarHorizontalIncrement.png", "png/ox.ui.modern/scrollbarVerticalDecrement.png", "png/ox.ui.modern/scrollbarVerticalIncrement.png", "png/ox.ui.modern/symbolAbove.png", "png/ox.ui.modern/symbolAdd.png", "png/ox.ui.modern/symbolBelow.png", "png/ox.ui.modern/symbolCheck.png", "png/ox.ui.modern/symbolClear.png", "png/ox.ui.modern/symbolClose.png", "png/ox.ui.modern/symbolCollapse.png", "png/ox.ui.modern/symbolDate.png", "png/ox.ui.modern/symbolEdit.png", "png/ox.ui.modern/symbolExpand.png", "png/ox.ui.modern/symbolFind.png", "png/ox.ui.modern/symbolGoToIn.png", "png/ox.ui.modern/symbolGoToOut.png", "png/ox.ui.modern/symbolHelp.png", "png/ox.ui.modern/symbolInfo.png", "png/ox.ui.modern/symbolLocation.png", "png/ox.ui.modern/symbolLock.png", "png/ox.ui.modern/symbolMute.png", "png/ox.ui.modern/symbolNext.png", "png/ox.ui.modern/symbolNone.png", "png/ox.ui.modern/symbolPause.png", "png/ox.ui.modern/symbolPlay.png", "png/ox.ui.modern/symbolPlayInToOut.png", "png/ox.ui.modern/symbolPrevious.png", "png/ox.ui.modern/symbolRemove.png", "png/ox.ui.modern/symbolSelect.png", "png/ox.ui.modern/symbolSetIn.png", "png/ox.ui.modern/symbolSetOut.png", "png/ox.ui.modern/symbolTime.png", "png/ox.ui.modern/symbolUnlock.png", "png/ox.ui.modern/symbolUnmute.png", "png/ox.ui.modern/symbolUser.png", "png/ox.ui.modern/symbolVolume.png", "png/ox.ui.modern/symbolWarning.png"]
+["png/ox.ui/browserChrome128.png", "png/ox.ui/browserFirefox128.png", "png/ox.ui/browserInternetExplorer128.png", "png/ox.ui/browserOpera128.png", "png/ox.ui/browserSafari128.png", "png/ox.ui/markerBlue.png", "png/ox.ui/markerGreen.png", "png/ox.ui/markerRed.png", "png/ox.ui/markerYellow.png", "png/ox.ui/transparent.png", "png/ox.ui/videoMarkerCut.png", "png/ox.ui/videoMarkerIn.png", "png/ox.ui/videoMarkerInBottom.png", "png/ox.ui/videoMarkerInTop.png", "png/ox.ui/videoMarkerOut.png", "png/ox.ui/videoMarkerOutBottom.png", "png/ox.ui/videoMarkerOutTop.png", "png/ox.ui/videoMarkerPlay.png", "png/ox.ui.classic/loading.png", "png/ox.ui.classic/scrollbarHorizontalDecrement.png", "png/ox.ui.classic/scrollbarHorizontalIncrement.png", "png/ox.ui.classic/scrollbarVerticalDecrement.png", "png/ox.ui.classic/scrollbarVerticalIncrement.png", "png/ox.ui.classic/symbolAbove.png", "png/ox.ui.classic/symbolAdd.png", "png/ox.ui.classic/symbolBelow.png", "png/ox.ui.classic/symbolCheck.png", "png/ox.ui.classic/symbolClear.png", "png/ox.ui.classic/symbolClose.png", "png/ox.ui.classic/symbolCollapse.png", "png/ox.ui.classic/symbolDate.png", "png/ox.ui.classic/symbolEdit.png", "png/ox.ui.classic/symbolExpand.png", "png/ox.ui.classic/symbolFind.png", "png/ox.ui.classic/symbolGoToIn.png", "png/ox.ui.classic/symbolGoToOut.png", "png/ox.ui.classic/symbolHelp.png", "png/ox.ui.classic/symbolInfo.png", "png/ox.ui.classic/symbolLocation.png", "png/ox.ui.classic/symbolLock.png", "png/ox.ui.classic/symbolMute.png", "png/ox.ui.classic/symbolNext.png", "png/ox.ui.classic/symbolNone.png", "png/ox.ui.classic/symbolPause.png", "png/ox.ui.classic/symbolPlay.png", "png/ox.ui.classic/symbolPlayInToOut.png", "png/ox.ui.classic/symbolPrevious.png", "png/ox.ui.classic/symbolRemove.png", "png/ox.ui.classic/symbolSelect.png", "png/ox.ui.classic/symbolSetIn.png", "png/ox.ui.classic/symbolSetOut.png", "png/ox.ui.classic/symbolSpin.png", "png/ox.ui.classic/symbolTime.png", "png/ox.ui.classic/symbolUnlock.png", "png/ox.ui.classic/symbolUnmute.png", "png/ox.ui.classic/symbolUser.png", "png/ox.ui.classic/symbolVolume.png", "png/ox.ui.classic/symbolWarning.png", "png/ox.ui.future/buttonAdd.png", "png/ox.ui.future/buttonClose.png", "png/ox.ui.future/buttonPause.png", "png/ox.ui.future/buttonPlay.png", "png/ox.ui.future/buttonRemove.png", "png/ox.ui.modern/buttonClear.png", "png/ox.ui.modern/icon.png", "png/ox.ui.modern/iconFind.png", "png/ox.ui.modern/loading.png", "png/ox.ui.modern/scrollbarHorizontalDecrement.png", "png/ox.ui.modern/scrollbarHorizontalIncrement.png", "png/ox.ui.modern/scrollbarVerticalDecrement.png", "png/ox.ui.modern/scrollbarVerticalIncrement.png", "png/ox.ui.modern/symbolAbove.png", "png/ox.ui.modern/symbolAdd.png", "png/ox.ui.modern/symbolBelow.png", "png/ox.ui.modern/symbolCheck.png", "png/ox.ui.modern/symbolClear.png", "png/ox.ui.modern/symbolClose.png", "png/ox.ui.modern/symbolCollapse.png", "png/ox.ui.modern/symbolDate.png", "png/ox.ui.modern/symbolEdit.png", "png/ox.ui.modern/symbolExpand.png", "png/ox.ui.modern/symbolFind.png", "png/ox.ui.modern/symbolGoToIn.png", "png/ox.ui.modern/symbolGoToOut.png", "png/ox.ui.modern/symbolHelp.png", "png/ox.ui.modern/symbolInfo.png", "png/ox.ui.modern/symbolLocation.png", "png/ox.ui.modern/symbolLock.png", "png/ox.ui.modern/symbolMute.png", "png/ox.ui.modern/symbolNext.png", "png/ox.ui.modern/symbolNone.png", "png/ox.ui.modern/symbolPause.png", "png/ox.ui.modern/symbolPlay.png", "png/ox.ui.modern/symbolPlayInToOut.png", "png/ox.ui.modern/symbolPrevious.png", "png/ox.ui.modern/symbolRemove.png", "png/ox.ui.modern/symbolSelect.png", "png/ox.ui.modern/symbolSetIn.png", "png/ox.ui.modern/symbolSetOut.png", "png/ox.ui.modern/symbolTime.png", "png/ox.ui.modern/symbolUnlock.png", "png/ox.ui.modern/symbolUnmute.png", "png/ox.ui.modern/symbolUser.png", "png/ox.ui.modern/symbolVolume.png", "png/ox.ui.modern/symbolWarning.png"]