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