1 IriSP.Widgets.DailymotionPlayer = function(player, config) { |
1 // DailymotionPlayer |
2 IriSP.Widgets.Widget.call(this, player, config); |
2 import Mustache from "mustache"; |
3 }; |
|
4 |
3 |
5 IriSP.Widgets.DailymotionPlayer.prototype = new IriSP.Widgets.Widget(); |
4 const DailymotionPlayer = function (ns) { |
6 |
5 return class extends ns.Widgets.Widget { |
7 IriSP.Widgets.DailymotionPlayer.prototype.defaults = { |
6 constructor(player, config) { |
8 aspect_ratio: 14/9 |
7 super(player, config); |
9 }; |
|
10 |
|
11 IriSP.Widgets.DailymotionPlayer.prototype.draw = function() { |
|
12 |
|
13 if (typeof this.video === "undefined") { |
|
14 this.video = this.media.video; |
|
15 } |
8 } |
16 |
9 |
17 this.height = this.height || Math.floor(this.width / this.aspect_ratio); |
10 static defaults = { |
|
11 aspect_ratio: 14 / 9, |
|
12 }; |
18 |
13 |
19 var _media = this.media, |
14 draw = function () { |
|
15 if (typeof this.video === "undefined") { |
|
16 this.video = this.media.video; |
|
17 } |
|
18 |
|
19 this.height = this.height || Math.floor(this.width / this.aspect_ratio); |
|
20 |
|
21 var _media = this.media, |
20 videoid = null, |
22 videoid = null, |
21 _this = this, |
23 _this = this, |
22 state = { |
24 state = { |
23 pause: true, |
25 pause: true, |
24 apiready: false, |
26 apiready: false, |
25 volume: 0, |
27 volume: 0, |
26 time: 0, |
28 time: 0, |
27 duration: 0 |
29 duration: 0, |
28 }; |
30 }; |
29 |
31 |
30 var m = this.video.match(/www.dailymotion.com\/video\/(.+)/); |
32 var m = this.video.match(/www.dailymotion.com\/video\/(.+)/); |
31 if (m) { |
33 if (m) { |
32 videoid = m[1]; |
34 videoid = m[1]; |
33 } |
35 } |
34 |
36 |
35 var player_url = Mustache.to_html('{{ protocol }}//www.dailymotion.com/embed/video/{{ videoid }}', { |
37 var player_url = Mustache.render( |
36 protocol: document.location.protocol.search('http') == 0 ? document.location.protocol : 'http:', |
38 "{{ protocol }}//www.dailymotion.com/embed/video/{{ videoid }}", |
37 videoid: videoid |
39 { |
38 }); |
40 protocol: |
39 var params = { |
41 document.location.protocol.search("http") == 0 |
40 'api': 'postMessage', |
42 ? document.location.protocol |
41 'chromeless': 1, |
43 : "http:", |
42 'id': 'dm_player', |
44 videoid: videoid, |
43 'related': 0, |
45 } |
44 'autoplay': 1 |
46 ); |
45 }; |
47 var params = { |
|
48 api: "postMessage", |
|
49 chromeless: 1, |
|
50 id: "dm_player", |
|
51 related: 0, |
|
52 autoplay: 1, |
|
53 }; |
46 |
54 |
47 _this.$.html(Mustache.to_html('<iframe id="{{ id }}" src="{{ player_url }}?{{ params }}" width="{{ width }}" height="{{ height }}" frameborder="0"></iframe>', { |
55 _this.$.html( |
48 player_url: player_url, |
56 Mustache.render( |
49 params: Object.keys(params).reduce(function(a,k){a.push(k+'='+encodeURIComponent(params[k]));return a;},[]).join('&'), |
57 '<iframe id="{{ id }}" src="{{ player_url }}?{{ params }}" width="{{ width }}" height="{{ height }}" frameborder="0"></iframe>', |
50 width: this.width, |
58 { |
51 height: this.height, |
59 player_url: player_url, |
52 id: params.id |
60 params: Object.keys(params) |
53 })); |
61 .reduce(function (a, k) { |
|
62 a.push(k + "=" + encodeURIComponent(params[k])); |
|
63 return a; |
|
64 }, []) |
|
65 .join("&"), |
|
66 width: this.width, |
|
67 height: this.height, |
|
68 id: params.id, |
|
69 } |
|
70 ) |
|
71 ); |
54 |
72 |
55 function setup_media_methods () { |
73 function setup_media_methods() { |
56 var dest = _this.$.find("#" + params.id)[0].contentWindow; |
74 var dest = _this.$.find("#" + params.id)[0].contentWindow; |
57 var execute = function(c, v) { |
75 var execute = function (c, v) { |
58 if (v !== undefined) |
76 if (v !== undefined) c = c + "=" + v; |
59 c = c + "=" + v; |
77 dest.postMessage(c, "*"); |
60 dest.postMessage(c, "*"); |
|
61 }; |
78 }; |
62 |
79 |
63 _media.getCurrentTime = function() { |
80 _media.getCurrentTime = function () { |
64 return state.time; |
81 return state.time; |
65 }; |
82 }; |
66 _media.getVolume = function() { |
83 _media.getVolume = function () { |
67 return state.volume; |
84 return state.volume; |
68 }; |
85 }; |
69 _media.getPaused = function() { |
86 _media.getPaused = function () { |
70 return state.pause; |
87 return state.pause; |
71 }; |
88 }; |
72 _media.getMuted = function() { |
89 _media.getMuted = function () { |
73 return state.muted; |
90 return state.muted; |
74 }; |
91 }; |
75 _media.setCurrentTime = function(_milliseconds) { |
92 _media.setCurrentTime = function (_milliseconds) { |
76 execute("seek", _milliseconds / 1000); |
93 execute("seek", _milliseconds / 1000); |
77 }; |
94 }; |
78 _media.setVolume = function(_vol) { |
95 _media.setVolume = function (_vol) { |
79 execute("volume", _vol * 100); |
96 execute("volume", _vol * 100); |
80 }; |
97 }; |
81 _media.mute = function() { |
98 _media.mute = function () { |
82 execute("muted", 1); |
99 execute("muted", 1); |
83 }; |
100 }; |
84 _media.unmute = function() { |
101 _media.unmute = function () { |
85 execute("muted", 0); |
102 execute("muted", 0); |
86 }; |
103 }; |
87 _media.play = function() { |
104 _media.play = function () { |
88 execute("play"); |
105 execute("play"); |
89 }; |
106 }; |
90 _media.pause = function() { |
107 _media.pause = function () { |
91 execute("pause"); |
108 execute("pause"); |
92 }; |
109 }; |
93 }; |
110 } |
94 |
111 |
95 window.addEventListener("message", function (event) { |
112 window.addEventListener( |
96 // Parse event.data (query-string for to object) |
113 "message", |
|
114 function (event) { |
|
115 // Parse event.data (query-string for to object) |
97 |
116 |
98 // Duck-checking if event.data is a string |
117 // Duck-checking if event.data is a string |
99 if (event.data.split === undefined) |
118 if (event.data.split === undefined) return; |
100 return; |
|
101 |
119 |
102 var info = event.data.split("&").map( function(s) { return s.split("="); }).reduce( function(o, v) { o[v[0]] = decodeURIComponent(v[1]); return o; }, {}); |
120 var info = event.data |
|
121 .split("&") |
|
122 .map(function (s) { |
|
123 return s.split("="); |
|
124 }) |
|
125 .reduce(function (o, v) { |
|
126 o[v[0]] = decodeURIComponent(v[1]); |
|
127 return o; |
|
128 }, {}); |
103 |
129 |
104 switch (info.event) { |
130 switch (info.event) { |
105 case "apiready": |
131 case "apiready": |
106 state.apiready = true; |
132 state.apiready = true; |
107 setup_media_methods(); |
133 setup_media_methods(); |
108 break; |
134 break; |
109 //case "canplay": |
135 //case "canplay": |
110 // break; |
136 // break; |
111 case "durationchange": |
137 case "durationchange": |
112 if (info.duration.slice(-2) == "sc") { |
138 if (info.duration.slice(-2) == "sc") { |
113 state.duration = 1000 * Number(info.duration.slice(0, -2)); |
139 state.duration = 1000 * Number(info.duration.slice(0, -2)); |
114 _media.setDuration(state.duration); |
140 _media.setDuration(state.duration); |
115 } |
141 } |
116 break; |
142 break; |
117 case "ended": |
143 case "ended": |
118 state.pause = true; |
144 state.pause = true; |
119 break; |
145 break; |
120 case "loadedmetadata": |
146 case "loadedmetadata": |
121 _media.trigger("loadedmetadata"); |
147 _media.trigger("loadedmetadata"); |
122 break; |
148 break; |
123 case "pause": |
149 case "pause": |
124 state.pause = true; |
150 state.pause = true; |
125 _media.trigger("pause"); |
151 _media.trigger("pause"); |
126 break; |
152 break; |
127 case "play": |
153 case "play": |
128 state.pause = false; |
154 state.pause = false; |
129 _media.trigger("play"); |
155 _media.trigger("play"); |
130 break; |
156 break; |
131 //case "playing": |
157 //case "playing": |
132 // break; |
158 // break; |
133 //case "progress": |
159 //case "progress": |
134 // Loading progress |
160 // Loading progress |
135 // break; |
161 // break; |
136 case "seeked": |
162 case "seeked": |
137 state.time = new IriSP.Model.Time(1000 * Number(info.time)); |
163 state.time = new ns.Model.Time(1000 * Number(info.time)); |
138 _media.trigger("seeked"); |
164 _media.trigger("seeked"); |
139 break; |
165 break; |
140 case "timeupdate": |
166 case "timeupdate": |
141 state.time = new IriSP.Model.Time(1000 * Number(info.time)); |
167 state.time = new ns.Model.Time(1000 * Number(info.time)); |
142 _media.trigger("timeupdate", state.time); |
168 _media.trigger("timeupdate", state.time); |
143 break; |
169 break; |
144 case "volumechange": |
170 case "volumechange": |
145 state.muted = (info.muted == "true"); |
171 state.muted = info.muted == "true"; |
146 state.volume = Number(info.volume) / 100; |
172 state.volume = Number(info.volume) / 100; |
147 break; |
173 break; |
148 } |
174 } |
149 }, false); |
175 }, |
|
176 false |
|
177 ); |
|
178 }; |
|
179 }; |
150 }; |
180 }; |
|
181 |
|
182 export { DailymotionPlayer }; |