Mercurial > hg > dml-open-vis
comparison src/DML/MainVisBundle/Resources/assets/marionette/modules/PlayerModule.js @ 0:493bcb69166c
added public content
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 20:54:02 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:493bcb69166c |
---|---|
1 "use strict"; | |
2 App.module("PlayerModule", function(PlayerModule, App, Backbone, Marionette, $, _, Logger) { | |
3 // Prevent auto start | |
4 PlayerModule.startWithParent = false; | |
5 | |
6 // Define options | |
7 var defaultModuleOptions = { | |
8 }; | |
9 var moduleOptions; | |
10 | |
11 // Define private variables | |
12 var logger = null; | |
13 | |
14 /** | |
15 * Initialization checker | |
16 */ | |
17 var assertModuleIsInitialized = function() { | |
18 if (!$notifications) { | |
19 throw "PlayerModule has not been initialized"; | |
20 } | |
21 }; | |
22 | |
23 /** | |
24 * Module initializer | |
25 * | |
26 */ | |
27 PlayerModule.addInitializer(function(options){ | |
28 moduleOptions = _.extend(defaultModuleOptions, options); | |
29 | |
30 logger = Logger.get("PlayerModule"); | |
31 //logger.setLevel(Logger.DEBUG); | |
32 | |
33 logger.debug("Begin init"); | |
34 | |
35 PlayerModule.$player = $(Marionette.TemplateCache.get("#player")()); | |
36 PlayerModule.$playerTimeAfter = PlayerModule.$player.find(".player__time_type_after"); | |
37 PlayerModule.$player.hide().appendTo("body"); | |
38 | |
39 PlayerModule.$jPlayer = $("<div/>").hide().appendTo("body"); | |
40 | |
41 var volume = App.DataModule.Storage.getStrCache(PlayerModule, "volume"); | |
42 if (volume !== undefined) { | |
43 volume = parseFloat(volume); | |
44 } | |
45 if (!_.isNumber(volume) || _.isNaN(volume) || volume < 0 && volume > 1) { | |
46 volume = undefined; | |
47 } | |
48 var muted = App.DataModule.Storage.getStrCache(PlayerModule, "muted") ? true : false; | |
49 | |
50 // The player itself (jPlayer) | |
51 PlayerModule.$jPlayer.jPlayer({ | |
52 swfPath: "./$/jquery.jplayer.swf", | |
53 supplied: "mp3", | |
54 wmode: "window", | |
55 cssSelectorAncestor: '.player__body', | |
56 useStateClassSkin: true, | |
57 autoBlur: false, | |
58 smoothPlayBar: false, | |
59 keyEnabled: false, | |
60 remainingDuration: true, | |
61 toggleDuration: false, | |
62 volume: volume, | |
63 solution: "html,flash", | |
64 muted: muted, | |
65 cssSelector: { | |
66 play: ".player__command_action_play", | |
67 pause: ".player__command_action_pause", | |
68 mute: ".player__command_action_volume-mute", | |
69 unmute: ".player__command_action_volume-down", | |
70 volumeMax: ".player__command_action_volume-up", | |
71 volumeBar: ".player__slider_type_volume", | |
72 volumeBarValue: ".player__slider-head_type_volume", | |
73 seekBar: ".player__slider_type_time", | |
74 playBar: ".player__slider-head_type_time", | |
75 currentTime: ".player__time_type_before", | |
76 duration: ".player__time_type_after", | |
77 } | |
78 }); | |
79 | |
80 PlayerModule.$jPlayer.on($.jPlayer.event.volumechange, function(event) { | |
81 var volume = PlayerModule.$jPlayer.jPlayer('option', 'volume'); | |
82 var muted = PlayerModule.$jPlayer.jPlayer('option', 'muted'); | |
83 | |
84 App.DataModule.Storage.setStrCache(PlayerModule, "volume", volume + ""); | |
85 App.DataModule.Storage.setStrCache(PlayerModule, "muted", muted ? "1" : ""); | |
86 | |
87 }); | |
88 | |
89 // A view that sits on top of the player | |
90 PlayerModule.PlayerView = Backbone.View.extend({ | |
91 | |
92 el: PlayerModule.$player, | |
93 | |
94 initialize: function() { | |
95 var _this = this; | |
96 //var $elHTML = $("#player"); | |
97 _this.$body = _this.$el.find('.player__body'); | |
98 App.TooltipModule.convertTitlesToTooltips(_this.$el); | |
99 | |
100 // This is needed to initialize the jplayer instance | |
101 //$elHTML.hide().appendTo("body"); | |
102 | |
103 //_this.$el.html($elHTML); | |
104 //$elHTML.show(); | |
105 _this.$el.show(); | |
106 | |
107 _this.$commandDownload = _this.$('.player__command_action_download'); | |
108 _this.$commandDownload.click(function(event) { | |
109 PlayerModule.$jPlayer.jPlayer("pause"); | |
110 }); | |
111 _this.$label1 = _this.$('.player__label_row_1'); | |
112 _this.$label2 = _this.$('.player__label_row_2'); | |
113 | |
114 _this.$cover = _this.$('.player__cover'); | |
115 _this.$messageError = _this.$('.player__message_type_error'); | |
116 _this.$messageLoading = _this.$('.player__message_type_loading'); | |
117 _this.$messageNoRecording = _this.$('.player__message_type_no-recording'); | |
118 _this.$messageNoAudio = _this.$('.player__message_type_no-audio'); | |
119 | |
120 _this._startPlayingAfterRecordingIsLoaded = false; | |
121 | |
122 _this._config = new App.ContextModule.Config(); | |
123 _this._dynamicDefinitionForRecording = App.dynamicDefinitionProviderForRecordings.get(_this._config); | |
124 | |
125 _this.listenTo(_this._dynamicDefinitionForRecording, "change", _this.render); | |
126 _this.listenTo(_this._config, "change", _this.render); | |
127 | |
128 | |
129 | |
130 this._cachedLabel = "initial"; | |
131 _this.render(); | |
132 }, | |
133 | |
134 render: function() { | |
135 var _this = this; | |
136 var recordingAttributes = _this._dynamicDefinitionForRecording.attributes; | |
137 var label = recordingAttributes.label; | |
138 var audio = recordingAttributes.audio ? recordingAttributes.audio[0] : undefined; | |
139 | |
140 // Update layout | |
141 if (!_.isEqual(_this._cachedRecordingAttributes, recordingAttributes)) { | |
142 if (!_this._dynamicDefinitionForRecording.attributes.label || !audio) { | |
143 _this.$body.hide(); | |
144 _this.$cover.show(); | |
145 _this.$cover.children().hide(); | |
146 switch (label) { | |
147 case false: | |
148 _this.$messageError.show(); | |
149 break; | |
150 case null: | |
151 _this.$messageLoading.show(); | |
152 break; | |
153 default: | |
154 if (label === undefined) { | |
155 _this.$messageNoRecording.show(); | |
156 } else { | |
157 _this.$messageNoAudio.show(); | |
158 } | |
159 } | |
160 PlayerModule.$jPlayer.jPlayer("stop"); | |
161 } else { | |
162 | |
163 PlayerModule.$jPlayer.jPlayer("setMedia", { | |
164 mp3: audio, | |
165 }); | |
166 | |
167 _this.$cover.hide(); | |
168 _this.$body.show(); | |
169 _this.$label1.text(recordingAttributes.label); | |
170 _this.$label2.text(recordingAttributes.composer); | |
171 _this.$commandDownload.attr("href", audio); | |
172 | |
173 if (_this._startPlayingAfterRecordingIsLoaded) { | |
174 PlayerModule.$jPlayer.jPlayer("play"); | |
175 _this._startPlayingAfterRecordingIsLoaded = false; | |
176 } | |
177 | |
178 } | |
179 } | |
180 | |
181 if (label) { | |
182 | |
183 } | |
184 _this._cachedRecordingAttributes = recordingAttributes; | |
185 }, | |
186 | |
187 play: function(recordingURI, time) { | |
188 var _this = this; | |
189 if (_this._config.getParameterValue("recordingURI") != recordingURI) { | |
190 _this._startPlayingAfterRecordingIsLoaded = true; | |
191 _this._config.updateParameter("recordingURI", recordingURI); | |
192 } else { | |
193 PlayerModule.$jPlayer.jPlayer("play", time ? time : 0); | |
194 } | |
195 }, | |
196 | |
197 stop: function(recordingURI) { | |
198 var _this = this; | |
199 PlayerModule.$jPlayer.jPlayer("pause"); | |
200 } | |
201 }); | |
202 | |
203 | |
204 PlayerModule.playerView = new PlayerModule.PlayerView(); | |
205 }); | |
206 | |
207 PlayerModule.play = function(recordingURI, time) { | |
208 // try { | |
209 PlayerModule.playerView.play(recordingURI, time); | |
210 // } catch (e) { | |
211 // console.log(e); | |
212 // } | |
213 App.NotificationsModule.show({ | |
214 id: "player", | |
215 content: PlayerModule.playerView.$el, | |
216 onClose: function() {PlayerModule.playerView.stop();}, | |
217 modifiers: ["ttl_ever", "no-padding"], | |
218 keepContentInMemoryAfterRemoval: true | |
219 }); | |
220 }; | |
221 | |
222 }, Logger); |