2 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/src/components/player.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
2 |
185 |
--------------------------------------------------------------------------------
/src/components/players/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "env": {
4 |
5 | // Add browser environment globals
6 | "browser": true,
7 |
8 | // Add node.js environment globals
9 | "node": true
10 |
11 | },
12 | "globals": {
13 |
14 | // Add angular to environment globals but do not authorize to overwrite it
15 | "angular": false,
16 | "YT": false,
17 | "videojs": false
18 |
19 | },
20 | "rules": {
21 |
22 | // Require camelcase
23 | "camelcase": 0
24 |
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/players/HTMLPlayer.factory.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | window.assert = chai.assert;
4 |
5 | describe('HTMLPlayer', function() {
6 | var player;
7 | var videoElement;
8 | var $document;
9 | var $injector;
10 |
11 | // Load module player
12 | beforeEach(module('ov.player'));
13 |
14 | // Dependencies injections
15 | beforeEach(inject(function(_$injector_, _$document_) {
16 | $injector = _$injector_;
17 | $document = _$document_;
18 | }));
19 |
20 | // Initializes tests
21 | beforeEach(function() {
22 | var playerId = 'player_42';
23 | videoElement = $document[0].createElement('video');
24 | videoElement.setAttribute('id', playerId);
25 | videoElement.load = function() {
26 | };
27 | videoElement.play = function() {
28 | };
29 | $document[0].body.appendChild(videoElement);
30 |
31 | var OvHTMLPlayer = $injector.get('OplHtmlPlayer');
32 | player = new OvHTMLPlayer(angular.element(videoElement), {
33 | type: 'html',
34 | mediaId: ['1'],
35 | timecodes: {},
36 | sources: [{
37 | files: [{
38 | width: 640,
39 | height: 360,
40 | link: 'http://video.mp4'
41 | }, {
42 | width: 1280,
43 | height: 720,
44 | link: 'http://video.mp4'
45 | }]
46 | }],
47 | thumbnail: '/1439286245225/thumbnail.jpg'
48 | }, playerId);
49 | player.initialize();
50 | });
51 |
52 | // Destroy player after each test
53 | afterEach(function() {
54 | player.destroy();
55 | videoElement = null;
56 | });
57 |
58 | it('should be able to get media thumbnail', function() {
59 | assert.equal(player.getMediaThumbnail(), '/1439286245225/thumbnail.jpg');
60 | });
61 |
62 | it('should be able to play the media if paused', function(done) {
63 | player.player.paused = function() {
64 | return true;
65 | };
66 |
67 | player.player.play = function() {
68 | done();
69 | };
70 |
71 | player.playPause();
72 | });
73 |
74 | it('should be able to play the media if ended', function(done) {
75 | player.player.paused = function() {
76 | return false;
77 | };
78 | player.player.ended = function() {
79 | return true;
80 | };
81 |
82 | player.player.play = function() {
83 | done();
84 | };
85 |
86 | player.playPause();
87 | });
88 |
89 | it('should be able to pause the media if playing', function(done) {
90 | player.player.paused = function() {
91 | return false;
92 | };
93 |
94 | player.player.pause = function() {
95 | done();
96 | };
97 |
98 | player.playPause();
99 | });
100 |
101 | it('should be able to set player\'s volume in percent', function() {
102 | player.player.volume = function(volume) {
103 | if (volume) this.var = volume;
104 | else return this.var;
105 | };
106 | player.player.volume(0);
107 | player.setVolume(90);
108 | assert.equal(player.player.volume(), 0.9);
109 | });
110 |
111 | it('should be able to set player\'s current time in milliseconds', function() {
112 | player.player.currentTime = function(currentTime) {
113 | if (currentTime) this.var = currentTime;
114 | else return this.var;
115 | };
116 | player.player.currentTime(0);
117 | player.setTime(1000);
118 | assert.equal(player.player.currentTime(), 1);
119 | });
120 |
121 | it('should order the list of media definitions', function() {
122 | var definitions = player.getAvailableDefinitions();
123 | assert.isDefined(definitions);
124 | assert.equal(definitions[0].id, '720', 'Wrong quality id for quality 0');
125 | assert.equal(definitions[0].label, '720p', 'Wrong quality label for quality 0');
126 | assert.ok(definitions[0].hd, 'Expected HD quality for quality 0');
127 | assert.equal(definitions[1].id, '360', 'Wrong quality id for quality 1');
128 | assert.equal(definitions[1].label, '360p', 'Wrong quality label for quality 1');
129 | assert.notOk(definitions[1].hd, 'Unexpected HD quality for quality 1');
130 | });
131 |
132 | it('should order the list of media sources if adaptive sources are defined', function() {
133 | player.media.sources[player.getSourceIndex()].adaptive = [
134 | {
135 | link: 'http://manifest.mpd',
136 | mimeType: 'application/dash+xml'
137 | },
138 | {
139 | link: 'http://playlist.m3u8',
140 | mimeType: 'application/x-mpegURL'
141 | }
142 | ];
143 | var definitions = player.getAvailableDefinitions();
144 | assert.isNull(definitions);
145 | });
146 |
147 | });
148 |
--------------------------------------------------------------------------------
/src/components/players/Player.factory.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | (function(app) {
8 |
9 | /**
10 | * Defines a factory describing a player.
11 | *
12 | * All players must implement the methods of this object.
13 | * All events are dispatched to the given jPlayerElement.
14 | * The following events are emitted by the player:
15 | * - **oplPlay**: Player starts playing
16 | * - **oplPause**: Player pauses
17 | * - **oplLoadProgress**: Player is buffering
18 | * - **oplPlayProgress**: Player is playing
19 | * - **oplReady**: Player is ready to play the media
20 | * - **oplDurationChange**: Media duration has changed
21 | * - **oplEnd**: Media has reached the end
22 | * - **oplWaiting**: Media is waiting for buffering
23 | * - **oplPlaying**: Media is ready to play after buffering
24 | * - **oplError**: Player as encountered an error
25 | *
26 | * e.g.
27 | *
28 | * // Get an instance of the OplVimeoPlayer
29 | * // (which extends OplPlayer)
30 | * var OplVimeoPlayer = $injector.get('OplVimeoPlayer');
31 | * var player = new OplVimeoPlayer(element, 'player_id', '118786909');
32 | *
33 | * @class OplPlayer
34 | */
35 | function OplPlayer() {
36 |
37 | /**
38 | * Defines a Player interface which every Player must implement.
39 | */
40 | function Player() {}
41 |
42 | /**
43 | * Checks if data object is valid.
44 | *
45 | * @method init
46 | * @param {Object} jPlayerElement The JQLite HTML element corresponding to the HTML element which will receive
47 | * events dispatched by the player
48 | * @param {String} id The player id to use as the "id" attribute
49 | */
50 | Player.prototype.init = function(jPlayerElement, id) {
51 | if (!jPlayerElement)
52 | throw new Error('A player JQLite Element is expected as Player argument');
53 |
54 | this.jPlayerElement = jPlayerElement;
55 | this.selectedSourceIndex = 0;
56 | this.playerId = id;
57 | };
58 |
59 | /**
60 | * Sets the source.
61 | *
62 | * @method setMediaSource
63 | * @param {Number} index of the source in the list of media sources
64 | */
65 | Player.prototype.setMediaSource = function(index) {
66 | this.selectedSourceIndex = index;
67 | };
68 |
69 | /**
70 | * Gets index of the selected media source.
71 | *
72 | * @method getSourceIndex
73 | * @return {Number} index of the selected media source in the list of sources
74 | */
75 | Player.prototype.getSourceIndex = function() {
76 | return this.selectedSourceIndex;
77 | };
78 |
79 | /**
80 | * Gets media ids.
81 | *
82 | * @method getMediaIds
83 | * @return {Array} The list of media ids
84 | */
85 | Player.prototype.getMediaIds = function() {
86 | return this.media.mediaId;
87 | };
88 |
89 | /**
90 | * Gets player id.
91 | *
92 | * @method getId
93 | * @return {String} The player id
94 | */
95 | Player.prototype.getId = function() {
96 | return this.playerId;
97 | };
98 |
99 | /**
100 | * Sets current media.
101 | *
102 | * @method setMedia
103 | * @param {Objet} media New media
104 | */
105 | Player.prototype.setMedia = function(media) {
106 | if (!media)
107 | throw new Error('Player needs a valid media');
108 |
109 | this.media = media;
110 | };
111 |
112 | /**
113 | * Gets the url of the selected source.
114 | *
115 | * @method getSourceUrl
116 | * @return {String|Null} The url of the source
117 | */
118 | Player.prototype.getSourceUrl = function() {
119 | return null;
120 | };
121 |
122 | /**
123 | * Gets media MIME Type.
124 | *
125 | * @method getMediaUrl
126 | * @param {Object} definition Media definition object
127 | * @return {String} The media url
128 | */
129 | Player.prototype.getMediaMIME = function(definition) {
130 | return definition && definition.mimeType ? definition.mimeType : 'video/mp4';
131 | };
132 |
133 | /**
134 | * Gets media definitions.
135 | *
136 | * @method getAvailableDefinitions
137 | * @return {Array} The list of definitions
138 | */
139 | Player.prototype.getAvailableDefinitions = function() {
140 | throw new Error('getAvailableDefinitions method not implemented for this player');
141 | };
142 |
143 | /**
144 | * Gets media thumbnail.
145 | *
146 | * @method getMediaThumbnail
147 | * @return {String} The media thumbnail
148 | */
149 | Player.prototype.getMediaThumbnail = function() {
150 | throw new Error('getMediaThumbnail method not implemented for this player');
151 | };
152 |
153 | /**
154 | * Inititializes the player after DOM is loaded.
155 | *
156 | * @method initialize
157 | */
158 | Player.prototype.initialize = function() {
159 | throw new Error('initialize method not implemented for this player');
160 | };
161 |
162 | /**
163 | * Loads current media.
164 | *
165 | * @method load
166 | */
167 | Player.prototype.load = function() {
168 | throw new Error('load method not implemented for this player');
169 | };
170 |
171 | /**
172 | * Tests if player actual state is pause.
173 | *
174 | * @method isPaused
175 | * @param {Boolean} true if paused, false otherwise
176 | */
177 | Player.prototype.isPaused = function() {
178 | throw new Error('isPaused method not implemented for this player');
179 | };
180 |
181 | /**
182 | * Tests if player actual state is playing.
183 | *
184 | * @method isPlaying
185 | * @return {Boolean} true if playing, false otherwise
186 | */
187 | Player.prototype.isPlaying = function() {
188 | throw new Error('isPlaying method not implemented for this player');
189 | };
190 |
191 | /**
192 | * Plays or pauses the media depending on media actual state.
193 | *
194 | * @method playPause
195 | */
196 | Player.prototype.playPause = function() {
197 | throw new Error('play method not implemented for this player');
198 | };
199 |
200 | /**
201 | * Sets volume.
202 | *
203 | * @method setVolume
204 | * @param {Number} volume The new volume from 0 to 100.
205 | */
206 | Player.prototype.setVolume = function() {
207 | throw new Error('setVolume method not implemented for this player');
208 | };
209 |
210 | /**
211 | * Sets time.
212 | *
213 | * @method setTime
214 | * @param {Number} time The time to seek to in milliseconds
215 | */
216 | Player.prototype.setTime = function() {
217 | throw new Error('setTime method not implemented for this player');
218 | };
219 |
220 | /**
221 | * Gets player type.
222 | *
223 | * @method getPlayerTYpe
224 | * @return {String} A string representation of the player type
225 | */
226 | Player.prototype.getPlayerType = function() {
227 | throw new Error('getPlayerType method not implemented for this player');
228 | };
229 |
230 | /**
231 | * Destroys the player.
232 | *
233 | * @method destroy
234 | */
235 | Player.prototype.destroy = function() {
236 | throw new Error('destroy method not implemented for this player');
237 | };
238 |
239 | /**
240 | * Gets current definition id.
241 | *
242 | * @method getDefinition
243 | * @return {String} The current definition id
244 | */
245 | Player.prototype.getDefinition = function() {
246 | throw new Error('getDefinition method not implemented for this player');
247 | };
248 |
249 | /**
250 | * Changes definition of the current source.
251 | *
252 | * @method setDefinition
253 | * @param {Object} definition Definition from the list of available definitions
254 | */
255 | Player.prototype.setDefinition = function(definition) {
256 | throw new Error('setDefinition method not implemented for this player');
257 | };
258 |
259 | /**
260 | * Indicates if the player supports an overlay play / pause button.
261 | *
262 | * @method isOverlayPlayPauseSupported
263 | * @return {Boolean} true if overlay play / pause button is supported, false otherwise
264 | */
265 | Player.prototype.isOverlayPlayPauseSupported = function() {
266 | throw new Error('isOverlayPlayPauseSupported method not implemented for this player');
267 | };
268 |
269 | return Player;
270 | }
271 |
272 | app.factory('OplPlayer', OplPlayer);
273 |
274 | })(angular.module('ov.player'));
275 |
--------------------------------------------------------------------------------
/src/components/players/VimeoPlayer.factory.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | window.assert = chai.assert;
4 |
5 | describe('VimeoPlayer', function() {
6 | var player;
7 | var playerElement;
8 | var videoElement;
9 | var $document;
10 | var $injector;
11 | var jWindowElement;
12 | var $window;
13 | var mediaId;
14 | var playerId;
15 |
16 | // Load module player
17 | beforeEach(module('ov.player'));
18 |
19 | // Dependencies injections
20 | beforeEach(inject(function(_$injector_, _$document_, _$window_) {
21 | $window = _$window_;
22 | $injector = _$injector_;
23 | $document = _$document_;
24 | }));
25 |
26 | // Initializes tests
27 | beforeEach(function() {
28 | mediaId = '42';
29 | playerId = 'player_id_42';
30 | jWindowElement = angular.element($window);
31 | playerElement = $document[0].createElement('div');
32 | videoElement = $document[0].createElement('div');
33 | videoElement.setAttribute('id', playerId);
34 | $document[0].body.appendChild(videoElement);
35 |
36 | videoElement.contentWindow = {
37 | postMessage: function() {
38 | }
39 | };
40 |
41 | var OvVimeoPlayer = $injector.get('OplVimeoPlayer');
42 | player = new OvVimeoPlayer(angular.element(playerElement), {
43 | type: 'vimeo',
44 | mediaId: [mediaId],
45 | timecodes: {}
46 | }, playerId);
47 | player.initialize();
48 | });
49 |
50 | // Destroy player after each test
51 | afterEach(function() {
52 | $document[0].body.removeChild(videoElement);
53 | videoElement = null;
54 | player.destroy();
55 | });
56 |
57 | it('should be able to build Vimeo player url', function() {
58 | assert.equal(
59 | player.getSourceUrl().valueOf(),
60 | '//player.vimeo.com/video/' + mediaId + '?api=1&player_id=' + playerId
61 | );
62 | });
63 |
64 | it('should register to Vimeo player events', function(done) {
65 | var events = [];
66 | var message = {};
67 |
68 | // Simulate Vimeo player
69 | videoElement.contentWindow.postMessage = function() {
70 | events.push({});
71 | if (events.length === 6)
72 | done();
73 | };
74 |
75 | message['event'] = 'ready';
76 | message['player_id'] = playerId;
77 |
78 | jWindowElement.triggerHandler('message', message);
79 | });
80 |
81 | it('should be able to play the media', function(done) {
82 | var message = {};
83 | player.playing = 0;
84 |
85 | angular.element(playerElement).on('oplPlay', function() {
86 | done();
87 | });
88 |
89 | // Simulate Vimeo player
90 | videoElement.contentWindow.postMessage = function(data) {
91 | var message = {};
92 | data = JSON.parse(data);
93 |
94 | if (data.value === 'play') {
95 | message['event'] = 'play';
96 | message['player_id'] = playerId;
97 | jWindowElement.triggerHandler('message', message);
98 | }
99 | };
100 |
101 | message['event'] = 'ready';
102 | message['player_id'] = playerId;
103 | jWindowElement.triggerHandler('message', message);
104 | player.playPause();
105 | });
106 |
107 | it('should be able to pause the media', function(done) {
108 | var message = {};
109 | player.playing = 1;
110 |
111 | angular.element(playerElement).on('oplPause', function() {
112 | done();
113 | });
114 |
115 | // Simulate Vimeo player
116 | videoElement.contentWindow.postMessage = function(data) {
117 | var message = {};
118 | data = JSON.parse(data);
119 |
120 | if (data.value === 'pause') {
121 | message['event'] = 'pause';
122 | message['player_id'] = playerId;
123 | jWindowElement.triggerHandler('message', message);
124 | }
125 | };
126 |
127 | message['event'] = 'ready';
128 | message['player_id'] = playerId;
129 | jWindowElement.triggerHandler('message', message);
130 | player.playPause();
131 | });
132 |
133 | it('should be able to change media volume', function(done) {
134 | var message = {};
135 |
136 | // Simulate Vimeo player
137 | videoElement.contentWindow.postMessage = function(data) {
138 | data = JSON.parse(data);
139 |
140 | if (data.method === 'setVolume' && data.value !== 1) {
141 | assert.equal(data.value, 0.5);
142 | done();
143 | }
144 | };
145 |
146 | message['event'] = 'ready';
147 | message['player_id'] = playerId;
148 | jWindowElement.triggerHandler('message', message);
149 | player.setVolume(50);
150 | });
151 |
152 | it('should be able to seek to media specific time', function(done) {
153 | var message = {};
154 |
155 | // Simulate Vimeo player
156 | videoElement.contentWindow.postMessage = function(data) {
157 | data = JSON.parse(data);
158 | if (data.method === 'seekTo') {
159 | assert.equal(data.value, 50);
160 | done();
161 | }
162 | };
163 |
164 | message['event'] = 'ready';
165 | message['player_id'] = playerId;
166 | jWindowElement.triggerHandler('message', message);
167 | player.setTime(50000);
168 | });
169 |
170 | });
171 |
--------------------------------------------------------------------------------
/src/components/preview/preview.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-preview HTML element to create a time related image preview.
9 | *
10 | * opl-preview is composed of a time and an image related to this time.
11 | *
12 | * Attributes are:
13 | * - [Number] **opl-time** The time in milliseconds
14 | * - [Object|String] **opl-image** The image URL or the sprite image description object with:
15 | * - [String] **url** Sprite URL
16 | * - [Number] **x** x coordinate of the image in the sprite
17 | * - [Number] **y** y coordinate of the image in the sprite
18 | * Image size must be 142 pixels width and 80 pixels height
19 | *
20 | * @example
21 | * var time = 42000;
22 | * var image = {
23 | * url: 'http://local.url/sprite.jpg',
24 | * x: 142,
25 | * y: 0,
26 | * };
27 | *
28 | *
3 |
4 |
134 |
142 |
150 |
158 |
166 |
174 |
182 |
183 |
184 |
5 |
10 |
11 |
95 |
96 |
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
93 |
94 |
22 |
40 |
92 |
41 |
63 |
60 | {{$ctrl.time | oplMillisecondsToTime}} / {{$ctrl.duration | oplMillisecondsToTime}}
61 |
62 |
64 |
91 |
97 |
132 |
133 |
98 |
131 |
119 | {{$ctrl.time | oplMillisecondsToTime}}
120 |
121 |
130 |
2 |
6 |
7 |
13 |
--------------------------------------------------------------------------------
/src/components/preview/preview.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3/animation";
2 | @import "compass/css3/user-interface";
3 | @import "compass/css3/transform";
4 |
5 | $OPL_PREVIEW_PRIMARY_COLOR: #ffffff;
6 | $OPL_PREVIEW_BACKGROUND_COLOR: #000000;
7 | $OPL_PREVIEW_ACCENT_COLOR: #e2287b;
8 |
9 | /*
10 | Animate the loader with an elastic effect from left to right and right to left with easing.
11 | */
12 | @include keyframes(opl-preview-loader-elastic) {
13 | 0% {
14 | @include animation-timing-function(cubic-bezier(0.35, 0.35, 0.43, 0.9));
15 | @include translateX(0%);
16 | }
17 | 50% {
18 | @include animation-timing-function(cubic-bezier(0.35, 0.35, 0.43, 0.9));
19 | @include translateX(100%);
20 | }
21 | 100% {
22 | @include translateX(0%);
23 | }
24 | }
25 |
26 | opl-preview {
27 | width: 100%;
28 | height: 100%;
29 | }
30 |
31 | .opl-preview {
32 | position: relative;
33 | --opl-preview-primary-color: #{$OPL_PREVIEW_PRIMARY_COLOR};
34 | --opl-preview-accent-color: #{$OPL_PREVIEW_ACCENT_COLOR};
35 | --opl-preview-accent-color-0: #{rgba($OPL_PREVIEW_ACCENT_COLOR, 0.1)};
36 | --opl-preview-background-color: #{$OPL_PREVIEW_BACKGROUND_COLOR};
37 | --opl-preview-background-color-0: #{rgba($OPL_PREVIEW_BACKGROUND_COLOR, 0.8)};
38 | width: 100%;
39 | height: 100%;
40 | background-color: var(--opl-preview-background-color, $OPL_PREVIEW_BACKGROUND_COLOR);
41 | @include user-select(none);
42 |
43 | /*
44 | Time container.
45 | */
46 | .opl-time {
47 | position: absolute;
48 | display: flex;
49 | width: 100%;
50 | justify-content: center;
51 | bottom: 0;
52 | font-size: 12px;
53 | letter-spacing: 0.4px;
54 | color: var(--opl-preview-primary-color, $OPL_PREVIEW_PRIMARY_COLOR);
55 |
56 | /*
57 | Time text.
58 | */
59 | & > div {
60 | flex-shrink: 1;
61 | background-color: var(--opl-preview-background-color-0, rgba($OPL_PREVIEW_BACKGROUND_COLOR, 0.8));
62 | padding: 8px;
63 | }
64 | }
65 |
66 | /*
67 | Loader.
68 | */
69 | .opl-loader {
70 | position: absolute;
71 | top: 0;
72 | left: 0;
73 | width: 100%;
74 | height: 4px;
75 | background-color: var(--opl-preview-accent-color-0, rgba($OPL_PREVIEW_ACCENT_COLOR, 0.1));
76 | will-change: transform;
77 |
78 | /*
79 | Loader bar.
80 | */
81 | &::before {
82 | position: absolute;
83 | top: 0;
84 | left: 0;
85 | width: 50%;
86 | height: 100%;
87 | content: '';
88 | pointer-events: none;
89 | background-color: var(--opl-preview-accent-color, $OPL_PREVIEW_ACCENT_COLOR);
90 | @include animation-name(opl-preview-loader-elastic);
91 | @include animation-iteration-count(infinite);
92 | @include animation-duration(2000ms);
93 | }
94 |
95 | }
96 |
97 | /*
98 | Error message.
99 | */
100 | .opl-error-message {
101 | padding-top: 16px;
102 | text-align: center;
103 | letter-spacing: 5px;
104 | font-size: 12px;
105 | color: var(--opl-preview-primary-color, $OPL_PREVIEW_PRIMARY_COLOR);
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/components/shared/button/button.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-button HTML element to create a simple button.
9 | *
10 | * opl-button is composed of an icon, a focus ring and a ripple.
11 | *
12 | * Attributes are:
13 | * - [String] **opl-icon** The ligature name of the icon to use (from "OpenVeo-Player-Icons" font)
14 | * - [String] **opl-label** The ARIA label to apply to the button. Empty by default.
15 | * - [Boolean] **opl-no-sequential-focus** true to set button tabindex to -1, false to set button tabindex to 0
16 | * - [Function] **opl-on-update** The function to call when actioned
17 | * - [Function] **opl-on-focus** The function to call when component enters in focus state
18 | *
19 | * @example
20 | * var handleOnUpdate = function() {
21 | * console.log('Button actioned');
22 | * };
23 | * var handleOnFocus = function() {
24 | * console.log('Component has received focus');
25 | * };
26 | *
27 | *
8 |
9 |
10 |
11 |
12 | {{'SIMPLE_TRANSLATION_ID' | oplTranslate}}
27 | * 28 | * 29 | *{{'TRANSLATION_WITH_PARAMETERS_ID' | oplTranslate:translationParameters}}
30 | * 31 | * @class TranslateFilter 32 | */ 33 | function TranslateFilter(oplI18nService) { 34 | 35 | /** 36 | * Translates an id into the appropriated text. 37 | * 38 | * @method translate 39 | * @param {String} id The id of the translation 40 | * @param {Object} [parameters] Parameters with for each parameter the key as the placeholder to replace and the 41 | * value as the placeholder substitution string 42 | * @return {String} The translated string 43 | */ 44 | return function(id, parameters) { 45 | return oplI18nService.translate(id, parameters); 46 | }; 47 | 48 | } 49 | 50 | app.filter('oplTranslate', TranslateFilter); 51 | TranslateFilter.$inject = ['oplI18nService']; 52 | 53 | })(angular.module('ov.player')); 54 | -------------------------------------------------------------------------------- /src/components/shared/i18n/i18n.service.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @module ov.player 5 | */ 6 | 7 | (function(angular, app) { 8 | 9 | /** 10 | * Defines an internationalization service to manage string translations. 11 | * 12 | * @class oplI18nService 13 | */ 14 | function oplI18nService(oplI18nTranslations) { 15 | var currentLanguage = navigator.language || navigator.browserLanguage; 16 | 17 | /** 18 | * Tests if a language is supported. 19 | * 20 | * @method isLanguageSupported 21 | * @param {String} language The language code to test (e.g en-CA) 22 | * @return {Boolean} true if supported, false otherwise 23 | */ 24 | function isLanguageSupported(language) { 25 | return Object.keys(oplI18nTranslations).indexOf(language) >= 0; 26 | } 27 | 28 | /** 29 | * Sets current language. 30 | * 31 | * @method setLanguage 32 | * @param {String} language The current language country code (e.g en-CA) 33 | */ 34 | function setLanguage(language) { 35 | if (isLanguageSupported(language)) 36 | currentLanguage = language; 37 | else 38 | currentLanguage = 'en'; 39 | } 40 | 41 | /** 42 | * Gets current language. 43 | * 44 | * @method getLanguage 45 | * @return {String} The current language country code (e.g en-US) 46 | */ 47 | function getLanguage() { 48 | return currentLanguage; 49 | } 50 | 51 | /** 52 | * Translates the given id using current language. 53 | * 54 | * @method translate 55 | * @param {String} id The id of the translation 56 | * @param {Object} [parameters] Parameters with for each parameter the key as the placeholder to replace and the 57 | * value as the placeholder substitution string 58 | * @return {String} The translated string 59 | */ 60 | function translate(id, parameters) { 61 | var translatedText = (oplI18nTranslations[currentLanguage] && oplI18nTranslations[currentLanguage][id]) || id; 62 | 63 | // Translation does not exist 64 | // Use english language as default 65 | if (translatedText === id) 66 | translatedText = oplI18nTranslations['en'][id] || id; 67 | 68 | // Parameters 69 | if (parameters) { 70 | var reg = new RegExp(Object.keys(parameters).join('|'), 'gi'); 71 | translatedText = translatedText.replace(reg, function(matched) { 72 | return parameters[matched]; 73 | }); 74 | } 75 | 76 | return translatedText; 77 | } 78 | 79 | return { 80 | translate: translate, 81 | isLanguageSupported: isLanguageSupported, 82 | setLanguage: setLanguage, 83 | getLanguage: getLanguage 84 | }; 85 | 86 | } 87 | 88 | app.service('oplI18nService', oplI18nService); 89 | oplI18nService.$inject = ['oplI18nTranslations']; 90 | 91 | })(angular, angular.module('ov.player')); 92 | -------------------------------------------------------------------------------- /src/components/shared/i18n/i18n.service.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | window.assert = chai.assert; 4 | 5 | describe('oplI18nService', function() { 6 | var oplI18nService; 7 | var expectedTranslations; 8 | 9 | // Mocks 10 | beforeEach(function() { 11 | expectedTranslations = { 12 | en: {}, 13 | fr: {} 14 | }; 15 | module('ov.player', function($provide) { 16 | 17 | // Mock players 18 | $provide.constant('oplI18nTranslations', expectedTranslations); 19 | 20 | }); 21 | }); 22 | 23 | // Dependencies injections 24 | beforeEach(inject(function(_oplI18nService_) { 25 | oplI18nService = _oplI18nService_; 26 | })); 27 | 28 | describe('isLanguageSupported', function() { 29 | 30 | it('should indicate if a language is supported or not', function() { 31 | assert.ok( 32 | oplI18nService.isLanguageSupported(Object.keys(expectedTranslations)[0]), 33 | 'Expected language support' 34 | ); 35 | assert.notOk(oplI18nService.isLanguageSupported('not supported language'), 'Unexpected language support'); 36 | }); 37 | 38 | }); 39 | 40 | describe('setLanguage', function() { 41 | 42 | it('should set a different language', function() { 43 | oplI18nService.setLanguage('en'); 44 | assert.equal(oplI18nService.getLanguage(), 'en', 'Expected "en" language'); 45 | oplI18nService.setLanguage('fr'); 46 | assert.equal(oplI18nService.getLanguage(), 'fr', 'Expected "fr" language'); 47 | }); 48 | 49 | it('should set language to "en" if specified language is not supported', function() { 50 | oplI18nService.setLanguage('not supported language'); 51 | assert.equal(oplI18nService.getLanguage(), 'en', 'Expected "en" language'); 52 | }); 53 | 54 | }); 55 | 56 | describe('translate', function() { 57 | 58 | it('should translate a string using current language', function() { 59 | expectedTranslations.en.TRANSLATION_ID = 'English'; 60 | expectedTranslations.fr.TRANSLATION_ID = 'Français'; 61 | 62 | oplI18nService.setLanguage('en'); 63 | assert.equal( 64 | oplI18nService.translate('TRANSLATION_ID'), 65 | expectedTranslations.en.TRANSLATION_ID, 66 | 'Wrong english translation' 67 | ); 68 | oplI18nService.setLanguage('fr'); 69 | assert.equal( 70 | oplI18nService.translate('TRANSLATION_ID'), 71 | expectedTranslations.fr.TRANSLATION_ID, 72 | 'Wrong french translation' 73 | ); 74 | }); 75 | 76 | it('should translate string in english if no translation found for the curent language', function() { 77 | expectedTranslations.en.TRANSLATION_ID = 'English'; 78 | oplI18nService.setLanguage('fr'); 79 | assert.equal( 80 | oplI18nService.translate('TRANSLATION_ID'), 81 | expectedTranslations.en.TRANSLATION_ID, 82 | 'Wrong translation' 83 | ); 84 | }); 85 | 86 | it('should not translate string if no translation found', function() { 87 | var expectedTranslation = 'wrong translation id'; 88 | assert.equal(oplI18nService.translate(expectedTranslation), expectedTranslation, 'Wrong translation'); 89 | }); 90 | 91 | it('should replace specified placeholders by associated values in the translated string', function() { 92 | var expectedParameters = { 93 | '%placeholder%': 'Substitution text' 94 | }; 95 | expectedTranslations.en.TRANSLATION_ID = 'Text to replace: %placeholder%'; 96 | oplI18nService.setLanguage('en'); 97 | assert.equal( 98 | oplI18nService.translate('TRANSLATION_ID', expectedParameters), 99 | expectedTranslations.en.TRANSLATION_ID.replace('%placeholder%', expectedParameters['%placeholder%']), 100 | 'Wrong translation' 101 | ); 102 | }); 103 | 104 | }); 105 | 106 | }); 107 | -------------------------------------------------------------------------------- /src/components/shared/millisecondsToTime.filter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @module ov.player 5 | */ 6 | 7 | (function(app) { 8 | 9 | /** 10 | * Creates a filter to convert a time in milliseconds to an hours:minutes:seconds format. 11 | * 12 | * e.g. 13 | * {{60000 | oplMillisecondsToTime}} // 01:00 14 | * {{3600000 | oplMillisecondsToTime}} // 01:00:00 15 | * 16 | * @class oplMillisecondsToTime 17 | */ 18 | function oplMillisecondsToTime() { 19 | return function(time) { 20 | if (time < 0 || isNaN(time)) 21 | return ''; 22 | 23 | time = parseInt(time); 24 | 25 | var seconds = parseInt((time / 1000) % 60); 26 | var minutes = parseInt((time / (60000)) % 60); 27 | var hours = parseInt((time / (3600000)) % 24); 28 | 29 | hours = (hours < 10) ? '0' + hours : hours; 30 | minutes = (minutes < 10) ? '0' + minutes : minutes; 31 | seconds = (seconds < 10) ? '0' + seconds : seconds; 32 | 33 | return ((hours !== '00') ? hours + ':' : '') + minutes + ':' + seconds; 34 | }; 35 | } 36 | 37 | app.filter('oplMillisecondsToTime', oplMillisecondsToTime); 38 | 39 | })(angular.module('ov.player')); 40 | -------------------------------------------------------------------------------- /src/components/shared/millisecondsToTime.filter.spec.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | window.assert = chai.assert; 4 | 5 | describe('oplMillisecondsToTimeFilter', function() { 6 | var millisecondsToTimeFilter; 7 | var $filter; 8 | 9 | // Load module player 10 | beforeEach(module('ov.player')); 11 | 12 | // Dependencies injections 13 | beforeEach(inject(function(_$filter_) { 14 | $filter = _$filter_; 15 | })); 16 | 17 | // Initializes tests 18 | beforeEach(function() { 19 | millisecondsToTimeFilter = $filter('oplMillisecondsToTime'); 20 | }); 21 | 22 | it('should return an empty String if time < 0', function() { 23 | var emptyTime = millisecondsToTimeFilter(-1); 24 | assert.notOk(emptyTime, 'Expected time to be empty'); 25 | assert.isString(emptyTime, 'Expected time to be String'); 26 | }); 27 | 28 | it('should return an empty String if time is undefined', function() { 29 | var emptyTime = millisecondsToTimeFilter(undefined); 30 | assert.notOk(emptyTime, 'Expected time to be empty'); 31 | assert.isString(emptyTime, 'Expected time to be String'); 32 | }); 33 | 34 | it('should be able to convert milliseconds to hh:mm:ss', function() { 35 | var time = millisecondsToTimeFilter(8804555); 36 | assert.equal(time, '02:26:44', 'Wrong time'); 37 | }); 38 | 39 | it('should be able to convert milliseconds to mm:ss while no hours', function() { 40 | var time = millisecondsToTimeFilter(884555); 41 | assert.equal(time, '14:44', 'Wrong time'); 42 | }); 43 | 44 | it('should be able to convert milliseconds to 00:ss while no hours and no minutes', function() { 45 | var time = millisecondsToTimeFilter(5500); 46 | assert.equal(time, '00:05', 'Wrong time'); 47 | }); 48 | 49 | }); 50 | -------------------------------------------------------------------------------- /src/components/shared/scroller/scroller.component.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * @module ov.player 5 | */ 6 | 7 | /** 8 | * Creates a new AngularJS component as an opl-scroller HTML element to scroll a content. 9 | * 10 | * opl-scroller is composed of a container, the transcluded content to scroll and a scroll bar. 11 | * 12 | * Scroller value must be between 0 and 100. 13 | * 14 | * Attributes are: 15 | * - [String] **opl-id** The unique id of the scrollable content. 16 | * - [Number] **opl-step** The step to use when scrolling using keyboard (Default to 10). 17 | * - [Boolean] **opl-no-sequential-focus** true to set scrollbar tabindex to -1, false to set scrollbar tabindex to 0 18 | * - [Boolean] **opl-deactivated** "true" to deactivate the scroller 19 | * - [String] **opl-orientation** The scrollbar orientation, either "horizontal" or "vertical" 20 | * - [Function] **opl-on-touch** The function to call when scroll is manipulated by the user 21 | * - [Function] **opl-on-ready** The function to call when the scroller is ready 22 | * 23 | * @example 24 | * var value = 42; 25 | * var deactivated = false; 26 | * 27 | * var handleScrollTouch = function() { 28 | * console.log('Scroller manually updated'); 29 | * }; 30 | * 31 | * var handleOnReady = function() { 32 | * console.log('Scroller ready'); 33 | * }; 34 | * 35 | *
2 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/components/shared/scroller/scroller.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3/user-interface";
2 | @import "compass/css3/transform";
3 | @import "compass/css3/transition";
4 |
5 | $OPL_SCROLLER_PRIMARY_COLOR: #000000;
6 |
7 | opl-scroller {
8 | width: 100%;
9 | height: 100%;
10 | }
11 |
12 | .opl-scroller {
13 | --opl-scroller-primary-color: #{$OPL_SCROLLER_PRIMARY_COLOR};
14 | --opl-scroller-primary-color-0: #{rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.2)};
15 | --opl-scroller-primary-color-1: #{rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.4)};
16 | --opl-scroller-primary-color-2: #{rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.6)};
17 | position: relative;
18 | width: 100%;
19 | height: 100%;
20 | outline: 0;
21 | @include user-select(none);
22 |
23 | /*
24 | Scrollbar in resting state.
25 | */
26 | .opl-scrollbar {
27 | position: absolute;
28 | z-index: 2;
29 | opacity: 0;
30 | background-color: var(--opl-scroller-primary-color-0, rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.2));
31 | cursor: pointer;
32 | will-change: opacity;
33 | }
34 |
35 | /*
36 | Vertical scrollbar in resting state.
37 | */
38 | &.opl-vertical > .opl-scrollbar {
39 | right: 0;
40 | width: 8px;
41 | height: 100%;
42 | }
43 |
44 | /*
45 | Horizontal scrollbar in resting state.
46 | */
47 | &.opl-horizontal > .opl-scrollbar {
48 | bottom: 0;
49 | width: 100%;
50 | height: 8px;
51 | }
52 |
53 | /*
54 | Cursor in resting state.
55 | */
56 | .opl-thumb {
57 | position: absolute;
58 | z-index: 2;
59 | opacity: 0;
60 | border-radius: 8px;
61 | background-color: var(--opl-scroller-primary-color-0, rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.2));
62 | cursor: pointer;
63 | will-change: opacity, transform;
64 | @include transition-property(transform, -webkit-transform, opacity);
65 | @include transition-timing-function(ease, ease, cubic-bezier(0.4, 0.0, 1, 1));
66 | @include transition-duration(80ms, 80ms, 100ms);
67 |
68 | /*
69 | Cursor in over state.
70 | */
71 | &.opl-thumb-over {
72 | background-color: var(--opl-scroller-primary-color-1, rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.4));
73 | }
74 |
75 | /*
76 | Cursor in active state.
77 | */
78 | &.opl-thumb-active {
79 | opacity: 1;
80 | background-color: var(--opl-scroller-primary-color-2, rgba($OPL_SCROLLER_PRIMARY_COLOR, 0.6));
81 | }
82 | }
83 |
84 | /*
85 | Vertical scrollbar cursor in resting state.
86 | */
87 | &.opl-vertical > .opl-thumb {
88 | top: 0;
89 | right: 2px;
90 | width: 4px;
91 | @include transform-origin(top, left);
92 | @include transform(translateY(0));
93 | @include scaleX(1);
94 | }
95 |
96 | /*
97 | Horizontal scrollbar cursor in resting state.
98 | */
99 | &.opl-horizontal > .opl-thumb {
100 | bottom: 2px;
101 | left: 0;
102 | height: 4px;
103 | @include transform-origin(bottom, left);
104 | @include transform(translateX(0));
105 | @include scaleY(1);
106 | }
107 |
108 | /*
109 | Scroller in over state and focus state.
110 | */
111 | &.opl-scroller-over,
112 | &.opl-scroller-focus,
113 | {
114 |
115 | /*
116 | Cursor in over and focus state.
117 | */
118 | & > .opl-thumb {
119 | opacity: 1;
120 | }
121 |
122 | }
123 |
124 | /*
125 | Scrollable content.
126 | */
127 | .opl-scroller-content {
128 | position: relative;
129 | overflow: hidden;
130 | width: 100%;
131 | height: 100%;
132 | }
133 |
134 | }
135 |
--------------------------------------------------------------------------------
/src/components/shared/settings/settings.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-settings HTML element to create player settings.
9 | *
10 | * opl-settings is composed of a button and a list of settings (qualities and sources). The button and the list of
11 | * settings use the OpenVeo Player Icons font.
12 | *
13 | * Attributes are:
14 | * - [Array] **opl-qualities** The list of available video qualities
15 | * - [Array] **opl-sources** The list of available video sources
16 | * - [String] **opl-quality** The selected quality
17 | * - [String] **opl-source** The selected source
18 | * - [Function] **opl-on-update** The function to call when quality or source changes
19 | * - [Function] **opl-on-focus** The function to call when component enters in focus state
20 | *
21 | * Requires:
22 | * - **oplTranslate** OpenVeo Player i18n filter
23 | *
24 | * @example
25 | * var handleOnUpdate = function(quality, source) {
26 | * if (quality) console.log('Quality selected:' + quality);
27 | * if (source) console.log('Source selected:' + source);
28 | * };
29 | * var handleOnFocus = function() {
30 | * console.log('Component has received focus');
31 | * };
32 | * var qualities = [
33 | * {id: '1', label: '360p', hd: false},
34 | * {id: '2', label: '720p', hd: true}
35 | * ];
36 | * var sources = [
37 | * {id: '1', label: 'Source 1'},
38 | * {id: '2', label: 'Source 2'}
39 | * ];
40 | *
41 | *
2 |
46 |
--------------------------------------------------------------------------------
/src/components/shared/settings/settings.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3/user-interface";
2 | @import "compass/css3/transform";
3 | @import "compass/css3/transition";
4 | @import "compass/css3/animation";
5 | @import "compass/css3/box-shadow";
6 |
7 | $OPL_SETTINGS_PRIMARY_COLOR: #ffffff;
8 | $OPL_SETTINGS_BACKGROUND_COLOR: #000000;
9 | $OPL_SETTINGS_ACCENT_COLOR: #f63d98;
10 |
11 | /*
12 | Animate the settings item ripple with a growing effect from 0 to 1100%.
13 | */
14 | @include keyframes(opl-settings-item-ripple-radius-in) {
15 | from {
16 | @include animation-timing-function(cubic-bezier(0.4, 0, 0.2, 1));
17 | @include scale(0);
18 | }
19 | to {
20 | @include scale(11);
21 | }
22 | }
23 |
24 | /*
25 | Animate the settings item ripple with a resolve effect from 0 to 0.32.
26 | */
27 | @include keyframes(opl-settings-item-ripple-resolve) {
28 | from {
29 | @include animation-timing-function(cubic-bezier(0.4, 0, 0.2, 1));
30 | opacity: 0;
31 | }
32 | to {
33 | opacity: 0.32;
34 | }
35 | }
36 |
37 | /*
38 | Animate the settings item ripple with a dissolve effect from actual opacity to 0.
39 | */
40 | @include keyframes(opl-settings-item-ripple-dissolve) {
41 | from {
42 | @include animation-timing-function(linear);
43 | }
44 | to {
45 | opacity: 0;
46 | }
47 | }
48 |
49 | /*
50 | Animate the settings dialog with grow effect.
51 | */
52 | @include keyframes(opl-settings-grow) {
53 | 0% {
54 | @include animation-timing-function(cubic-bezier(0.4, 0, 0.2, 1));
55 | width: 0;
56 | height: 0;
57 | }
58 | 100% {
59 | @include transform(translateX(-194px));
60 | width: 226px;
61 | height: var(--opl-settings-dialog-height);
62 | }
63 | }
64 |
65 | /*
66 | Animate the settings dialog with reduce effect.
67 | */
68 | @include keyframes(opl-settings-reduce) {
69 | from {
70 | @include animation-timing-function(linear);
71 | @include transform(translateX(-194px));
72 | width: 226px;
73 | height: var(--opl-settings-dialog-height);
74 | }
75 | to {
76 | width: 0;
77 | height: 0;
78 | }
79 | }
80 |
81 | /*
82 | Animate the settings dialog with a resolve effect.
83 | */
84 | @include keyframes(opl-settings-resolve) {
85 | from {
86 | @include animation-timing-function(cubic-bezier(0.4, 0, 0.2, 1));
87 | opacity: 0;
88 | }
89 | to {
90 | opacity: 1;
91 | }
92 | }
93 |
94 | /*
95 | Animate the settings dialog with a dissolve effect.
96 | */
97 | @include keyframes(opl-settings-dissolve) {
98 | from {
99 | @include animation-timing-function(linear);
100 | opacity: 1;
101 | }
102 | to {
103 | opacity: 0;
104 | }
105 | }
106 |
107 | opl-settings {
108 | display: inline-block;
109 | width: 32px;
110 | height: 32px;
111 | vertical-align: top;
112 | }
113 |
114 | .opl-settings {
115 | --opl-settings-primary-color: #{$OPL_SETTINGS_PRIMARY_COLOR};
116 | --opl-settings-primary-color-0: #{rgba($OPL_SETTINGS_PRIMARY_COLOR, 0.2)};
117 | --opl-settings-primary-color-1: #{rgba($OPL_SETTINGS_PRIMARY_COLOR, 0.9)};
118 | --opl-settings-background-color: #{$OPL_SETTINGS_BACKGROUND_COLOR};
119 | --opl-settings-background-color-0: #{rgba($OPL_SETTINGS_BACKGROUND_COLOR, 0.8)};
120 | --opl-settings-accent-color: #{$OPL_SETTINGS_ACCENT_COLOR};
121 | position: relative;
122 | display: inline-block;
123 | width: 32px;
124 | height: 32px;
125 | vertical-align: top;
126 |
127 | /*
128 | Settings dialog in resting state.
129 | */
130 | .opl-dialog {
131 | position: absolute;
132 | bottom: 64px;
133 | left: 0;
134 | width: 226px;
135 | background-color: var(--opl-settings-background-color-0, rgba($OPL_SETTINGS_BACKGROUND_COLOR, 0.8));
136 | will-change: transform, opacity;
137 | opacity: 0;
138 | @include box-shadow(0px 4px 24px var(--opl-settings-background-color, $OPL_SETTINGS_BACKGROUND_COLOR));
139 | @include transform-origin(bottom, left);
140 | }
141 |
142 | /*
143 | Settings dialog in posting state.
144 | */
145 | &.opl-posting .opl-dialog {
146 | @include animation-name(opl-settings-grow, opl-settings-resolve);
147 | @include animation-duration(250ms, 250ms);
148 | @include animation-fill-mode(forwards, forwards);
149 |
150 | /*
151 | Dialog content in posting state.
152 | */
153 | & > div {
154 | @include animation-name(opl-settings-resolve);
155 | @include animation-duration(500ms);
156 | @include animation-fill-mode(forwards);
157 | }
158 | }
159 |
160 | /*
161 | Settings dialog in masking state.
162 | */
163 | &.opl-masking .opl-dialog {
164 | @include animation-name(opl-settings-reduce, opl-settings-dissolve);
165 | @include animation-duration(150ms, 150ms);
166 | @include animation-fill-mode(forwards, forwards);
167 |
168 | /*
169 | Dialog content in masking state.
170 | */
171 | & > div {
172 | @include animation-name(opl-settings-dissolve);
173 | @include animation-duration(75ms);
174 | @include animation-fill-mode(forwards);
175 | }
176 | }
177 |
178 | /*
179 | Settings dialog in posted state.
180 | */
181 | &.opl-posted .opl-dialog {
182 | opacity: 1;
183 | width: 226px;
184 | height: var(--opl-settings-dialog-height);
185 | @include transform(translateX(-194px));
186 |
187 | /*
188 | Dialog content in masking state.
189 | */
190 | & > div {
191 | opacity: 1;
192 | }
193 | }
194 |
195 | h1 {
196 | font-family: 'Roboto-Medium', sans-serif;
197 | background-color: var(--opl-settings-primary-color-0, rgba($OPL_SETTINGS_PRIMARY_COLOR, 0.20));
198 | height: 32px;
199 | margin: 0;
200 | padding-left: 8px;
201 | line-height: 32px;
202 | letter-spacing: 0.1px;
203 | font-size: 14px;
204 | color: var(--opl-settings-primary-color-1, rgba($OPL_SETTINGS_PRIMARY_COLOR, 0.9));
205 | }
206 |
207 | ul {
208 | margin: 0;
209 | padding: 0;
210 | list-style: none;
211 | }
212 |
213 | /*
214 | Item (quality / source).
215 | */
216 | li {
217 | font-family: 'Roboto', sans-serif;
218 | overflow: hidden;
219 | position: relative;
220 | height: 32px;
221 | line-height: 32px;
222 | padding: 0 8px;
223 | outline: none;
224 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
225 | will-change: transform, opacity;
226 | cursor: pointer;
227 | text-overflow: ellipsis;
228 | white-space: nowrap;
229 | color: var(--opl-settings-primary-color-1, rgba($OPL_SETTINGS_PRIMARY_COLOR, 0.9));
230 | @include user-select(none);
231 |
232 | span {
233 | font-size: 12px;
234 | vertical-align: middle;
235 | }
236 |
237 | /*
238 | Item label in resting state.
239 | */
240 | .opl-item-label {
241 | padding-left: 26px;
242 | letter-spacing: 0.4px;
243 | }
244 |
245 | /*
246 | Selected icon in resting state.
247 | */
248 | .opl-check {
249 | padding-top: 5px;
250 | vertical-align: top;
251 | font-size: 22px;
252 | }
253 |
254 | /*
255 | HD icon in resting state.
256 | */
257 | .opl-hd {
258 | font-size: 22px;
259 | }
260 |
261 | /*
262 | Ripple and focus overlay in resting state.
263 | */
264 | &::after, &::before {
265 | position: absolute;
266 | top: 0;
267 | height: 100%;
268 | content: '';
269 | opacity: 0;
270 | pointer-events: none;
271 | }
272 |
273 | /*
274 | Focus overlay in resting state.
275 | */
276 | &::before {
277 | @include transition-property(opacity);
278 | @include transition-timing-function(linear);
279 | @include transition-duration(15ms);
280 | left: 0;
281 | width: 100%;
282 | background-color: var(--opl-settings-primary-color, $OPL_SETTINGS_PRIMARY_COLOR);
283 | }
284 |
285 | /*
286 | Ripple in resting state.
287 | */
288 | &::after {
289 | @include scale(0);
290 | @include transform-origin(center, center);
291 | left: -10%;
292 | width: 20%;
293 | border-radius: 50%;
294 | background-color: var(--opl-settings-primary-color, $OPL_SETTINGS_PRIMARY_COLOR);
295 | }
296 |
297 | /*
298 | Focus overlay in focus state.
299 | */
300 | &.opl-focus::before {
301 | opacity: 0.24;
302 | }
303 |
304 | /*
305 | Item in selected state.
306 | */
307 | &.opl-selected {
308 |
309 | span {
310 | color: var(--opl-settings-accent-color, $OPL_SETTINGS_ACCENT_COLOR);
311 | }
312 |
313 | /*
314 | Item label in selected state.
315 | */
316 | .opl-item-label {
317 | padding-left: 0;
318 | }
319 |
320 | /*
321 | Focus overlay in both hover and selected states.
322 | */
323 | &::before {
324 | background-color: var(--opl-settings-accent-color, $OPL_SETTINGS_ACCENT_COLOR);
325 | }
326 |
327 | /*
328 | Ripple in selected state.
329 | */
330 | &::after {
331 | background-color: var(--opl-settings-accent-color, $OPL_SETTINGS_ACCENT_COLOR);
332 | }
333 |
334 | }
335 |
336 | /*
337 | Focus overlay in hover state.
338 | */
339 | &:hover::before {
340 | opacity: 0.078;
341 | }
342 |
343 | /*
344 | Ripple in item activation state.
345 | */
346 | &.opl-item-activation::after {
347 | @include animation-name(opl-settings-item-ripple-radius-in, opl-settings-item-ripple-resolve);
348 | @include animation-duration(225ms, 75ms);
349 | @include animation-fill-mode(forwards, forwards);
350 | }
351 |
352 | /*
353 | Ripple in item deactivation state.
354 | */
355 | &.opl-item-deactivation::after {
356 | @include animation-name(opl-settings-item-ripple-dissolve);
357 | @include animation-duration(150ms);
358 | @include scale(1);
359 | }
360 |
361 | }
362 |
363 | }
364 |
--------------------------------------------------------------------------------
/src/components/shared/slider/slider.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-slider HTML element to be able to set a value between 0% and 100%
9 | * using a slider.
10 | *
11 | * opl-slider is based on the Material specification but implements it partially. Only the continuous slider is
12 | * implemented.
13 | *
14 | * It could have been the HTML type="range" slider unfortunately it is not enough customizable.
15 | * It could also have been the slider component from Material but it embeds more features than required by the OpenVeo
16 | * Player, it adds another dependency to the OpenVeo Player and an AngularJS wrapper should have been implemented
17 | * anyway.
18 | *
19 | * opl-slider is composed of a track bar and a thumb.
20 | *
21 | * Attributes are:
22 | * - [Number] **opl-step** The step to use, it won't be possible to place the slider outside steps it set.
23 | * Default to 0 (no step) meaning that the slider can be drag & drop at any value of the slider and will move one by
24 | * one when using keyboard.
25 | * - [String] **opl-label** The ARIA label of the slider. Default to "Select a value".
26 | * - [String] **opl-value-text** The human readable text alternative of the slider value. Text will be processed by
27 | * oplTranslate filter and supports parameter "%value%". Empty by default.
28 | * - [Boolean] **opl-no-sequential-focus** true to set slider tabindex to -1, false to set slider tabindex to 0
29 | * - [Function] **opl-on-focus** The function to call when component enters in focus state
30 | * - [Function] **opl-on-over** The function to call when pointer enters the component
31 | * - [Function] **opl-on-out** The function to call when pointer leaves the component
32 | * - [Function] **opl-on-move** The function to call when pointer moves over the component
33 | *
34 | * Requires:
35 | * - **oplTranslate** OpenVeo Player i18n filter
36 | *
37 | * @example
38 | * var handleOnFocus = function() {
39 | * console.log('Component has received focus');
40 | * };
41 | * var handleOnOver = function() {
42 | * console.log('Pointer has entered the component');
43 | * };
44 | * var handleOnOut = function() {
45 | * console.log('Pointer has left the component');
46 | * };
47 | * var handleOnMove = function(value, coordinates, sliderBoundingRectangle) {
48 | * console.log(
49 | * 'Pointer has moved over value ' + value + ' in coordinates (' + coordinates.x + ',' + coordinates.y + ')'
50 | * );
51 | * console.log(sliderBoundingRectangle);
52 | * };
53 | * var sliderValue = 50;
54 | *
55 | *
9 |
45 |
10 |
11 |
44 | -
12 |
- 22 | 23 | 24 | 25 | 26 |
-
29 |
- 39 | 40 | 41 | 42 |
2 |
--------------------------------------------------------------------------------
/src/components/shared/tabs/tabs.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3/box-shadow";
2 | @import "compass/css3/box-sizing";
3 |
4 | $OPL_TABS_BACKGROUND_COLOR: #ffffff;
5 | $OPL_TABS_PRIMARY_COLOR: #000000;
6 | $OPL_TABS_ACCENT_COLOR: #e6007e;
7 |
8 | opl-tabs {
9 | position: absolute;
10 | top: 0;
11 | left: 0;
12 | height: 100%;
13 | width: 100%;
14 | }
15 |
16 | .opl-tabs {
17 | --opl-tabs-background-color: #{$OPL_TABS_BACKGROUND_COLOR};
18 | --opl-tabs-primary-color: #{$OPL_TABS_PRIMARY_COLOR};
19 | --opl-tabs-primary-color-0: #{rgba($OPL_TABS_PRIMARY_COLOR, 0.05)};
20 | --opl-tabs-primary-color-1: #{rgba($OPL_TABS_PRIMARY_COLOR, 0.12)};
21 | --opl-tabs-primary-color-2: #{rgba($OPL_TABS_PRIMARY_COLOR, 0.541)};
22 | --opl-tabs-accent-color: #{$OPL_TABS_ACCENT_COLOR};
23 | height: 100%;
24 | width: 100%;
25 |
26 | /*
27 | Views placeholder.
28 | */
29 | & > div {
30 | overflow: hidden;
31 | position: absolute;
32 | left: 32px;
33 | top: 0;
34 | right: 0;
35 | height: 100%;
36 | border-bottom: 1px solid var(--opl-tabs-primary-color-0, rgba($OPL_TABS_PRIMARY_COLOR, 0.05));
37 | @include box-sizing(border-box);
38 | }
39 |
40 | /*
41 | Views wrappers.
42 | */
43 | opl-view,
44 | opl-view > div {
45 | height: 100%;
46 | width: 100%;
47 | }
48 |
49 | /*
50 | Tabs.
51 | */
52 | .opl-tabs-wrapper {
53 | z-index: 1;
54 | position: absolute;
55 | left: 0;
56 | height: 100%;
57 | width: 32px;
58 | @include box-shadow(0px 4px 4px var(--opl-tabs-primary-color-1, rgba($OPL_TABS_PRIMARY_COLOR, 0.12)));
59 | background-color: var(--opl-tabs-background-color, $OPL_TABS_BACKGROUND_COLOR);
60 |
61 | ul {
62 | position: absolute;
63 | bottom: 0;
64 | outline: none;
65 |
66 | }
67 |
68 | &.opl-focus {
69 | background-color: var(--opl-tabs-primary-color-0, rgba($OPL_TABS_PRIMARY_COLOR, 0.05));
70 | }
71 |
72 | /*
73 | Tabs buttons.
74 | */
75 | button {
76 | color: var(--opl-tabs-primary-color-2, rgba($OPL_TABS_PRIMARY_COLOR, 0.541));
77 |
78 | /*
79 | Tab buttons focus ring and ripple in resting state.
80 | */
81 | &::before,
82 | &::after {
83 | background-color: var(--opl-tabs-primary-color, $OPL_TABS_PRIMARY_COLOR);
84 | }
85 | }
86 |
87 | .opl-selected {
88 |
89 | /*
90 | Tab buttons in selected state.
91 | */
92 | button {
93 | color: var(--opl-tabs-accent-color, $OPL_TABS_ACCENT_COLOR);
94 |
95 | /*
96 | Tab buttonss focus ring and ripple in selected state.
97 | */
98 | &::before,
99 | &::after {
100 | background-color: var(--opl-tabs-accent-color, $OPL_TABS_ACCENT_COLOR);
101 | }
102 | }
103 | }
104 | }
105 |
106 | /*
107 | No tabs.
108 | */
109 | &.opl-no-tabs {
110 |
111 | /*
112 | Views placeholder.
113 | */
114 | & > div {
115 | left: 0;
116 | }
117 |
118 | /*
119 | Tabs.
120 | */
121 | .opl-tabs-wrapper {
122 | display: none;
123 | }
124 |
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/src/components/shared/templateSelector/templateSelector.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-template-selector HTML element to create a player templates selector.
9 | *
10 | * opl-template-selector is composed of a button and a list of templates. The button and the list of templates use the
11 | * OpenVeo Player Icons font. The button icon reflects the template actually selected.
12 | *
13 | * Attributes are:
14 | * - [String] **opl-template** The template to choose, either "split_1", "split_2", "split_50_50" or "split_25_75"
15 | * - [String] **opl-label** The ARIA label of the slider. Default to "Select a value"
16 | * - [Function] **opl-on-update** The function to call when a new template is chosen
17 | * - [Function] **opl-on-focus** The function to call when component enters in focus state
18 | *
19 | * Requires:
20 | * - **oplTranslate** OpenVeo Player i18n filter
21 | *
22 | * @example
23 | * var handleOnUpdate = function(template) {
24 | * console.log('New selected template:' + template);
25 | * };
26 | * var handleOnFocus = function() {
27 | * console.log('Component has received focus');
28 | * };
29 | * var template = 'split_1';
30 | *
31 | *
3 |
14 |
15 | -
4 |
-
5 |
11 |
12 |
2 |
13 |
14 |
--------------------------------------------------------------------------------
/src/components/shared/templateSelector/templateSelector.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3/box-sizing";
2 | @import "compass/css3/user-interface";
3 | @import "compass/css3/transform";
4 | @import "compass/css3/animation";
5 | @import "compass/css3/transition";
6 |
7 | $OPL_TEMPLATE_SELECTOR_PRIMARY_COLOR: #000000;
8 |
9 | /*
10 | Animate the template with a resolve effect.
11 | */
12 | @include keyframes(opl-template-selector-template-ripple-resolve) {
13 | from {
14 | @include animation-timing-function(cubic-bezier(0.4, 0, 0.2, 1));
15 | opacity: 0;
16 | }
17 | to {
18 | opacity: 0.60;
19 | }
20 | }
21 |
22 | /*
23 | Animate the ripple with dissolve effect from actual opacity to 0
24 | */
25 | @include keyframes(opl-template-selector-template-ripple-dissolve) {
26 | from {
27 | @include animation-timing-function(linear);
28 | }
29 | to {
30 | opacity: 0;
31 | }
32 | }
33 |
34 | /*
35 | Animate the template ripple with a growing effect from 0 to 100%.
36 | */
37 | @include keyframes(opl-template-selector-template-ripple-radius-in) {
38 | from {
39 | @include animation-timing-function(cubic-bezier(0.4, 0, 0.2, 1));
40 | @include scale(0);
41 | }
42 | to {
43 | @include scale(1);
44 | }
45 | }
46 |
47 | opl-template-selector {
48 | display: inline-block;
49 | width: 32px;
50 | height: 32px;
51 | margin-left: 100px;
52 | vertical-align: top;
53 | }
54 |
55 | .opl-template-selector {
56 | --opl-template-selector-primary-color: #{$OPL_TEMPLATE_SELECTOR_PRIMARY_COLOR};
57 | position: relative;
58 | display: inline-block;
59 | width: 32px;
60 | height: 32px;
61 | outline: none;
62 | vertical-align: top;
63 |
64 | button {
65 | z-index: 1;
66 | position: absolute;
67 | top: 0;
68 | width: 32px;
69 | height: 32px;
70 | padding: 4px;
71 | outline: none;
72 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
73 | will-change: transform, opacity;
74 | border: none;
75 | background-color: transparent;
76 | cursor: pointer;
77 | color: var(--opl-template-selector-primary-color, $OPL_TEMPLATE_SELECTOR_PRIMARY_COLOR);
78 | @include box-sizing(border-box);
79 | @include user-select(none);
80 |
81 | /*
82 | Button is selected state.
83 | */
84 | &.opl-selected {
85 | z-index: 2;
86 | }
87 |
88 | /*
89 | Focus ring and ripple resting state sizes are the same as the button.
90 | Focus ring and ripple resting state visibility are hidden.
91 | */
92 | &::before,
93 | &::after {
94 | position: absolute;
95 | top: 0;
96 | left: 0;
97 | width: 100%;
98 | height: 100%;
99 | content: '';
100 | opacity: 0;
101 | border-radius: 50%;
102 | pointer-events: none;
103 | }
104 |
105 | /*
106 | Focus ring in resting state.
107 | */
108 | &::before {
109 | @include transition-property(opacity);
110 | @include transition-timing-function(linear);
111 | @include transition-duration(15ms);
112 | background-color: var(--opl-template-selector-primary-color, $OPL_TEMPLATE_SELECTOR_PRIMARY_COLOR);
113 | }
114 |
115 | /*
116 | Ripple resting state is scaled down to 0 and has its center matching the center of the button.
117 | */
118 | &::after {
119 | @include scale(0);
120 | @include transform-origin(center, center);
121 | background-color: var(--opl-template-selector-primary-color, $OPL_TEMPLATE_SELECTOR_PRIMARY_COLOR);
122 | }
123 |
124 | /*
125 | Focus ring in button hover state.
126 | */
127 | &:hover::before {
128 | opacity: 0.04;
129 | }
130 |
131 | /*
132 | Focus ring in button focus state.
133 | */
134 | &.opl-template-focus::before {
135 | @include transition-duration(75ms);
136 | opacity: 0.12;
137 | }
138 |
139 | /*
140 | Ripple in template button activation state.
141 | */
142 | &.opl-template-activation::after {
143 | @include animation-name(opl-template-selector-template-ripple-radius-in, opl-template-selector-template-ripple-resolve);
144 | @include animation-duration(225ms, 75ms);
145 | @include animation-fill-mode(forwards, forwards);
146 | }
147 |
148 | /*
149 | Ripple in button deactivation state.
150 | */
151 | &.opl-template-deactivation::after {
152 | @include animation-name(opl-template-selector-template-ripple-dissolve);
153 | @include animation-duration(150ms);
154 | @include scale(1);
155 | }
156 |
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/src/components/shared/toggleIconButton/toggleIconButton.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-toggle-icon-button HTML element to create a two states icon button to
9 | * switch on and off.
10 | *
11 | * opl-toggle-icon-button button does not change its state on its own, it only calls the oplOnUpdate function when
12 | * actioned.
13 | *
14 | * opl-toggle-icon-button is composed of an "off" icon, a "on" icon, a focus ring and a ripple.
15 | *
16 | * Attributes are:
17 | * - [Boolean] **opl-on** Either "true" ("on") or false ("off"). Default to false.
18 | * - [String] **opl-off-icon** The ligature name of the icon to use for the "off" state (from "OpenVeo-Player-Icons"
19 | * font)
20 | * - [String] **opl-on-icon** The ligature name of the icon to use for the "on" state (from "OpenVeo-Player-Icons"
21 | * font)
22 | * - [String] **opl-off-label** The ARIA label to apply to the button when state is "off". Empty by default.
23 | * - [String] **opl-on-label** The ARIA label to apply to the button when state is "on". Empty by default.
24 | * - [Boolean] **opl-no-sequential-focus** true to set button tabindex to -1, false to set button tabindex to 0
25 | * - [Function] **opl-on-update** The function to call when actioned
26 | * - [Function] **opl-on-focus** The function to call when component enters in focus state
27 | *
28 | * @example
29 | * var handleOnUpdate = function(on) {
30 | * console.log('Toggle button actioned');
31 | * };
32 | *
33 | *
2 |
24 |
--------------------------------------------------------------------------------
/src/components/shared/volume/volume.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3/transition";
2 |
3 | opl-volume {
4 | display: inline-block;
5 | height: 32px;
6 | }
7 |
8 | .opl-volume {
9 | display: inline-block;
10 | overflow: hidden;
11 | height: 32px;
12 | vertical-align: top;
13 |
14 | /*
15 | Slider.
16 | The slider must have a width even if the slider wrapper is not displayed.
17 | This is required by the slider to init correctly.
18 | */
19 | opl-slider, .opl-slider {
20 | width: 62px;
21 | }
22 |
23 | /*
24 | Slider wrapper.
25 | The slider is not displayed in volume resting state.
26 | */
27 | & > div {
28 | display: inline-block;
29 | width: 0;
30 | opacity: 0;
31 | margin-left: 8px;
32 | vertical-align: top;
33 | will-change: opacity;
34 | @include transition-property(width, opacity);
35 | @include transition-timing-function(cubic-bezier(0.4, 0.0, 1, 1), cubic-bezier(0.4, 0.0, 1, 1));
36 | @include transition-duration(100ms, 100ms);
37 | }
38 |
39 | /*
40 | Volume in both over and focus states.
41 | */
42 | &.opl-over,
43 | &.opl-volume-focus {
44 | overflow: visible;
45 | }
46 |
47 | /*
48 | Slider wrapper.
49 | The slider is displayed in both volume over and focus states.
50 | */
51 | &.opl-over > div,
52 | &.opl-volume-focus > div {
53 | width: 62px;
54 | opacity: 1;
55 | margin: 0 12px;
56 | }
57 |
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/tile/tile.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-tile HTML element to create a point of interest.
9 | *
10 | * opl-tile is composed of information about a point of interest. A point of interest is represented by a time and the
11 | * resources associated to it. The ressources associated to the point of interest depends on its type.
12 | * The tile is reduced by default and can be enlarged. When tile is reduced only the time and the title (tile of type
13 | * "text") or the small image (tile of type "image") are displayed. When tile is enlarged a close button, title,
14 | * description and attachment file are displayed for tiles of type "text" while close button and large image are
15 | * displayed for tiles of type "image".
16 | *
17 | * Attributes are:
18 | * - [Array] **opl-data** The list of tiles description objects with for each object:
19 | * - [Number] **id** The tile id
20 | * - [String] **type** The tile type (either "image" or "text")
21 | * - [Number] **time** The tile time value in milliseconds
22 | *
23 | * Only for tiles of type "image":
24 | * - [Object] **[image]** The tile image with:
25 | * - [Object] **small** The small image. Small image is displayed when tile is reduced. Expected small image size
26 | * is 142x80
27 | * - [String] **url** The URL of the sprite containing the small image
28 | * - [Number] **x** x coordinate of the small image inside the sprite
29 | * - [Number] **y** y coordinate of the small image inside the sprite
30 | * - [String] **large** The Large image URL to display when tile is enlarged
31 | *
32 | * Only for tiles of type "text":
33 | * - [String] **title** The tile title
34 | * - [String] **[description]** The tile description (may contain HTML)
35 | * - [Object] **[file]** The tile attachment file
36 | * - [String] **url** The file URL. Displayed file name is retrieved from this URL
37 | * - [String] **originalName** The name of the file to propose to the user when downloading
38 | * - [Boolean] **opl-abstract** true to show the abstract (reduced), false to show the full tile (enlarged)
39 | * - [Function] **opl-on-select** The function to call when tile is actioned
40 | * - [Function] **opl-on-more** The function to call when tile "more info" button is actioned
41 | * - [Function] **opl-on-close** The function to call when tile "close" button is actioned
42 | * - [Function] **opl-on-ready** The function to call when tile is ready. It can be called several time if the value
43 | * of opl-abstract changes
44 | * - [Function] **opl-on-image-preloaded** The function to call when large image is loaded
45 | * - [Function] **opl-on-image-error** The function to call when large image couldn't be retrieved
46 | *
47 | * @example
48 | * var textTile = {
49 | * id: 42,
50 | * type: 'text',
51 | * title: 'Title',
52 | * time: 20000,
53 | * description: '
13 |
23 | Description',
54 | * file: {
55 | * url: 'http://host.local/document.pdf',
56 | * originalName: 'download-name-without-extension'
57 | * }
58 | * };
59 | *
60 | * var imageTile = {
61 | * id: 43,
62 | * type: 'image',
63 | * time: 40000,
64 | * image: {
65 | * small: 'http://host.local/image-small.jpg',
66 | * large: 'http://host.local/image-large.jpg'
67 | * }
68 | * };
69 | *
70 | * var handleTextTileSelect = function(tile) {
71 | * console.log('Tile ' + tile.id + ' has been actioned');
72 | * };
73 | *
74 | * var handleTextTileMore = function(tile) {
75 | * console.log('Tile ' + tile.id + ' "more info" button has been actioned');
76 | * };
77 | *
78 | * var handleTextTileClose = function(tile) {
79 | * console.log('Tile ' + tile.id + ' "close" button has been actioned');
80 | * };
81 | *
82 | * var handleOnReady = function() {
83 | * console.log('Tile is ready');
84 | * };
85 | *
86 | * var handleOnImageLoaded = function(tile, size) {
87 | * console.log('Image of tile ' + tile.id + ' has been preloaded');
88 | * console.log('Image size is ' + size.width + 'x' + size.height);
89 | * };
90 | *
91 | * var handleOnImageError = function(tile) {
92 | * console.log('Image of tile ' + tile.id + ' is on error');
93 | * };
94 | *
95 | * var selected = false;
96 | *
97 | * ![]()
39 |
40 |
48 |
49 |
50 |
51 |
52 |
53 |
61 |
62 |
63 |
64 |
71 |
72 |
73 |
74 |
75 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/src/components/tiles/tiles.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | /**
8 | * Creates a new AngularJS component as an opl-tiles HTML element to create a list of points of interest.
9 | *
10 | * opl-tiles is composed of scrollable list of opl-tile components.
11 | *
12 | * Attributes are:
13 | * - [Array] **opl-data**: The list of tiles description objects as defined in opl-tile component
14 | * - [Number] **opl-time** The actual time in milliseconds, all tiles with a time inferior to this time will be
15 | * marked as past tiles, tile corresponding to actual time will be marked as selected
16 | * - [Function] **opl-on-tile-select** The function to call when a tile is actioned
17 | * - [Function] **opl-on-tile-info** The function to call when a tile "more info" button is actioned
18 | * - [Function] **opl-on-tile-close** The function to call when a tile close button is actioned
19 | *
20 | * @example
21 | * var tiles = [
22 | * {
23 | * id: 42,
24 | * type: 'text',
25 | * title: 'Title',
26 | * time: 20000,
27 | * description: 'Description',
28 | * file: {
29 | * url: 'http://host.local/document.pdf',
30 | * originalName: 'download-name-without-extension'
31 | * }
32 | * },
33 | * {
34 | * id: 43,
35 | * type: 'image',
36 | * time: 40000,
37 | * image: {
38 | * small: {
39 | * url: 'http://host.local/image-small.jpg',
40 | * x: 0,
41 | * y: 0
42 | * },
43 | * large: 'http://host.local/image-large.jpg'
44 | * }
45 | * }
46 | * ];
47 | *
48 | * var time = 2000;
49 | *
50 | * var handleTileSelect = function(tile) {
51 | * console.log('Tile ' + tile.id + ' has been actioned');
52 | * };
53 | *
54 | * var handleTileInfo = function(tile) {
55 | * console.log('Tile ' + tile.id + ' more button has been actioned');
56 | * };
57 | *
58 | * var handleTileClose = function(tile) {
59 | * console.log('Tile ' + tile.id + ' close button has been actioned');
60 | * };
61 | *
62 | *
11 |
12 |
13 | -
14 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/components/vimeo.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/youtube.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.module.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | (function(angular) {
8 |
9 | /**
10 | * Creates the ov.player module.
11 | *
12 | * ov.player offers a directive to easily create a player with associated indexes, chapters and tags. All you have
13 | * to do is use the component oplPlayer.
14 | *
15 | * @main ov.player
16 | */
17 | var app = angular.module('ov.player', ['ngCookies']);
18 |
19 | // Player translations
20 | app.constant('oplI18nTranslations', {
21 | en: {
22 | LOADING: 'Loading...',
23 | MEDIA_ERR_NO_SOURCE: 'A network error caused the video download to fail part-way.',
24 | MEDIA_ERR_NETWORK: 'A network error caused the video download to fail part-way.',
25 | MEDIA_ERR_DECODE: 'The video playback was aborted due to a corruption problem ' +
26 | 'or because the video used features your browser did not support.',
27 | MEDIA_ERR_SRC_NOT_SUPPORTED: 'The video could not be loaded, either because the server or network failed ' +
28 | 'or because the format is not supported.',
29 | MEDIA_ERR_PERMISSION: 'Video not available or private.',
30 | MEDIA_ERR_DEFAULT: 'An unknown error occurred.',
31 | PREVIEW_IMAGE_PRELOAD_ERROR: 'Image not available',
32 | TILE_MORE_INFO_BUTTON_LABEL: 'More info',
33 | TILE_CLOSE_BUTTON_LABEL: 'Close',
34 | TILE_IMAGE_PRELOAD_ERROR: 'Image not available',
35 | CONTROLS_VOLUME_MUTE_ARIA_LABEL: 'Mute',
36 | CONTROLS_VOLUME_UNMUTE_ARIA_LABEL: 'Mute',
37 | CONTROLS_VOLUME_CURSOR_ARIA_LABEL: 'Change volume',
38 | CONTROLS_VOLUME_TEXT_ARIA_LABEL: 'Volume %value%%',
39 | CONTROLS_TEMPLATE_SPLIT_50_50_ARIA_LABEL: 'Mode 50/50',
40 | CONTROLS_TEMPLATE_FULL_1_ARIA_LABEL: 'Mode video only',
41 | CONTROLS_TEMPLATE_FULL_2_ARIA_LABEL: 'Mode presentation only',
42 | CONTROLS_TEMPLATE_SPLIT_25_75_ARIA_LABEL: 'Mode with priority on presentation',
43 | CONTROLS_SETTINGS_ARIA_LABEL: 'Settings',
44 | CONTROLS_SETTINGS_QUALITIES_TITLE: 'Quality',
45 | CONTROLS_SETTINGS_SOURCES_TITLE: 'Source',
46 | CONTROLS_SETTINGS_SOURCE_LABEL: 'Source %source%',
47 | CONTROLS_PLAY_ARIA_LABEL: 'Play',
48 | CONTROLS_PAUSE_ARIA_LABEL: 'Pause',
49 | CONTROLS_TEMPLATES_SELECTOR_ARIA_LABEL: 'Choose player template',
50 | CONTROLS_TIME_BAR_ARIA_LABEL: 'Navigate in the video',
51 | CONTROLS_TIME_BAR_ARIA_VALUE_TEXT: '%value%% seen',
52 | CONTROLS_FULLSCREEN_ARIA_LABEL: 'Fullscreen',
53 | CONTROLS_FULLSCREEN_EXIT_ARIA_LABEL: 'Exit fullscreen',
54 | TABS_CHAPTERS_ARIA_LABEL: 'Display chapters',
55 | TABS_TIMECODES_ARIA_LABEL: 'Display images',
56 | TABS_TAGS_ARIA_LABEL: 'Display tags'
57 | },
58 | fr: {
59 | LOADING: 'Chargement...',
60 | MEDIA_ERR_NO_SOURCE: 'Une erreur réseau à causé l\'échec du téléchargement de la vidéo.',
61 | MEDIA_ERR_NETWORK: 'Une erreur réseau à causé l\'échec du téléchargement de la vidéo.',
62 | MEDIA_ERR_DECODE: 'La lecture de la vidéo a été abandonnée en raison d\' un problème de corruption ' +
63 | 'ou parce que la vidéo utilise des fonctionnalités que votre navigateur ne supporte pas.',
64 | MEDIA_ERR_SRC_NOT_SUPPORTED: 'La vidéo ne peut être chargée , soit parce que le serveur ou le réseau à échoué ' +
65 | 'ou parce que le format ne sont pas supportées.',
66 | MEDIA_ERR_PERMISSION: 'Vidéo indisponible ou privée.',
67 | MEDIA_ERR_DEFAULT: 'Une erreur inconnue est survenue.',
68 | PREVIEW_IMAGE_PRELOAD_ERROR: 'Image non disponible',
69 | TILE_MORE_INFO_BUTTON_LABEL: 'Plus d\'info',
70 | TILE_CLOSE_BUTTON_LABEL: 'Fermer',
71 | TILE_IMAGE_PRELOAD_ERROR: 'Image non disponible',
72 | CONTROLS_VOLUME_MUTE_ARIA_LABEL: 'Désactiver le son',
73 | CONTROLS_VOLUME_UNMUTE_ARIA_LABEL: 'Activer le son',
74 | CONTROLS_VOLUME_CURSOR_ARIA_LABEL: 'Modifier le volume',
75 | CONTROLS_VOLUME_TEXT_ARIA_LABEL: 'Volume à %value%%',
76 | CONTROLS_TEMPLATE_SPLIT_50_50_ARIA_LABEL: 'Mode 50/50',
77 | CONTROLS_TEMPLATE_FULL_1_ARIA_LABEL: 'Mode vidéo seule',
78 | CONTROLS_TEMPLATE_FULL_2_ARIA_LABEL: 'Mode présentation seule',
79 | CONTROLS_TEMPLATE_SPLIT_25_75_ARIA_LABEL: 'Mode avec priorité sur la présentation',
80 | CONTROLS_SETTINGS_ARIA_LABEL: 'Paramètres',
81 | CONTROLS_SETTINGS_QUALITIES_TITLE: 'Qualité',
82 | CONTROLS_SETTINGS_SOURCES_TITLE: 'Source',
83 | CONTROLS_SETTINGS_SOURCE_LABEL: 'Source %source%',
84 | CONTROLS_PLAY_ARIA_LABEL: 'Lire',
85 | CONTROLS_PAUSE_ARIA_LABEL: 'Pause',
86 | CONTROLS_TEMPLATES_SELECTOR_ARIA_LABEL: 'Choisir un modèle de player',
87 | CONTROLS_TIME_BAR_ARIA_LABEL: 'Se déplacer dans la vidéo',
88 | CONTROLS_TIME_BAR_ARIA_VALUE_TEXT: '%value%% vu',
89 | CONTROLS_FULLSCREEN_ARIA_LABEL: 'Plein écran',
90 | CONTROLS_FULLSCREEN_EXIT_ARIA_LABEL: 'Quitter le plein écran',
91 | TABS_CHAPTERS_ARIA_LABEL: 'Afficher les chapitres',
92 | TABS_TIMECODES_ARIA_LABEL: 'Afficher les indexes',
93 | TABS_TAGS_ARIA_LABEL: 'Afficher les tags'
94 | }
95 | });
96 |
97 | // Player errors
98 | // Errors from 1 to 4 are the same as in the HTMLVideoElement specification
99 | app.constant('oplPlayerErrors', {
100 | MEDIA_ERR_NO_SOURCE: 0,
101 | MEDIA_ERR_ABORTED: 1,
102 | MEDIA_ERR_NETWORK: 2,
103 | MEDIA_ERR_DECODE: 3,
104 | MEDIA_ERR_SRC_NOT_SUPPORTED: 4,
105 | MEDIA_ERR_PERMISSION: 5,
106 | MEDIA_ERR_UNKNOWN: 6
107 | });
108 |
109 | // Configures the ov.player application
110 | app.config(function() {
111 | var deactivateDashJsLogs = function(player, mediaPlayer) {
112 | if (videojs && videojs.log) {
113 | mediaPlayer.updateSettings({
114 | debug: {logLevel: dashjs.Debug.LOG_LEVEL_NONE}
115 | });
116 | }
117 | };
118 |
119 | if (typeof videojs !== 'undefined' && videojs.Html5DashJS && videojs.Html5DashJS.hook)
120 | videojs.Html5DashJS.hook('beforeinitialize', deactivateDashJsLogs);
121 | });
122 |
123 | })(angular);
124 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | // INJECT_EXTERNAL_FONTS_SCSS
2 |
3 | $MEDIA_LARGE_BREAKPOINT: 768px;
4 | $MEDIA_SMALL_BREAKPOINT: 320px;
5 | $HASH: unique-id();
6 |
7 | @font-face {
8 | font-family: "OpenVeo-Player-Icons";
9 | src: url("./fonts/openveo-player-icons/openveo-player-icons.woff?#{$HASH}") format("woff"),
10 | url("./fonts/openveo-player-icons/openveo-player-icons.ttf?#{$HASH}") format("truetype"),
11 | url("./fonts/openveo-player-icons/openveo-player-icons.svg?#{$HASH}") format("svg");
12 | font-weight: normal;
13 | font-style: normal;
14 | }
15 |
16 | .opl-icon {
17 | display: inline-block;
18 | font-family: 'OpenVeo-Player-Icons';
19 | font-weight: normal;
20 | font-style: normal;
21 | font-size: 24px;
22 | line-height: 1;
23 | text-transform: none;
24 | letter-spacing: normal;
25 | word-wrap: normal;
26 | white-space: nowrap;
27 | direction: ltr;
28 | text-rendering: optimizeLegibility;
29 | font-feature-settings: 'liga';
30 | -webkit-font-smoothing: antialiased;
31 | -moz-osx-font-smoothing: grayscale;
32 | }
33 |
34 | // INJECT_SCSS
35 |
--------------------------------------------------------------------------------
12 |
13 |
87 |
88 |
89 |
14 |
17 |
33 |
34 |
18 |
19 |
20 |
21 | access_time
22 |
23 |
31 |
32 |
35 | ![]()
39 |
40 |
48 |
49 |
85 |
86 |
50 |
62 |
63 |
51 |
52 |
53 |
61 |
64 |
71 |
72 |
73 |
74 |
75 |
84 |
2 |
11 |
28 |
29 |
--------------------------------------------------------------------------------
/src/components/vimeo.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/youtube.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.module.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * @module ov.player
5 | */
6 |
7 | (function(angular) {
8 |
9 | /**
10 | * Creates the ov.player module.
11 | *
12 | * ov.player offers a directive to easily create a player with associated indexes, chapters and tags. All you have
13 | * to do is use the component oplPlayer.
14 | *
15 | * @main ov.player
16 | */
17 | var app = angular.module('ov.player', ['ngCookies']);
18 |
19 | // Player translations
20 | app.constant('oplI18nTranslations', {
21 | en: {
22 | LOADING: 'Loading...',
23 | MEDIA_ERR_NO_SOURCE: 'A network error caused the video download to fail part-way.',
24 | MEDIA_ERR_NETWORK: 'A network error caused the video download to fail part-way.',
25 | MEDIA_ERR_DECODE: 'The video playback was aborted due to a corruption problem ' +
26 | 'or because the video used features your browser did not support.',
27 | MEDIA_ERR_SRC_NOT_SUPPORTED: 'The video could not be loaded, either because the server or network failed ' +
28 | 'or because the format is not supported.',
29 | MEDIA_ERR_PERMISSION: 'Video not available or private.',
30 | MEDIA_ERR_DEFAULT: 'An unknown error occurred.',
31 | PREVIEW_IMAGE_PRELOAD_ERROR: 'Image not available',
32 | TILE_MORE_INFO_BUTTON_LABEL: 'More info',
33 | TILE_CLOSE_BUTTON_LABEL: 'Close',
34 | TILE_IMAGE_PRELOAD_ERROR: 'Image not available',
35 | CONTROLS_VOLUME_MUTE_ARIA_LABEL: 'Mute',
36 | CONTROLS_VOLUME_UNMUTE_ARIA_LABEL: 'Mute',
37 | CONTROLS_VOLUME_CURSOR_ARIA_LABEL: 'Change volume',
38 | CONTROLS_VOLUME_TEXT_ARIA_LABEL: 'Volume %value%%',
39 | CONTROLS_TEMPLATE_SPLIT_50_50_ARIA_LABEL: 'Mode 50/50',
40 | CONTROLS_TEMPLATE_FULL_1_ARIA_LABEL: 'Mode video only',
41 | CONTROLS_TEMPLATE_FULL_2_ARIA_LABEL: 'Mode presentation only',
42 | CONTROLS_TEMPLATE_SPLIT_25_75_ARIA_LABEL: 'Mode with priority on presentation',
43 | CONTROLS_SETTINGS_ARIA_LABEL: 'Settings',
44 | CONTROLS_SETTINGS_QUALITIES_TITLE: 'Quality',
45 | CONTROLS_SETTINGS_SOURCES_TITLE: 'Source',
46 | CONTROLS_SETTINGS_SOURCE_LABEL: 'Source %source%',
47 | CONTROLS_PLAY_ARIA_LABEL: 'Play',
48 | CONTROLS_PAUSE_ARIA_LABEL: 'Pause',
49 | CONTROLS_TEMPLATES_SELECTOR_ARIA_LABEL: 'Choose player template',
50 | CONTROLS_TIME_BAR_ARIA_LABEL: 'Navigate in the video',
51 | CONTROLS_TIME_BAR_ARIA_VALUE_TEXT: '%value%% seen',
52 | CONTROLS_FULLSCREEN_ARIA_LABEL: 'Fullscreen',
53 | CONTROLS_FULLSCREEN_EXIT_ARIA_LABEL: 'Exit fullscreen',
54 | TABS_CHAPTERS_ARIA_LABEL: 'Display chapters',
55 | TABS_TIMECODES_ARIA_LABEL: 'Display images',
56 | TABS_TAGS_ARIA_LABEL: 'Display tags'
57 | },
58 | fr: {
59 | LOADING: 'Chargement...',
60 | MEDIA_ERR_NO_SOURCE: 'Une erreur réseau à causé l\'échec du téléchargement de la vidéo.',
61 | MEDIA_ERR_NETWORK: 'Une erreur réseau à causé l\'échec du téléchargement de la vidéo.',
62 | MEDIA_ERR_DECODE: 'La lecture de la vidéo a été abandonnée en raison d\' un problème de corruption ' +
63 | 'ou parce que la vidéo utilise des fonctionnalités que votre navigateur ne supporte pas.',
64 | MEDIA_ERR_SRC_NOT_SUPPORTED: 'La vidéo ne peut être chargée , soit parce que le serveur ou le réseau à échoué ' +
65 | 'ou parce que le format ne sont pas supportées.',
66 | MEDIA_ERR_PERMISSION: 'Vidéo indisponible ou privée.',
67 | MEDIA_ERR_DEFAULT: 'Une erreur inconnue est survenue.',
68 | PREVIEW_IMAGE_PRELOAD_ERROR: 'Image non disponible',
69 | TILE_MORE_INFO_BUTTON_LABEL: 'Plus d\'info',
70 | TILE_CLOSE_BUTTON_LABEL: 'Fermer',
71 | TILE_IMAGE_PRELOAD_ERROR: 'Image non disponible',
72 | CONTROLS_VOLUME_MUTE_ARIA_LABEL: 'Désactiver le son',
73 | CONTROLS_VOLUME_UNMUTE_ARIA_LABEL: 'Activer le son',
74 | CONTROLS_VOLUME_CURSOR_ARIA_LABEL: 'Modifier le volume',
75 | CONTROLS_VOLUME_TEXT_ARIA_LABEL: 'Volume à %value%%',
76 | CONTROLS_TEMPLATE_SPLIT_50_50_ARIA_LABEL: 'Mode 50/50',
77 | CONTROLS_TEMPLATE_FULL_1_ARIA_LABEL: 'Mode vidéo seule',
78 | CONTROLS_TEMPLATE_FULL_2_ARIA_LABEL: 'Mode présentation seule',
79 | CONTROLS_TEMPLATE_SPLIT_25_75_ARIA_LABEL: 'Mode avec priorité sur la présentation',
80 | CONTROLS_SETTINGS_ARIA_LABEL: 'Paramètres',
81 | CONTROLS_SETTINGS_QUALITIES_TITLE: 'Qualité',
82 | CONTROLS_SETTINGS_SOURCES_TITLE: 'Source',
83 | CONTROLS_SETTINGS_SOURCE_LABEL: 'Source %source%',
84 | CONTROLS_PLAY_ARIA_LABEL: 'Lire',
85 | CONTROLS_PAUSE_ARIA_LABEL: 'Pause',
86 | CONTROLS_TEMPLATES_SELECTOR_ARIA_LABEL: 'Choisir un modèle de player',
87 | CONTROLS_TIME_BAR_ARIA_LABEL: 'Se déplacer dans la vidéo',
88 | CONTROLS_TIME_BAR_ARIA_VALUE_TEXT: '%value%% vu',
89 | CONTROLS_FULLSCREEN_ARIA_LABEL: 'Plein écran',
90 | CONTROLS_FULLSCREEN_EXIT_ARIA_LABEL: 'Quitter le plein écran',
91 | TABS_CHAPTERS_ARIA_LABEL: 'Afficher les chapitres',
92 | TABS_TIMECODES_ARIA_LABEL: 'Afficher les indexes',
93 | TABS_TAGS_ARIA_LABEL: 'Afficher les tags'
94 | }
95 | });
96 |
97 | // Player errors
98 | // Errors from 1 to 4 are the same as in the HTMLVideoElement specification
99 | app.constant('oplPlayerErrors', {
100 | MEDIA_ERR_NO_SOURCE: 0,
101 | MEDIA_ERR_ABORTED: 1,
102 | MEDIA_ERR_NETWORK: 2,
103 | MEDIA_ERR_DECODE: 3,
104 | MEDIA_ERR_SRC_NOT_SUPPORTED: 4,
105 | MEDIA_ERR_PERMISSION: 5,
106 | MEDIA_ERR_UNKNOWN: 6
107 | });
108 |
109 | // Configures the ov.player application
110 | app.config(function() {
111 | var deactivateDashJsLogs = function(player, mediaPlayer) {
112 | if (videojs && videojs.log) {
113 | mediaPlayer.updateSettings({
114 | debug: {logLevel: dashjs.Debug.LOG_LEVEL_NONE}
115 | });
116 | }
117 | };
118 |
119 | if (typeof videojs !== 'undefined' && videojs.Html5DashJS && videojs.Html5DashJS.hook)
120 | videojs.Html5DashJS.hook('beforeinitialize', deactivateDashJsLogs);
121 | });
122 |
123 | })(angular);
124 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | // INJECT_EXTERNAL_FONTS_SCSS
2 |
3 | $MEDIA_LARGE_BREAKPOINT: 768px;
4 | $MEDIA_SMALL_BREAKPOINT: 320px;
5 | $HASH: unique-id();
6 |
7 | @font-face {
8 | font-family: "OpenVeo-Player-Icons";
9 | src: url("./fonts/openveo-player-icons/openveo-player-icons.woff?#{$HASH}") format("woff"),
10 | url("./fonts/openveo-player-icons/openveo-player-icons.ttf?#{$HASH}") format("truetype"),
11 | url("./fonts/openveo-player-icons/openveo-player-icons.svg?#{$HASH}") format("svg");
12 | font-weight: normal;
13 | font-style: normal;
14 | }
15 |
16 | .opl-icon {
17 | display: inline-block;
18 | font-family: 'OpenVeo-Player-Icons';
19 | font-weight: normal;
20 | font-style: normal;
21 | font-size: 24px;
22 | line-height: 1;
23 | text-transform: none;
24 | letter-spacing: normal;
25 | word-wrap: normal;
26 | white-space: nowrap;
27 | direction: ltr;
28 | text-rendering: optimizeLegibility;
29 | font-feature-settings: 'liga';
30 | -webkit-font-smoothing: antialiased;
31 | -moz-osx-font-smoothing: grayscale;
32 | }
33 |
34 | // INJECT_SCSS
35 |
--------------------------------------------------------------------------------
12 |
27 | -
13 |
-
14 |
24 |
25 |