source: gs2-extensions/video-and-audio/trunk/src/web/script/replayer.js@ 23408

Last change on this file since 23408 was 23408, checked in by max, 13 years ago

Minor tweak.
File size: 30.6 KB
Line 
1/*!
2 * Replayme Player v1.5.0
3 * Based on JQuery UI v1.8.4
4 *
5 *
6 * Copyright 2010, Maxime Roüast
7 * Released under the GPL 2 License.
8 *
9 */
10
11
12var relPosTimer_is_on=0;
13var relpos;
14var user_is_dragging=0;
15var checkStatusTimer;
16var checkStatusTimer_is_on=0;
17var checkVideoSizeTimer;
18var previousHeight=0;
19var previousWidth=0;
20var vlc;
21
22
23//Used for the look and feel of the player
24function checkStatus()
25{
26 if (!checkStatusTimer_is_on)
27 {
28 checkStatusTimer_is_on=1;
29
30 if(vlc.subtitle.count < 1)
31 {
32 $( "#subtitles" ).button( "option", "disabled", true );
33 }
34 else if (vlc.subtitle.count > 0)
35 {
36 $( "#subtitles" ).button( "option", "disabled", false );
37 $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track));
38 }
39
40
41 //For the audio tracks we only enable the button if there is more than two tracks (in vlc world disabled count for one track)
42 if(vlc.audio.count < 3)
43 {
44 $( "#audiotracks" ).button( "option", "disabled", true );
45 $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track));
46 }
47 else if (vlc.audio.count > 2)
48 {
49 $( "#audiotracks" ).button( "option", "disabled", false );
50 $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track));
51 }
52
53
54 if (vlc.input.state == 0) {
55 // current media has stopped
56 //onStop();
57 }
58 else if (vlc.input.state == 1) {
59 // current media is connecting
60 onOpening();
61 }
62 else if (vlc.input.state == 2) {
63 // current media is buffering data
64 onBuffering();
65 }
66 else if (vlc.input.state == 3) {
67 // current media is now playing
68 onPlaying();
69 }
70 else if (vlc.input.state == 4) {
71 // current media is now paused
72 //onPaused();
73 }
74 else if (vlc.input.state == 5) {
75 // current media is stopping
76 //onStopping();
77 }
78 else if (vlc.input.state == 6) {
79 // current media has finished playback
80 onEnd();
81 }
82
83 checkStatusTimer=setTimeout(function(){checkStatus()},5000);
84 }
85};
86
87function onOpening()
88{
89 $('#play').button('option', {
90 label: 'pause',
91 icons: {
92 primary: 'ui-icon-pause'
93 }
94 });
95 document.getElementById("status").innerHTML = "&nbsp;&nbsp;<img src='" + bufferImgURL + "'>&nbsp;Connecting...";
96}
97
98function onBuffering()
99{
100 $('#play').button('option', {
101 label: 'pause',
102 icons: {
103 primary: 'ui-icon-pause'
104 }
105 });
106 document.getElementById("status").innerHTML = "&nbsp;&nbsp;<img src='" + bufferImgURL + "'>&nbsp;Buffering...";
107}
108
109function onPlaying()
110{
111 $('#play').button('option', {
112 label: 'pause',
113 icons: {
114 primary: 'ui-icon-pause'
115 }
116 });
117 document.getElementById("status").innerHTML = "";
118}
119
120function onEnd()
121{
122 stop();
123 $('#play').button('option', {
124 label: 'play',
125 icons: {
126 primary: 'ui-icon-play'
127 }
128 });
129 $( "#subtitles" ).button( "option", "disabled", true );
130 $( "#audiotracks" ).button( "option", "disabled", true);
131}
132
133function prepare(mrl)
134{
135//Wait for the player to be initialized before doing anything
136vlc = document.getElementById("vlc");
137var safeMRL = encodeURI(mrl);
138setTimeout(function(){vlc.playlist.add(safeMRL)},350);
139setTimeout(function(){play()},500);
140setTimeout(function(){checkStatus()},1000);
141};
142
143function play()
144{
145 vlc.playlist.play();
146 vlc.video.deinterlace.enable("yadif");
147 relPosTimer_is_on=1;
148 showRelPos();
149
150 if (!checkStatusTimer_is_on)
151 {
152 setTimeout(function(){checkStatus()},1000);
153 }
154};
155
156function showRelPos()
157{
158 if (relPosTimer_is_on=1)
159 {
160 if (vlc.input.position>=0 && vlc.input.position<=1 && user_is_dragging==0)
161 {
162 $('#slider').slider( "option", "value", vlc.input.position );
163 }
164 relpos=setTimeout(function(){showRelPos()},250);
165 }
166};
167
168function stop()
169{
170 clearTimeout(relpos);
171 clearTimeout(checkStatusTimer);
172 checkStatusTimer_is_on=0;
173 relPosTimer_is_on=0;
174 vlc.playlist.stop();
175 vlc.subtitle.track = 0;
176 $('#slider').slider( "option", "value", 0 );
177 $( "#subtitles" ).button( "option", "label", "Subtitles");
178 $( "#subtitles" ).button( "option", "disabled", true );
179 $( "#audiotracks" ).button( "option", "label", "Audio Track(s)");
180 $( "#audiotracks" ).button( "option", "disabled", true);
181};
182
183function togglePause()
184{
185 vlc.playlist.togglePause();
186};
187
188function toggleMute()
189{
190 vlc.audio.toggleMute();
191};
192
193function getBrowserWidth()
194{
195 xWidth = null;
196 if(window.screen != null)
197 xWidth = window.screen.availWidth;
198
199 if(window.innerWidth != null)
200 xWidth = window.innerWidth;
201
202 if(document.body != null) {
203 if ((typeof document.compatMode != "undefined")
204 && (document.compatMode == "CSS1Compat")) {
205 // in Strict mode
206 xWidth = document.documentElement.clientWidth;
207 }
208 else {
209 // in Quirks mode
210 xWidth = document.body.clientWidth;
211 }
212 }
213
214 return xWidth;
215 };
216
217function getBrowserHeight() {
218 xHeight = null;
219 if(window.screen != null)
220 xHeight = window.screen.availHeight;
221
222 if(window.innerHeight != null)
223 xHeight = window.innerHeight;
224
225 if(document.body != null){
226 if ((typeof document.compatMode != "undefined")
227 && (document.compatMode == "CSS1Compat")) {
228 // in Strict mode
229 xHeight = document.documentElement.clientHeight;
230 }
231 else {
232 // in Quirks mode
233 xHeight = document.body.clientHeight;
234 }
235 }
236 return xHeight;
237};
238
239function setFullscreenSize()
240{
241 var height = getBrowserHeight() - 8;
242 var width = getBrowserWidth() - 8;
243 $( "#replaymePlayer" ).dialog( "option", "position", ['left','top'] );
244 $( "#replaymePlayer" ).dialog( "option", "height", height );
245 $( "#replaymePlayer" ).dialog( "option", "width", width );
246 setPlayerSize();
247 checkVideoSizeTimer=setTimeout(function(){setFullscreenSize()},1000);
248}
249
250function toggleFullscreen()
251{
252 if (vlc.input.state == 3)
253 {
254 vlc.video.toggleFullscreen();
255
256 if (vlc.video.fullscreen == true)
257 {
258 previousHeight = $( "#replaymePlayer" ).dialog( "option", "height" );
259 previousWidth = $( "#replaymePlayer" ).dialog( "option", "width" );
260 setFullscreenSize();
261 }
262 else if (vlc.video.fullscreen == false)
263 {
264 clearTimeout(checkVideoSizeTimer);
265 $( "#replaymePlayer" ).dialog( "option", "height", previousHeight );
266 $( "#replaymePlayer" ).dialog( "option", "width", previousWidth );
267 setPlayerSize();
268 $( "#replaymePlayer" ).dialog( "option", "position", 'center' );
269 }
270 }
271 else
272 {
273 alert("You can switch between fullscreen and windowed mode only when playing the video.");
274 }
275};
276
277function changeSubtitles()
278{
279 if (vlc.subtitle.track == vlc.subtitle.count - 1)
280 {
281 vlc.subtitle.track = 0;
282 }
283 else
284 {
285 vlc.subtitle.track += 1;
286 }
287 $( "#subtitles" ).button( "option", "label", "Subtitles: " + vlc.subtitle.description(vlc.subtitle.track));
288};
289
290function changeAudioTrack()
291{
292 if (vlc.audio.track == vlc.audio.count - 1)
293 {
294 vlc.audio.track = 1;
295 }
296 else
297 {
298 vlc.audio.track += 1;
299 }
300 $( "#audiotracks" ).button( "option", "label", vlc.audio.description(vlc.audio.track));
301};
302
303function seek()
304{
305 vlc.input.position = $('#slider').slider( "option", "value" );
306 user_is_dragging=0;
307};
308
309function setPlayerSize()
310{
311 var width = 0, height = 0;
312
313 width = $( "#replaymePlayer" ).dialog( "option", "width" );
314 height = $( "#replaymePlayer" ).dialog( "option", "height" );
315 width = width - 25;
316 height = height - 150;
317
318 if (document.getElementById("vlc") != null)
319 {
320 document.getElementById("vlc").style.height = height + "px";
321 document.getElementById("vlc").style.width = width + "px";
322 }
323};
324
325//JQuery Stuff
326$(function() {
327
328//Section taken from JQuery UI 1.8.4 and adapted to properly show dialog over VLC plugin in Firefox
329//it actually disable the rounded corners for that window, to use it use "mydialog" instead of "dialog"
330var uiMyDialogClasses =
331 'ui-dialog ' +
332 'ui-widget ' +
333 'ui-widget-content ';
334
335$.widget("ui.mydialog", {
336 options: {
337 autoOpen: true,
338 buttons: {},
339 closeOnEscape: true,
340 closeText: 'close',
341 dialogClass: '',
342 draggable: true,
343 hide: null,
344 height: 'auto',
345 maxHeight: false,
346 maxWidth: false,
347 minHeight: 150,
348 minWidth: 150,
349 modal: false,
350 position: {
351 my: 'center',
352 at: 'center',
353 of: window,
354 collision: 'fit',
355 // ensure that the titlebar is never outside the document
356 using: function(pos) {
357 var topOffset = $(this).css(pos).offset().top;
358 if (topOffset < 0) {
359 $(this).css('top', pos.top - topOffset);
360 }
361 }
362 },
363 resizable: true,
364 show: null,
365 stack: true,
366 title: '',
367 width: 300,
368 zIndex: 1000
369 },
370
371 _create: function() {
372 this.originalTitle = this.element.attr('title');
373 // #5742 - .attr() might return a DOMElement
374 if ( typeof this.originalTitle !== "string" ) {
375 this.originalTitle = "";
376 }
377
378 var self = this,
379 options = self.options,
380
381 title = options.title || self.originalTitle || '&#160;',
382 titleId = $.ui.mydialog.getTitleId(self.element),
383
384 uiMyDialog = (self.uiMyDialog = $('<div></div>'))
385 .appendTo(document.body)
386 .hide()
387 .addClass(uiMyDialogClasses + options.dialogClass)
388 .css({
389 zIndex: options.zIndex
390 })
391 // setting tabIndex makes the div focusable
392 // setting outline to 0 prevents a border on focus in Mozilla
393 .attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
394 if (options.closeOnEscape && event.keyCode &&
395 event.keyCode === $.ui.keyCode.ESCAPE) {
396
397 self.close(event);
398 event.preventDefault();
399 }
400 })
401 .attr({
402 role: 'dialog',
403 'aria-labelledby': titleId
404 })
405 .mousedown(function(event) {
406 self.moveToTop(false, event);
407 }),
408
409 uiMyDialogContent = self.element
410 .show()
411 .removeAttr('title')
412 .addClass(
413 'ui-dialog-content ' +
414 'ui-widget-content')
415 .appendTo(uiMyDialog),
416
417 uiMyDialogTitlebar = (self.uiMyDialogTitlebar = $('<div></div>'))
418 .addClass(
419 'ui-dialog-titlebar ' +
420 'ui-widget-header ' +
421 'ui-helper-clearfix'
422 )
423 .prependTo(uiMyDialog),
424
425 uiMyDialogTitlebarClose = $('<a href="#"></a>')
426 .addClass(
427 'ui-dialog-titlebar-close '
428 )
429 .attr('role', 'button')
430 .hover(
431 function() {
432 uiMyDialogTitlebarClose.addClass('ui-state-hover');
433 },
434 function() {
435 uiMyDialogTitlebarClose.removeClass('ui-state-hover');
436 }
437 )
438 .focus(function() {
439 uiMyDialogTitlebarClose.addClass('ui-state-focus');
440 })
441 .blur(function() {
442 uiMyDialogTitlebarClose.removeClass('ui-state-focus');
443 })
444 .click(function(event) {
445 self.close(event);
446 return false;
447 })
448 .appendTo(uiMyDialogTitlebar),
449
450 uiMyDialogTitlebarCloseText = (self.uiMyDialogTitlebarCloseText = $('<span></span>'))
451 .addClass(
452 'ui-icon ' +
453 'ui-icon-closethick'
454 )
455 .text(options.closeText)
456 .appendTo(uiMyDialogTitlebarClose),
457
458 uiMyDialogTitle = $('<span></span>')
459 .addClass('ui-dialog-title')
460 .attr('id', titleId)
461 .html(title)
462 .prependTo(uiMyDialogTitlebar);
463
464 //handling of deprecated beforeclose (vs beforeClose) option
465 //Ticket #4669 http://dev.jqueryui.com/ticket/4669
466 //TODO: remove in 1.9pre
467 if ($.isFunction(options.beforeclose) && !$.isFunction(options.beforeClose)) {
468 options.beforeClose = options.beforeclose;
469 }
470
471 uiMyDialogTitlebar.find("*").add(uiMyDialogTitlebar).disableSelection();
472
473 if (options.draggable && $.fn.draggable) {
474 self._makeDraggable();
475 }
476 if (options.resizable && $.fn.resizable) {
477 self._makeResizable();
478 }
479
480 self._createButtons(options.buttons);
481 self._isOpen = false;
482
483 if ($.fn.bgiframe) {
484 uiMyDialog.bgiframe();
485 }
486 },
487
488 _init: function() {
489 if ( this.options.autoOpen ) {
490 this.open();
491 }
492 },
493
494 destroy: function() {
495 var self = this;
496
497 if (self.overlay) {
498 self.overlay.destroy();
499 }
500 self.uiMyDialog.hide();
501 self.element
502 .unbind('.dialog')
503 .removeData('dialog')
504 .removeClass('ui-dialog-content ui-widget-content')
505 .hide().appendTo('body');
506 self.uiMyDialog.remove();
507
508 if (self.originalTitle) {
509 self.element.attr('title', self.originalTitle);
510 }
511
512 return self;
513 },
514
515 widget: function() {
516 return this.uiMyDialog;
517 },
518
519 close: function(event) {
520 var self = this,
521 maxZ;
522
523 if (false === self._trigger('beforeClose', event)) {
524 return;
525 }
526
527 if (self.overlay) {
528 self.overlay.destroy();
529 }
530 self.uiMyDialog.unbind('keypress.ui-dialog');
531
532 self._isOpen = false;
533
534 if (self.options.hide) {
535 self.uiMyDialog.hide(self.options.hide, function() {
536 self._trigger('close', event);
537 });
538 } else {
539 self.uiMyDialog.hide();
540 self._trigger('close', event);
541 }
542
543 $.ui.mydialog.overlay.resize();
544
545 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
546 if (self.options.modal) {
547 maxZ = 0;
548 $('.ui-dialog').each(function() {
549 if (this !== self.uiMyDialog[0]) {
550 maxZ = Math.max(maxZ, $(this).css('z-index'));
551 }
552 });
553 $.ui.mydialog.maxZ = maxZ;
554 }
555
556 return self;
557 },
558
559 isOpen: function() {
560 return this._isOpen;
561 },
562
563 // the force parameter allows us to move modal dialogs to their correct
564 // position on open
565 moveToTop: function(force, event) {
566 var self = this,
567 options = self.options,
568 saveScroll;
569
570 if ((options.modal && !force) ||
571 (!options.stack && !options.modal)) {
572 return self._trigger('focus', event);
573 }
574
575 if (options.zIndex > $.ui.mydialog.maxZ) {
576 $.ui.mydialog.maxZ = options.zIndex;
577 }
578 if (self.overlay) {
579 $.ui.mydialog.maxZ += 1;
580 self.overlay.$el.css('z-index', $.ui.mydialog.overlay.maxZ = $.ui.mydialog.maxZ);
581 }
582
583 //Save and then restore scroll since Opera 9.5+ resets when parent z-Index is changed.
584 // http://ui.jquery.com/bugs/ticket/3193
585 saveScroll = { scrollTop: self.element.attr('scrollTop'), scrollLeft: self.element.attr('scrollLeft') };
586 $.ui.mydialog.maxZ += 1;
587 self.uiMyDialog.css('z-index', $.ui.mydialog.maxZ);
588 self.element.attr(saveScroll);
589 self._trigger('focus', event);
590
591 return self;
592 },
593
594 open: function() {
595 if (this._isOpen) { return; }
596
597 var self = this,
598 options = self.options,
599 uiMyDialog = self.uiMyDialog;
600
601 self.overlay = options.modal ? new $.ui.mydialog.overlay(self) : null;
602 if (uiMyDialog.next().length) {
603 uiMyDialog.appendTo('body');
604 }
605 self._size();
606 self._position(options.position);
607 uiMyDialog.show(options.show);
608 self.moveToTop(true);
609
610 // prevent tabbing out of modal dialogs
611 if (options.modal) {
612 uiMyDialog.bind('keypress.ui-dialog', function(event) {
613 if (event.keyCode !== $.ui.keyCode.TAB) {
614 return;
615 }
616
617 var tabbables = $(':tabbable', this),
618 first = tabbables.filter(':first'),
619 last = tabbables.filter(':last');
620
621 if (event.target === last[0] && !event.shiftKey) {
622 first.focus(1);
623 return false;
624 } else if (event.target === first[0] && event.shiftKey) {
625 last.focus(1);
626 return false;
627 }
628 });
629 }
630
631 // set focus to the first tabbable element in the content area or the first button
632 // if there are no tabbable elements, set focus on the dialog itself
633 $(self.element.find(':tabbable').get().concat(
634 uiMyDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
635 uiMyDialog.get()))).eq(0).focus();
636
637 self._trigger('open');
638 self._isOpen = true;
639
640 return self;
641 },
642
643 _createButtons: function(buttons) {
644 var self = this,
645 hasButtons = false,
646 uiMyDialogButtonPane = $('<div></div>')
647 .addClass(
648 'ui-dialog-buttonpane ' +
649 'ui-widget-content ' +
650 'ui-helper-clearfix'
651 ),
652 uiButtonSet = $( "<div></div>" )
653 .addClass( "ui-dialog-buttonset" )
654 .appendTo( uiMyDialogButtonPane );
655
656 // if we already have a button pane, remove it
657 self.uiMyDialog.find('.ui-dialog-buttonpane').remove();
658
659 if (typeof buttons === 'object' && buttons !== null) {
660 $.each(buttons, function() {
661 return !(hasButtons = true);
662 });
663 }
664 if (hasButtons) {
665 $.each(buttons, function(name, fn) {
666 var button = $('<button type="button"></button>')
667 .text(name)
668 .click(function() { fn.apply(self.element[0], arguments); })
669 .appendTo(uiButtonSet);
670 if ($.fn.button) {
671 button.button();
672 }
673 });
674 uiMyDialogButtonPane.appendTo(self.uiMyDialog);
675 }
676 },
677
678 _makeDraggable: function() {
679 var self = this,
680 options = self.options,
681 doc = $(document),
682 heightBeforeDrag;
683
684 function filteredUi(ui) {
685 return {
686 position: ui.position,
687 offset: ui.offset
688 };
689 }
690
691 self.uiMyDialog.draggable({
692 cancel: '.ui-dialog-content, .ui-dialog-titlebar-close',
693 handle: '.ui-dialog-titlebar',
694 containment: 'document',
695 start: function(event, ui) {
696 heightBeforeDrag = options.height === "auto" ? "auto" : $(this).height();
697 $(this).height($(this).height()).addClass("ui-dialog-dragging");
698 self._trigger('dragStart', event, filteredUi(ui));
699 },
700 drag: function(event, ui) {
701 self._trigger('drag', event, filteredUi(ui));
702 },
703 stop: function(event, ui) {
704 options.position = [ui.position.left - doc.scrollLeft(),
705 ui.position.top - doc.scrollTop()];
706 $(this).removeClass("ui-dialog-dragging").height(heightBeforeDrag);
707 self._trigger('dragStop', event, filteredUi(ui));
708 $.ui.mydialog.overlay.resize();
709 }
710 });
711 },
712
713 _makeResizable: function(handles) {
714 handles = (handles === undefined ? this.options.resizable : handles);
715 var self = this,
716 options = self.options,
717 // .ui-resizable has position: relative defined in the stylesheet
718 // but dialogs have to use absolute or fixed positioning
719 position = self.uiMyDialog.css('position'),
720 resizeHandles = (typeof handles === 'string' ?
721 handles :
722 'n,e,s,w,se,sw,ne,nw'
723 );
724
725 function filteredUi(ui) {
726 return {
727 originalPosition: ui.originalPosition,
728 originalSize: ui.originalSize,
729 position: ui.position,
730 size: ui.size
731 };
732 }
733
734 self.uiMyDialog.resizable({
735 cancel: '.ui-dialog-content',
736 containment: 'document',
737 alsoResize: self.element,
738 maxWidth: options.maxWidth,
739 maxHeight: options.maxHeight,
740 minWidth: options.minWidth,
741 minHeight: self._minHeight(),
742 handles: resizeHandles,
743 start: function(event, ui) {
744 $(this).addClass("ui-dialog-resizing");
745 self._trigger('resizeStart', event, filteredUi(ui));
746 },
747 resize: function(event, ui) {
748 self._trigger('resize', event, filteredUi(ui));
749 },
750 stop: function(event, ui) {
751 $(this).removeClass("ui-dialog-resizing");
752 options.height = $(this).height();
753 options.width = $(this).width();
754 self._trigger('resizeStop', event, filteredUi(ui));
755 $.ui.mydialog.overlay.resize();
756 }
757 })
758 .css('position', position)
759 .find('.ui-resizable-se').addClass('ui-icon ui-icon-grip-diagonal-se');
760 },
761
762 _minHeight: function() {
763 var options = this.options;
764
765 if (options.height === 'auto') {
766 return options.minHeight;
767 } else {
768 return Math.min(options.minHeight, options.height);
769 }
770 },
771
772 _position: function(position) {
773 var myAt = [],
774 offset = [0, 0],
775 isVisible;
776
777 if (position) {
778 // deep extending converts arrays to objects in jQuery <= 1.3.2 :-(
779 // if (typeof position == 'string' || $.isArray(position)) {
780 // myAt = $.isArray(position) ? position : position.split(' ');
781
782 if (typeof position === 'string' || (typeof position === 'object' && '0' in position)) {
783 myAt = position.split ? position.split(' ') : [position[0], position[1]];
784 if (myAt.length === 1) {
785 myAt[1] = myAt[0];
786 }
787
788 $.each(['left', 'top'], function(i, offsetPosition) {
789 if (+myAt[i] === myAt[i]) {
790 offset[i] = myAt[i];
791 myAt[i] = offsetPosition;
792 }
793 });
794
795 position = {
796 my: myAt.join(" "),
797 at: myAt.join(" "),
798 offset: offset.join(" ")
799 };
800 }
801
802 position = $.extend({}, $.ui.mydialog.prototype.options.position, position);
803 } else {
804 position = $.ui.mydialog.prototype.options.position;
805 }
806
807 // need to show the dialog to get the actual offset in the position plugin
808 isVisible = this.uiMyDialog.is(':visible');
809 if (!isVisible) {
810 this.uiMyDialog.show();
811 }
812 this.uiMyDialog
813 // workaround for jQuery bug #5781 http://dev.jquery.com/ticket/5781
814 .css({ top: 0, left: 0 })
815 .position(position);
816 if (!isVisible) {
817 this.uiMyDialog.hide();
818 }
819 },
820
821 _setOption: function(key, value){
822 var self = this,
823 uiMyDialog = self.uiMyDialog,
824 isResizable = uiMyDialog.is(':data(resizable)'),
825 resize = false;
826
827 switch (key) {
828 //handling of deprecated beforeclose (vs beforeClose) option
829 //Ticket #4669 http://dev.jqueryui.com/ticket/4669
830 //TODO: remove in 1.9pre
831 case "beforeclose":
832 key = "beforeClose";
833 break;
834 case "buttons":
835 self._createButtons(value);
836 resize = true;
837 break;
838 case "closeText":
839 // convert whatever was passed in to a string, for text() to not throw up
840 self.uiMyDialogTitlebarCloseText.text("" + value);
841 break;
842 case "dialogClass":
843 uiMyDialog
844 .removeClass(self.options.dialogClass)
845 .addClass(uiMyDialogClasses + value);
846 break;
847 case "disabled":
848 if (value) {
849 uiMyDialog.addClass('ui-dialog-disabled');
850 } else {
851 uiMyDialog.removeClass('ui-dialog-disabled');
852 }
853 break;
854 case "draggable":
855 if (value) {
856 self._makeDraggable();
857 } else {
858 uiMyDialog.draggable('destroy');
859 }
860 break;
861 case "height":
862 resize = true;
863 break;
864 case "maxHeight":
865 if (isResizable) {
866 uiMyDialog.resizable('option', 'maxHeight', value);
867 }
868 resize = true;
869 break;
870 case "maxWidth":
871 if (isResizable) {
872 uiMyDialog.resizable('option', 'maxWidth', value);
873 }
874 resize = true;
875 break;
876 case "minHeight":
877 if (isResizable) {
878 uiMyDialog.resizable('option', 'minHeight', value);
879 }
880 resize = true;
881 break;
882 case "minWidth":
883 if (isResizable) {
884 uiMyDialog.resizable('option', 'minWidth', value);
885 }
886 resize = true;
887 break;
888 case "position":
889 self._position(value);
890 break;
891 case "resizable":
892 // currently resizable, becoming non-resizable
893 if (isResizable && !value) {
894 uiMyDialog.resizable('destroy');
895 }
896
897 // currently resizable, changing handles
898 if (isResizable && typeof value === 'string') {
899 uiMyDialog.resizable('option', 'handles', value);
900 }
901
902 // currently non-resizable, becoming resizable
903 if (!isResizable && value !== false) {
904 self._makeResizable(value);
905 }
906 break;
907 case "title":
908 // convert whatever was passed in o a string, for html() to not throw up
909 $(".ui-dialog-title", self.uiMyDialogTitlebar).html("" + (value || '&#160;'));
910 break;
911 case "width":
912 resize = true;
913 break;
914 }
915
916 $.Widget.prototype._setOption.apply(self, arguments);
917 if (resize) {
918 self._size();
919 }
920 },
921
922 _size: function() {
923 /* If the user has resized the dialog, the .ui-dialog and .ui-dialog-content
924 * divs will both have width and height set, so we need to reset them
925 */
926 var options = this.options,
927 nonContentHeight;
928
929 // reset content sizing
930 // hide for non content measurement because height: 0 doesn't work in IE quirks mode (see #4350)
931 this.element.css({
932 width: 'auto',
933 minHeight: 0,
934 height: 0
935 });
936
937 if (options.minWidth > options.width) {
938 options.width = options.minWidth;
939 }
940
941 // reset wrapper sizing
942 // determine the height of all the non-content elements
943 nonContentHeight = this.uiMyDialog.css({
944 height: 'auto',
945 width: options.width
946 })
947 .height();
948
949 this.element
950 .css(options.height === 'auto' ? {
951 minHeight: Math.max(options.minHeight - nonContentHeight, 0),
952 height: 'auto'
953 } : {
954 minHeight: 0,
955 height: Math.max(options.height - nonContentHeight, 0)
956 })
957 .show();
958
959 if (this.uiMyDialog.is(':data(resizable)')) {
960 this.uiMyDialog.resizable('option', 'minHeight', this._minHeight());
961 }
962 }
963});
964
965
966$.extend($.ui.mydialog, {
967 version: "1.8.4",
968
969 uuid: 0,
970 maxZ: 0,
971
972 getTitleId: function($el) {
973 var id = $el.attr('id');
974 if (!id) {
975 this.uuid += 1;
976 id = this.uuid;
977 }
978 return 'ui-dialog-title-' + id;
979 },
980
981 overlay: function(dialog) {
982 this.$el = $.ui.mydialog.overlay.create(dialog);
983 }
984});
985
986
987$.extend($.ui.mydialog.overlay, {
988 instances: [],
989 // reuse old instances due to IE memory leak with alpha transparency (see #5185)
990 oldInstances: [],
991 maxZ: 0,
992 events: $.map('focus,mousedown,mouseup,keydown,keypress,click'.split(','),
993 function(event) { return event + '.dialog-overlay'; }).join(' '),
994 create: function(dialog) {
995 if (this.instances.length === 0) {
996 // prevent use of anchors and inputs
997 // we use a setTimeout in case the overlay is created from an
998 // event that we're going to be cancelling (see #2804)
999 setTimeout(function() {
1000 // handle $(el).dialog().dialog('close') (see #4065)
1001 if ($.ui.mydialog.overlay.instances.length) {
1002 $(document).bind($.ui.mydialog.overlay.events, function(event) {
1003 // stop events if the z-index of the target is < the z-index of the overlay
1004 return ($(event.target).zIndex() >= $.ui.mydialog.overlay.maxZ);
1005 });
1006 }
1007 }, 1);
1008
1009 // allow closing by pressing the escape key
1010 $(document).bind('keydown.dialog-overlay', function(event) {
1011 if (dialog.options.closeOnEscape && event.keyCode &&
1012 event.keyCode === $.ui.keyCode.ESCAPE) {
1013
1014 dialog.close(event);
1015 event.preventDefault();
1016 }
1017 });
1018
1019 // handle window resize
1020 $(window).bind('resize.dialog-overlay', $.ui.mydialog.overlay.resize);
1021 }
1022
1023 var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-widget-overlay'))
1024 .appendTo(document.body)
1025 .css({
1026 width: this.width(),
1027 height: this.height()
1028 });
1029
1030 if ($.fn.bgiframe) {
1031 $el.bgiframe();
1032 }
1033
1034 this.instances.push($el);
1035 return $el;
1036 },
1037
1038 destroy: function($el) {
1039 this.oldInstances.push(this.instances.splice($.inArray($el, this.instances), 1)[0]);
1040
1041 if (this.instances.length === 0) {
1042 $([document, window]).unbind('.dialog-overlay');
1043 }
1044
1045 $el.remove();
1046
1047 // adjust the maxZ to allow other modal dialogs to continue to work (see #4309)
1048 var maxZ = 0;
1049 $.each(this.instances, function() {
1050 maxZ = Math.max(maxZ, this.css('z-index'));
1051 });
1052 this.maxZ = maxZ;
1053 },
1054
1055 height: function() {
1056 var scrollHeight,
1057 offsetHeight;
1058 // handle IE 6
1059 if ($.browser.msie && $.browser.version < 7) {
1060 scrollHeight = Math.max(
1061 document.documentElement.scrollHeight,
1062 document.body.scrollHeight
1063 );
1064 offsetHeight = Math.max(
1065 document.documentElement.offsetHeight,
1066 document.body.offsetHeight
1067 );
1068
1069 if (scrollHeight < offsetHeight) {
1070 return $(window).height() + 'px';
1071 } else {
1072 return scrollHeight + 'px';
1073 }
1074 // handle "good" browsers
1075 } else {
1076 return $(document).height() + 'px';
1077 }
1078 },
1079
1080 width: function() {
1081 var scrollWidth,
1082 offsetWidth;
1083 // handle IE 6
1084 if ($.browser.msie && $.browser.version < 7) {
1085 scrollWidth = Math.max(
1086 document.documentElement.scrollWidth,
1087 document.body.scrollWidth
1088 );
1089 offsetWidth = Math.max(
1090 document.documentElement.offsetWidth,
1091 document.body.offsetWidth
1092 );
1093
1094 if (scrollWidth < offsetWidth) {
1095 return $(window).width() + 'px';
1096 } else {
1097 return scrollWidth + 'px';
1098 }
1099 // handle "good" browsers
1100 } else {
1101 return $(document).width() + 'px';
1102 }
1103 },
1104
1105 resize: function() {
1106 /* If the dialog is draggable and the user drags it past the
1107 * right edge of the window, the document becomes wider so we
1108 * need to stretch the overlay. If the user then drags the
1109 * dialog back to the left, the document will become narrower,
1110 * so we need to shrink the overlay to the appropriate size.
1111 * This is handled by shrinking the overlay before setting it
1112 * to the full document size.
1113 */
1114 var $overlays = $([]);
1115 $.each($.ui.mydialog.overlay.instances, function() {
1116 $overlays = $overlays.add(this);
1117 });
1118
1119 $overlays.css({
1120 width: 0,
1121 height: 0
1122 }).css({
1123 width: $.ui.mydialog.overlay.width(),
1124 height: $.ui.mydialog.overlay.height()
1125 });
1126 }
1127});
1128
1129$.extend($.ui.mydialog.overlay.prototype, {
1130 destroy: function() {
1131 $.ui.mydialog.overlay.destroy(this.$el);
1132 }
1133});
1134
1135
1136// Open Video Player link
1137 $('#open_player_link').click(function(){
1138 $('#replaymePlayer').dialog('open');
1139 return false;
1140 });
1141
1142
1143//Video Player window
1144 $("#replaymePlayer").dialog({
1145 autoOpen: false,
1146 height: 620,
1147 width: 785,
1148 modal: true,
1149 beforeclose: function(event, ui) {
1150 onEnd();
1151 $('#mute').button({
1152 label: 'mute',
1153 icons: {
1154 primary: 'ui-icon-volume-on'
1155 }
1156 });
1157 $( "#subtitles" ).button( "option", "label", "Subtitles");
1158 $( "#audiotracks" ).button( "option", "label", "Audio Track(s)");
1159 },
1160 resizeStart: function(event, ui) {
1161 document.getElementById("vlc").style.height = "70%";
1162 document.getElementById("vlc").style.width = "100%";},
1163 resizeStop: function(event, ui) { setPlayerSize(); }
1164 });
1165
1166
1167//Video Player info sub-window
1168 $( "#infodialog" ).mydialog({
1169 autoOpen: false,
1170 zIndex: 100000,
1171 show: "clip",
1172 hide: "clip",
1173 position: 'top',
1174 width: 460,
1175 buttons: {
1176 Ok: function() {
1177 $( this ).mydialog( "close" );
1178 }
1179 }
1180 });
1181
1182
1183//Hover states on the Video Player link
1184 $('#open_player_link, ul#icons li').hover(
1185 function() { $(this).addClass('ui-state-hover'); },
1186 function() { $(this).removeClass('ui-state-hover'); }
1187 );
1188
1189
1190//Player toolbar:
1191 $('#play').button({
1192 text: false,
1193 icons: {
1194 primary: 'ui-icon-play'
1195 }
1196 })
1197 .click(function() {
1198 var options;
1199 if ($(this).text() == 'play') {
1200 play();
1201 options = {
1202 label: 'pause',
1203 icons: {
1204 primary: 'ui-icon-pause'
1205 }
1206 };
1207 } else {
1208 togglePause();
1209 options = {
1210 label: 'play',
1211 icons: {
1212 primary: 'ui-icon-play'
1213 }
1214 };
1215 }
1216 $(this).button('option', options);
1217 });
1218
1219 $('#stop').button({
1220 text: false,
1221 icons: {
1222 primary: 'ui-icon-stop'
1223 }
1224 })
1225 .click(function() {
1226 stop();
1227 $('#play').button('option', {
1228 label: 'play',
1229 icons: {
1230 primary: 'ui-icon-play'
1231 }
1232 });
1233 });
1234
1235 $('#mute').button({
1236 text: false,
1237 icons: {
1238 primary: 'ui-icon-volume-on'
1239 }
1240 })
1241 .click(function() {
1242 var options;
1243 if ($(this).text() == 'mute on') {
1244 toggleMute();
1245 options = {
1246 label: 'mute off',
1247 icons: {
1248 primary: 'ui-icon-volume-on'
1249 }
1250 };
1251 } else {
1252 toggleMute();
1253 options = {
1254 label: 'mute on',
1255 icons: {
1256 primary: 'ui-icon-volume-off'
1257 }
1258 };
1259 }
1260 $(this).button('option', options);
1261 });
1262
1263 $('#fullscreen').button({
1264 text: false,
1265 icons: {
1266 primary: 'ui-icon-arrow-4-diag'
1267 }
1268 })
1269 .click(function() {
1270 toggleFullscreen();
1271 });
1272
1273 $('#subtitles').button({
1274 icons: {primary: 'ui-icon-grip-dotted-horizontal'},
1275 disabled: true
1276 })
1277 .click(function() {
1278 changeSubtitles();
1279 });
1280
1281 $('#audiotracks').button({
1282 icons: {primary: 'ui-icon-comment'},
1283 disabled: true
1284 })
1285 .click(function() {
1286 changeAudioTrack();
1287 });
1288
1289 $('#info').button({
1290 text: false,
1291 icons: {
1292 primary: 'ui-icon-info'
1293 }
1294 })
1295 .click(function() {
1296 $('#infodialog').mydialog('open');
1297 });
1298
1299//Seeking bar
1300 $('#slider').slider({
1301 start: function(event, ui) {user_is_dragging=1;},
1302 stop: function(event, ui) {seek();},
1303 animate: true,
1304 min: 0,
1305 max: 1,
1306 step: 0.000125
1307 });
1308
1309});
Note: See TracBrowser for help on using the repository browser.