1 IriSP.Widgets.Mediafragment = function(player, config) { |
1 import _ from "lodash"; |
2 IriSP.Widgets.Widget.call(this, player, config); |
|
3 this.last_hash_key = ""; |
|
4 this.last_hash_value = ""; |
|
5 this.last_extra_key = ""; |
|
6 this.last_extra_value = ""; |
|
7 |
2 |
8 window.onhashchange = this.functionWrapper("goToHash"); |
3 const Mediafragment = function (ns) { |
9 if (typeof window.addEventListener !== "undefined") { |
4 return class extends ns.Widgets.Widget { |
|
5 constructor(player, config) { |
|
6 super(player, config); |
|
7 this.last_hash_key = ""; |
|
8 this.last_hash_value = ""; |
|
9 this.last_extra_key = ""; |
|
10 this.last_extra_value = ""; |
|
11 |
|
12 window.onhashchange = this.functionWrapper("goToHash"); |
|
13 if (typeof window.addEventListener !== "undefined") { |
10 var _this = this; |
14 var _this = this; |
11 window.addEventListener('message', function(_msg) { |
15 window.addEventListener("message", function (_msg) { |
12 if (/^#/.test(_msg.data)) { |
16 if (/^#/.test(_msg.data)) { |
13 _this.setWindowHash(_msg.data); |
17 _this.setWindowHash(_msg.data); |
|
18 } |
|
19 }); |
|
20 } |
|
21 this.onMdpEvent( |
|
22 "Mediafragment.setHashToAnnotation", |
|
23 "setHashToAnnotation" |
|
24 ); |
|
25 this.blocked = false; |
|
26 } |
|
27 |
|
28 draw() { |
|
29 this.onMediaEvent("setpause", "setHashToTime"); |
|
30 var _this = this; |
|
31 this.getWidgetAnnotations().forEach(function (_annotation) { |
|
32 _annotation.on("click", function () { |
|
33 _this.setHashToAnnotation(_annotation); |
|
34 }); |
|
35 }); |
|
36 if (this.media.loadedMetadata) { |
|
37 this.goToHash(); |
|
38 } else { |
|
39 this.onMediaEvent("loadedmetadata", "goToHash"); |
|
40 } |
|
41 } |
|
42 |
|
43 setWindowHash(_hash) { |
|
44 if ( |
|
45 typeof window.history !== "undefined" && |
|
46 typeof window.history.replaceState !== "undefined" |
|
47 ) { |
|
48 window.history.replaceState({}, "", _hash); |
|
49 } else { |
|
50 document.location.hash = _hash; |
|
51 } |
|
52 } |
|
53 |
|
54 getLastHash() { |
|
55 var _tab = document.location.hash.replace(/^#/, "").split("&"); |
|
56 _tab = _(_tab).filter(function (_el) { |
|
57 return _el && !/^(id|t)=/.test(_el); |
|
58 }); |
|
59 if (this.last_hash_key) { |
|
60 _tab.push(this.last_hash_key + "=" + this.last_hash_value); |
|
61 } |
|
62 if (this.last_extra_key) { |
|
63 _tab.push(this.last_extra_key + "=" + this.last_extra_value); |
|
64 } |
|
65 return "#" + _tab.join("&"); |
|
66 } |
|
67 |
|
68 goToHash() { |
|
69 if (document.location.hash !== this.getLastHash()) { |
|
70 var _tab = document.location.hash.replace(/^#/, "").split("&"); |
|
71 for (var _i = 0; _i < _tab.length; _i++) { |
|
72 var _subtab = _tab[_i].split("="); |
|
73 if (_subtab[0] == "id" || _subtab[0] == "t") { |
|
74 this.last_hash_key = _subtab[0]; |
|
75 this.last_hash_value = _subtab[1]; |
|
76 if (this.last_hash_key == "id") { |
|
77 var _annotation = this.source.getElement(this.last_hash_value); |
|
78 if (typeof _annotation !== "undefined") { |
|
79 this.media.setCurrentTime(_annotation.begin); |
|
80 } else { |
|
81 /* Proceed parsing elements, maybe a t was specified */ |
|
82 continue; |
|
83 } |
14 } |
84 } |
15 }); |
85 if (this.last_hash_key == "t") { |
16 }; |
86 this.media.setCurrentTime(1000 * this.last_hash_value); |
17 this.onMdpEvent("Mediafragment.setHashToAnnotation","setHashToAnnotation"); |
87 } |
18 this.blocked = false; |
88 break; |
19 }; |
89 } |
|
90 } |
|
91 } |
|
92 } |
20 |
93 |
21 IriSP.Widgets.Mediafragment.prototype = new IriSP.Widgets.Widget(); |
94 setHashToAnnotation(_annotation) { |
|
95 this.setHash("id", _annotation.id, "t", _annotation.begin / 1000.0); |
|
96 } |
22 |
97 |
23 IriSP.Widgets.Mediafragment.prototype.draw = function() { |
98 setHashToTime() { |
24 this.onMediaEvent("setpause","setHashToTime"); |
99 this.setHash("t", this.media.getCurrentTime().getSeconds()); |
25 var _this = this; |
|
26 this.getWidgetAnnotations().forEach(function(_annotation) { |
|
27 _annotation.on("click", function() { |
|
28 _this.setHashToAnnotation(_annotation); |
|
29 }); |
|
30 }); |
|
31 if (this.media.loadedMetadata) { |
|
32 this.goToHash(); |
|
33 } else { |
|
34 this.onMediaEvent("loadedmetadata","goToHash"); |
|
35 } |
100 } |
36 }; |
|
37 |
101 |
38 IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) { |
102 setHash(_key, _value, _key2, _value2) { |
39 if (typeof window.history !== "undefined" && typeof window.history.replaceState !== "undefined") { |
103 if ( |
40 window.history.replaceState({}, "", _hash); |
104 !this.blocked && |
41 } else { |
105 (this.last_hash_key !== _key || this.last_hash_value !== _value) |
42 document.location.hash = _hash; |
106 ) { |
43 } |
|
44 }; |
|
45 |
|
46 IriSP.Widgets.Mediafragment.prototype.getLastHash = function() { |
|
47 var _tab = document.location.hash.replace(/^#/,'').split('&'); |
|
48 _tab = IriSP._(_tab).filter(function(_el) { |
|
49 return _el && !/^(id|t)=/.test(_el); |
|
50 }); |
|
51 if (this.last_hash_key) { |
|
52 _tab.push(this.last_hash_key + '=' + this.last_hash_value); |
|
53 } |
|
54 if (this.last_extra_key) { |
|
55 _tab.push(this.last_extra_key + '=' + this.last_extra_value); |
|
56 } |
|
57 return '#' + _tab.join('&'); |
|
58 }; |
|
59 |
|
60 IriSP.Widgets.Mediafragment.prototype.goToHash = function() { |
|
61 if (document.location.hash !== this.getLastHash()) { |
|
62 var _tab = document.location.hash.replace(/^#/,'').split('&'); |
|
63 for (var _i = 0; _i < _tab.length; _i++) { |
|
64 var _subtab = _tab[_i].split("="); |
|
65 if (_subtab[0] == "id" || _subtab[0] == "t") { |
|
66 this.last_hash_key = _subtab[0]; |
|
67 this.last_hash_value = _subtab[1]; |
|
68 if (this.last_hash_key == "id") { |
|
69 var _annotation = this.source.getElement(this.last_hash_value); |
|
70 if (typeof _annotation !== "undefined") { |
|
71 this.media.setCurrentTime(_annotation.begin); |
|
72 } else { |
|
73 /* Proceed parsing elements, maybe a t was specified */ |
|
74 continue; |
|
75 } |
|
76 } |
|
77 if (this.last_hash_key == "t") { |
|
78 this.media.setCurrentTime(1000 * this.last_hash_value); |
|
79 } |
|
80 break; |
|
81 } |
|
82 } |
|
83 } |
|
84 }; |
|
85 |
|
86 IriSP.Widgets.Mediafragment.prototype.setHashToAnnotation = function(_annotation) { |
|
87 this.setHash( 'id', _annotation.id, 't', _annotation.begin / 1000.0 ); |
|
88 }; |
|
89 |
|
90 IriSP.Widgets.Mediafragment.prototype.setHashToTime = function() { |
|
91 this.setHash( 't', this.media.getCurrentTime().getSeconds() ); |
|
92 }; |
|
93 |
|
94 IriSP.Widgets.Mediafragment.prototype.setHash = function(_key, _value, _key2, _value2) { |
|
95 if (!this.blocked && (this.last_hash_key !== _key || this.last_hash_value !== _value)) { |
|
96 this.last_hash_key = _key; |
107 this.last_hash_key = _key; |
97 this.last_hash_value = _value; |
108 this.last_hash_value = _value; |
98 this.last_extra_key = _key2; |
109 this.last_extra_key = _key2; |
99 this.last_extra_value = _value2; |
110 this.last_extra_value = _value2; |
100 |
111 |
101 var _hash = this.getLastHash(); |
112 var _hash = this.getLastHash(); |
102 this.setWindowHash(_hash); |
113 this.setWindowHash(_hash); |
103 if (window.parent !== window) { |
114 if (window.parent !== window) { |
104 window.parent.postMessage(_hash,"*"); |
115 window.parent.postMessage(_hash, "*"); |
105 } |
116 } |
106 this.block(); |
117 this.block(); |
|
118 } |
107 } |
119 } |
|
120 |
|
121 unblock() { |
|
122 if (typeof this.blockTimeout !== "undefined") { |
|
123 window.clearTimeout(this.blockTimeout); |
|
124 } |
|
125 this.blockTimeout = undefined; |
|
126 this.blocked = false; |
|
127 } |
|
128 |
|
129 block() { |
|
130 if (typeof this.blockTimeout !== "undefined") { |
|
131 window.clearTimeout(this.blockTimeout); |
|
132 } |
|
133 this.blocked = true; |
|
134 this.blockTimeout = window.setTimeout( |
|
135 this.functionWrapper("unblock"), |
|
136 1500 |
|
137 ); |
|
138 } |
|
139 }; |
108 }; |
140 }; |
109 |
141 |
110 IriSP.Widgets.Mediafragment.prototype.unblock = function() { |
142 export { Mediafragment }; |
111 if (typeof this.blockTimeout !== "undefined") { |
|
112 window.clearTimeout(this.blockTimeout); |
|
113 } |
|
114 this.blockTimeout = undefined; |
|
115 this.blocked = false; |
|
116 }; |
|
117 |
|
118 IriSP.Widgets.Mediafragment.prototype.block = function() { |
|
119 if (typeof this.blockTimeout !== "undefined") { |
|
120 window.clearTimeout(this.blockTimeout); |
|
121 } |
|
122 this.blocked = true; |
|
123 this.blockTimeout = window.setTimeout(this.functionWrapper("unblock"), 1500); |
|
124 }; |
|