1 IriSP.Widgets.SlideVideoPlayer = function(player, config) { |
1 import slideVideoPlayerStyles from "./SlideVideoPlayer.module.css"; |
2 IriSP.loadCss(IriSP.getLib("cssSplitter")); |
|
3 IriSP.Widgets.Widget.call(this, player, config); |
|
4 }; |
|
5 |
2 |
6 IriSP.Widgets.SlideVideoPlayer.prototype = new IriSP.Widgets.Widget(); |
3 const SlideVideoPlayer = function (ns) { |
|
4 return class extends ns.Widgets.Widget { |
|
5 constructor(player, config) { |
|
6 //IriSP.loadCss(IriSP.getLib("cssSplitter")); |
|
7 super(player, config); |
|
8 } |
7 |
9 |
|
10 static defaults = { |
|
11 playerModule: "HtmlPlayer", |
|
12 // mode is either "sidebyside" or "pip" |
|
13 mode: "sidebyside", |
|
14 }; |
8 |
15 |
9 IriSP.Widgets.SlideVideoPlayer.prototype.defaults = { |
16 template = |
10 playerModule: "HtmlPlayer", |
17 '<div class="Ldt-SlideVideoPlayer">\ |
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">\ |
18 <div class="Ldt-SlideVideoPlayer-slide Ldt-SlideVideoPlayer-panel">\ |
17 </div>\ |
19 </div>\ |
18 <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\ |
20 <div class="Ldt-SlideVideoPlayer-video Ldt-SlideVideoPlayer-panel">\ |
19 </div>\ |
21 </div>\ |
20 </div>'; |
22 </div>'; |
21 |
23 |
22 IriSP.Widgets.SlideVideoPlayer.prototype.draw = function() { |
24 draw() { |
23 var _this = this; |
25 var _this = this; |
24 |
26 |
25 _this.renderTemplate(); |
27 _this.renderTemplate(); |
26 this.insertSubwidget( |
28 this.insertSubwidget( |
27 _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"), |
29 _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"), |
28 { |
30 { |
29 type: "ImageDisplay", |
31 type: "ImageDisplay", |
30 annotation_type: _this.annotation_type |
32 annotation_type: _this.annotation_type, |
31 }, |
33 }, |
32 "slide" |
34 "slide" |
|
35 ); |
|
36 this.insertSubwidget( |
|
37 _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"), |
|
38 { |
|
39 type: _this.playerModule, |
|
40 video: _this.video, |
|
41 width: "100%", |
|
42 url_transform: _this.url_transform, |
|
43 }, |
|
44 "player" |
|
45 ); |
|
46 |
|
47 if (_this.mode == "pip") { |
|
48 _this.$.find(".Ldt-SlideVideoPlayer-panel").append( |
|
49 '<div class="Ldt-SlideVideoPlayer-pip-menu"><div class="Ldt-SlideVideoPlayer-pip-menu-toggle"></div></div>' |
33 ); |
50 ); |
34 this.insertSubwidget( |
51 _this.$.on( |
35 _this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"), |
52 "click", |
36 { |
53 ".Ldt-SlideVideoPlayer-pip-menu-toggle", |
37 type: _this.playerModule, |
54 function () { |
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(); |
55 _this.toggleMainDisplay(); |
49 }); |
56 } |
|
57 ); |
50 window.setTimeout(function () { |
58 window.setTimeout(function () { |
51 _this.setMainDisplay('video'); |
59 _this.setMainDisplay("video"); |
52 }, 1500); |
60 }, 1500); |
53 } else { |
61 } else { |
54 // Default : side by side |
62 // Default : side by side |
55 // FIXME: this should be better implemented through a signal sent |
63 // FIXME: this should be better implemented through a signal sent |
56 // when widgets are ready (and not just loaded) |
64 // when widgets are ready (and not just loaded) |
57 window.setTimeout(function () { |
65 window.setTimeout(function () { |
58 _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({ orientation: (screen.height > screen.width) ? 'vertical' : 'horizontal', |
66 _this.$.find(".Ldt-SlideVideoPlayer").touchSplit({ |
59 leftMin: 20, |
67 orientation: |
60 topMin: 20 |
68 screen.height > screen.width ? "vertical" : "horizontal", |
61 }); |
69 leftMin: 20, |
|
70 topMin: 20, |
|
71 }); |
62 }, 1500); |
72 }, 1500); |
|
73 } |
63 } |
74 } |
64 }; |
|
65 |
75 |
66 IriSP.Widgets.SlideVideoPlayer.prototype.toggleMainDisplay = function() { |
76 toggleMainDisplay() { |
67 if (this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video").hasClass("Ldt-SlideVideoPlayer-pip-main")) { |
77 if ( |
68 this.setMainDisplay('slides'); |
78 this.$.find( |
69 } else { |
79 ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video" |
70 this.setMainDisplay('video'); |
80 ).hasClass("Ldt-SlideVideoPlayer-pip-main") |
|
81 ) { |
|
82 this.setMainDisplay("slides"); |
|
83 } else { |
|
84 this.setMainDisplay("video"); |
|
85 } |
71 } |
86 } |
72 }; |
|
73 |
87 |
74 // Set main display (in case of a "switch" display mode) |
88 // Set main display (in case of a "switch" display mode) |
75 // main is either 'video' or 'slides' |
89 // main is either 'video' or 'slides' |
76 IriSP.Widgets.SlideVideoPlayer.prototype.setMainDisplay = function(video_or_slides) { |
90 setMainDisplay(video_or_slides) { |
77 var main = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video"); |
91 var main = this.$.find( |
78 var pip = this.$.find(".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide"); |
92 ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-video" |
79 if (video_or_slides == 'slides') { |
93 ); |
|
94 var pip = this.$.find( |
|
95 ".Ldt-SlideVideoPlayer-panel.Ldt-SlideVideoPlayer-slide" |
|
96 ); |
|
97 if (video_or_slides == "slides") { |
80 var temp = main; |
98 var temp = main; |
81 main = pip; |
99 main = pip; |
82 pip = temp; |
100 pip = temp; |
83 }; |
101 } |
84 main.removeClass('Ldt-SlideVideoPlayer-pip-pip').addClass('Ldt-SlideVideoPlayer-pip-main'); |
102 main |
85 pip.removeClass('Ldt-SlideVideoPlayer-pip-main').addClass('Ldt-SlideVideoPlayer-pip-pip'); |
103 .removeClass("Ldt-SlideVideoPlayer-pip-pip") |
86 } |
104 .addClass("Ldt-SlideVideoPlayer-pip-main"); |
|
105 pip |
|
106 .removeClass("Ldt-SlideVideoPlayer-pip-main") |
|
107 .addClass("Ldt-SlideVideoPlayer-pip-pip"); |
|
108 } |
|
109 }; |
|
110 }; |
|
111 |
|
112 export { SlideVideoPlayer, slideVideoPlayerStyles }; |