')
+ .addClass('OxPoster')
+ .css({
+ width: (self.options.height - 2) + 'px',
+ height: (self.options.height - 2) + 'px'
+ })
+ )
+ .append(
+ $('
')
+ .addClass('OxFrame')
+ .css({
+ width: Math.ceil((self.options.width - self.options.height) / 2) + 'px',
+ height: self.options.height + 'px'
+ })
+ )
+ .hide()
+ .appendTo(that.$element);
+
+ self.$markerPoint = {}
+ $.each(['in', 'out'], function(i, point) {
+ self.$markerPoint[point] = {};
+ $.each(['top', 'bottom'], function(i, edge) {
+ var titleCase = Ox.toTitleCase(point) + Ox.toTitleCase(edge);
+ self.$markerPoint[point][edge] = $('
')
+ .addClass('OxMarkerPoint OxMarker' + titleCase)
+ .attr({
+ src: '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png' // fixme: remove static path
+ })
+ .hide()
+ .appendTo(that.$element);
+ if (self.options.points[point == 'in' ? 0 : 1] == self.options.position) {
+ self.$markerPoint[point][edge].show();
+ }
+ });
+ });
+
+ self.$controls = new Ox.Bar({
+ size: self.controlsHeight
+ })
+ .css({
+ marginTop: '-2px'
+ })
+ .appendTo(that);
+
+ if (self.options.type == 'play') {
+ // fixme: $buttonPlay etc.
+ self.$playButton = new Ox.Button({
+ id: self.options.id + 'Play',
+ title: [
+ {id: 'play', title: 'play'},
+ {id: 'pause', title: 'pause'}
+ ],
+ tooltip: ['Play', 'Pause'],
+ type: 'image'
+ })
+ .bindEvent('click', togglePlay)
+ .appendTo(self.$controls);
+ self.$playInToOutButton = new Ox.Button({
+ id: self.options.id + 'PlayInToOut',
+ title: 'PlayInToOut',
+ tooltip: 'Play In to Out',
+ type: 'image'
+ })
+ .bindEvent('click', function() {
+ that.playInToOut();
+ })
+ .appendTo(self.$controls);
+ self.$muteButton = new Ox.Button({
+ id: self.options.id + 'Mute',
+ title: [
+ {id: 'mute', title: 'mute'},
+ {id: 'unmute', title: 'unmute'}
+ ],
+ tooltip: ['Mute', 'Unmute'],
+ type: 'image'
+ })
+ .bindEvent('click', toggleMute)
+ .appendTo(self.$controls);
+ } else {
+ self.$goToPointButton = new Ox.Button({
+ id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
+ title: 'GoTo' + Ox.toTitleCase(self.options.type),
+ tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
+ type: 'image'
+ })
+ .bindEvent('click', goToPoint)
+ .appendTo(self.$controls);
+ self.$setPointButton = new Ox.Button({
+ id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type),
+ title: 'Set' + Ox.toTitleCase(self.options.type),
+ tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
+ type: 'image'
+ })
+ .bindEvent('click', setPoint)
+ .appendTo(self.$controls);
+ }
+
+ self.$positionInput = new Ox.TimeInput({
+ milliseconds: true,
+ seconds: true,
+ value: Ox.formatDuration(self.options.position, 3)
+ })
+ .css({
+ float: 'right',
+ })
+ .appendTo(self.$controls)
+
+ self.$positionInput.css({
+ width: '98px'
+ });
+ // fixme: children doesnt work w/o $element
+ self.$positionInput.$element.children('.OxLabel').each(function(i, element) {
+ $(this).css({
+ width: '22px',
+ marginLeft: (i == 0 ? 8 : 0) + 'px',
+ background: 'rgb(32, 32, 32)'
+ });
+ });
+ self.$positionInput.$element.children('div.OxInput').each(function(i) {
+ var marginLeft = [-82, -58, -34, -10];
+ $(this).css({
+ marginLeft: marginLeft[i] + 'px'
+ }).addClass('foo');
+ });
+
+ self.$loadingIcon = new Ox.LoadingIcon()
+ .appendTo(that)
+ .start();
+
+ self.loadInterval = setInterval(function() {
+ if (self.video.readyState) {
+ clearInterval(self.loadInterval);
+ self.$loadingIcon.stop();
+ setPosition();
+ }
+ }, 50);
+
+ function getSubtitle() {
+ var subtitle = '';
+ $.each(self.options.subtitles, function(i, v) {
+ if (v['in'] <= self.options.position && v['out'] > self.options.position) {
+ subtitle = v.text;
+ return false;
+ }
+ });
+ return subtitle;
+ }
+
+ function goToPoint() {
+ that.triggerEvent('change', {
+ position: self.options.points[self.options.type == 'in' ? 0 : 1]
+ });
+ }
+
+ function playing() {
+ self.options.position = Math.round(self.video.currentTime * 25) / 25;
+ if (self.video.ended) {
+ self.$playButton.trigger('click');
+ }
+ if (self.playingInToOut && self.options.position >= self.options.points[1]) {
+ self.$playButton.trigger('click');
+ self.options.position = self.options.points[1];
+ }
+ setMarkers();
+ setSubtitle();
+ self.$positionInput.options({
+ value: Ox.formatDuration(self.options.position, 3)
+ });
+ that.triggerEvent('change', {
+ position: self.options.position
+ });
+ }
+
+ function setHeight() {
+ that.css({
+ height: (self.options.height + 16) + 'px'
+ });
+ self.$video.css({
+ height: self.options.height + 'px'
+ });
+ setSubtitleSize();
+ }
+
+ function setMarkers() {
+ self.options.position == self.options.posterFrame ? self.$markerFrame.show() : self.$markerFrame.hide();
+ $.each(self.$markerPoint, function(point, markers) {
+ $.each(markers, function(edge, marker) {
+ self.options.position == self.options.points[point == 'in' ? 0 : 1] ?
+ marker.show() : marker.hide();
+ });
+ })
+ }
+
+ function setPoint() {
+ var data = {};
+ self.options.points[self.options.type == 'in' ? 0 : 1] = self.options.position;
+ setMarkers();
+ data[self.options.type] = self.options.position;
+ that.triggerEvent('set', data);
+ }
+
+ function setPosition() {
+ self.video.currentTime = self.options.position;
+ setMarkers();
+ setSubtitle();
+ self.$positionInput.options({
+ value: Ox.formatDuration(self.options.position, 3)
+ });
+ }
+
+ function setSubtitle() {
+ var subtitle = getSubtitle();
+ if (subtitle != self.subtitle) {
+ self.subtitle = subtitle;
+ self.$subtitle.html(Ox.highlight(self.subtitle, self.options.find).replace(/\n/g, '
'));
+ }
+ }
+
+ function setSubtitleSize() {
+ self.$subtitle.css({
+ bottom: parseInt(self.controlsHeight + self.options.height / 16) + 'px',
+ width: self.options.width + 'px',
+ fontSize: parseInt(self.options.height / 20) + 'px',
+ WebkitTextStroke: (self.options.height / 1000) + 'px rgb(0, 0, 0)'
+ });
+ }
+
+ function setWidth() {
+ that.css({
+ width: self.options.width + 'px'
+ });
+ self.$video.css({
+ width: self.options.width + 'px'
+ });
+ setSubtitleSize();
+ }
+
+ function toggleMute() {
+ self.video.muted = !self.video.muted;
+ }
+
+ function togglePlay() {
+ self.video.paused ? that.play() : that.pause();
+ }
+
+ self.onChange = function(key, value) {
+ if (key == 'height') {
+ setHeight();
+ } else if (key == 'points') {
+ setMarkers();
+ } else if (key == 'position') {
+ setPosition();
+ } else if (key == 'posterFrame') {
+ setMarkers();
+ } else if (key == 'width') {
+ setWidth();
+ }
+ }
+
+ that.mute = function() {
+ self.video.muted = true;
+ return that;
+ };
+
+ that.pause = function() {
+ self.video.pause();
+ clearInterval(self.playInterval);
+ self.playingInToOut = false;
+ return that;
+ };
+
+ that.play = function() {
+ self.video.play();
+ self.playInterval = setInterval(playing, 40);
+ return that;
+ };
+
+ that.playInToOut = function() {
+ self.options.position = self.options.points[0];
+ setPosition();
+ Ox.print('sop', self.options.position, self.options.points);
+ self.playingInToOut = true;
+ self.video.paused && self.$playButton.trigger('click');
+ return that;
+ };
+
+ that.toggleMute = function() {
+ self.$muteButton.trigger('click');
+ return that;
+ }
+
+ that.togglePlay = function() {
+ self.$playButton.trigger('click');
+ return that;
+ }
+
+ that.unmute = function() {
+ self.video.muted = false;
+ return that;
+ };
+
+ return that;
+
+ };
+
+
/*
============================================================================
Miscellaneous
diff --git a/build/json/ox.ui.images.json b/build/json/ox.ui.images.json
index 4a18e79c..c5890c8f 100644
--- a/build/json/ox.ui.images.json
+++ b/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"]
\ No newline at end of file
+["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"]
\ No newline at end of file
diff --git a/build/png/ox.ui.classic/symbolGoToIn.png b/build/png/ox.ui.classic/symbolGoToIn.png
new file mode 100644
index 00000000..d5dc2765
Binary files /dev/null and b/build/png/ox.ui.classic/symbolGoToIn.png differ
diff --git a/build/png/ox.ui.classic/symbolGoToOut.png b/build/png/ox.ui.classic/symbolGoToOut.png
new file mode 100644
index 00000000..b124bc66
Binary files /dev/null and b/build/png/ox.ui.classic/symbolGoToOut.png differ
diff --git a/build/png/ox.ui.classic/symbolPlayInToOut.png b/build/png/ox.ui.classic/symbolPlayInToOut.png
new file mode 100644
index 00000000..01070c84
Binary files /dev/null and b/build/png/ox.ui.classic/symbolPlayInToOut.png differ
diff --git a/build/png/ox.ui.classic/symbolSetIn.png b/build/png/ox.ui.classic/symbolSetIn.png
new file mode 100644
index 00000000..bb3d03e1
Binary files /dev/null and b/build/png/ox.ui.classic/symbolSetIn.png differ
diff --git a/build/png/ox.ui.classic/symbolSetOut.png b/build/png/ox.ui.classic/symbolSetOut.png
new file mode 100644
index 00000000..4acf8bc7
Binary files /dev/null and b/build/png/ox.ui.classic/symbolSetOut.png differ