1 IriSP.Widgets.SlideVideoPlayer = function(player, config) {

     2     IriSP.loadCss(IriSP.getLib("cssSplitter"));

     3     IriSP.Widgets.Widget.call(this, player, config);

     4 };

     5 

     6 IriSP.Widgets.SlideVideoPlayer.prototype = new IriSP.Widgets.Widget();

     7 

     8 

     9 IriSP.Widgets.SlideVideoPlayer.prototype.defaults = {

    10     playerModule: "HtmlPlayer",

    11     // mode is either "sidebyside" or "pip"

    12     mode: "sidebyside"

    13 };

    14 

    15 IriSP.Widgets.SlideVideoPlayer.prototype.template = '<div class="Ldt-SlideVideoPlayer">\

    16   <div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\

    17   </div>\

    18   <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\

    19   </div>\

    20 </div>';

    21 

    22 IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() {

    23     var _this = this;

    24 

    25     _this.renderTemplate();

    26     this.insertSubwidget(

    27         _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"),

    28             {

    29                 type: "ImageDisplay",

    30                 annotation_type: _this.annotation_type

    31             },

    32             "slide"

    33         );

    34     this.insertSubwidget(

    35         _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"),

    36             {

    37                 type: _this.playerModule,

    38                 video: _this.video,

    39                 width: '100%',

    40                 url_transform: _this.url_transform

    41             },

    42             "player"

    43     );

    44 

    45     if (_this.mode == 'pip') {

    46         _this.$.find(".Ldt-SlideVideoPlayer-panel").append('<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>');

    47         _this.$.on("click", ".Ldt-SlideVideoPlayer-pip-menu-toggle", function () {

    48             _this.toggleMainDisplay();

    49         });

    50         window.setTimeout(function () {

    51             _this.setMainDisplay('video');

    52         }, 1500);

    53     } else {

    54         // Default : side by side

    55         // FIXME: this should be better implemented through a signal sent

    56         // when widgets are ready (and not just loaded)

    57         window.setTimeout(function () {

    58             _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({ orientation: (screen.height > screen.width) ? 'vertical' : 'horizontal',

    59                                                                leftMin: 20,

    60                                                                topMin: 20

    61                                                              });

    62         }, 1500);

    63     }

    64 };

    65 

    66 IriSP.Widgets.SlideVideoPlayer.prototype.toggleMainDisplay = function() {

    67     if (this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video").hasClass("Ldt-SlideVideoPlayer-pip-main")) {

    68         this.setMainDisplay('slides');

    69     } else {

    70         this.setMainDisplay('video');

    71     }

    72 };

    73 

    74 // Set main display (in case of a "switch" display mode)

    75 // main is either 'video' or 'slides'

    76 IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slides) {

    77     var main = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video");

    78     var pip = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide");

    79     if (video_or_slides == 'slides') {

    80         var temp = main;

    81         main = pip;

    82         pip = temp;

    83     };

    84     main.removeClass('Ldt-SlideVideoPlayer-pip-pip').addClass('Ldt-SlideVideoPlayer-pip-main');

    85     pip.removeClass('Ldt-SlideVideoPlayer-pip-main').addClass('Ldt-SlideVideoPlayer-pip-pip');

    86 }