",
26 | "license": "ECL-2.0",
27 | "bugs": {
28 | "url": "https://github.com/polimediaupv/paella-core/issues"
29 | },
30 | "homepage": "https://github.com/polimediaupv/paella-core#readme",
31 | "devDependencies": {
32 | "@babel/core": "^7.12.10",
33 | "@babel/plugin-transform-modules-commonjs": "^7.19.6",
34 | "@babel/preset-env": "^7.12.11",
35 | "@playwright/test": "^1.29.2",
36 | "babel-loader": "^9.0.0",
37 | "babel-plugin-transform-require-context": "^0.1.1",
38 | "copy-webpack-plugin": "^11.0.0",
39 | "css-loader": "^6.6.0",
40 | "eslint": "^8.29.0",
41 | "file-loader": "^6.2.0",
42 | "html-webpack-plugin": "^5.5.0",
43 | "source-map-loader": "^4.0.0",
44 | "style-loader": "^3.3.1",
45 | "svg-inline-loader": "^0.8.2",
46 | "webpack": "^5.66.0",
47 | "webpack-cli": "^5.0.0",
48 | "webpack-dev-server": "^4.7.3"
49 | },
50 | "dependencies": {
51 | "core-js": "^3.8.2",
52 | "hls.js": "^1.0.4"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Paella Player
6 |
7 |
8 |
9 |
10 | Spacer
11 | This section is intentionally inserted to generate a scroll on the page.
12 | It is used to test the pop up placement when the page is scrolled down.
13 | 
14 |
15 |
16 |
17 | Cokie consent test:
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
33 |
34 |
35 | Spacer
36 | This section is intentionally inserted to generate a scroll on the page.
37 | It is used to test the pop up placement when the page is scrolled down.
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/config/present-mode-3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/src/icons/volume-high.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
--------------------------------------------------------------------------------
/repository_test/repository/6-streams/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "metadata": {
3 | "duration": 300,
4 | "title": "6 streams demo video",
5 | "preview": "https://repository.paellaplayer.upv.es/6-streams/preview.png"
6 | },
7 | "streams": [
8 | {
9 | "sources": {
10 | "hls": [
11 | {
12 | "src": "https://repository.paellaplayer.upv.es/6-streams/thispersondoesnotexist-1/thispersondoesnotexist-1-master.m3u8",
13 | "mimetype": "video/mp4"
14 | }
15 | ]
16 | },
17 | "content":"presenter-1",
18 | "role": "mainAudio"
19 | },
20 | {
21 | "sources": {
22 | "hls": [
23 | {
24 | "src": "https://repository.paellaplayer.upv.es/6-streams/thispersondoesnotexist-2/thispersondoesnotexist-2-master.m3u8",
25 | "mimetype": "video/mp4"
26 | }
27 | ]
28 | },
29 | "content":"presenter-2"
30 | },
31 | {
32 | "sources": {
33 | "hls": [
34 | {
35 | "src": "https://repository.paellaplayer.upv.es/6-streams/thispersondoesnotexist-3/thispersondoesnotexist-3-master.m3u8",
36 | "mimetype": "video/mp4"
37 | }
38 | ]
39 | },
40 | "content":"presenter-3"
41 | },
42 | {
43 | "sources": {
44 | "hls": [
45 | {
46 | "src": "https://repository.paellaplayer.upv.es/6-streams/thispersondoesnotexist-4/thispersondoesnotexist-4-master.m3u8",
47 | "mimetype": "video/mp4"
48 | }
49 | ]
50 | },
51 | "content":"presenter-4"
52 | },
53 | {
54 | "sources": {
55 | "hls": [
56 | {
57 | "src": "https://repository.paellaplayer.upv.es/6-streams/thispersondoesnotexist-5/thispersondoesnotexist-5-master.m3u8",
58 | "mimetype": "video/mp4"
59 | }
60 | ]
61 | },
62 | "content":"presenter-5"
63 | },
64 | {
65 | "sources": {
66 | "hls": [
67 | {
68 | "src": "https://repository.paellaplayer.upv.es/6-streams/thispersondoesnotexist-6/thispersondoesnotexist-6-master.m3u8",
69 | "mimetype": "video/mp4"
70 | }
71 | ]
72 | },
73 | "content":"presenter-6"
74 | }
75 | ]
76 | }
--------------------------------------------------------------------------------
/src/js/plugins/es.upv.paella.vttManifestCaptionsPlugin.js:
--------------------------------------------------------------------------------
1 |
2 | import CaptionsPlugin from 'paella-core/js/captions/CaptionsPlugin';
3 | import WebVTTParser from 'paella-core/js/captions/WebVTTParser';
4 | import PaellaCorePlugins from './PaellaCorePlugins';
5 |
6 | import { resolveResourcePath } from 'paella-core/js/core/utils';
7 |
8 | export default class VttManifestCaptionsPlugin extends CaptionsPlugin {
9 | getPluginModuleInstance() {
10 | return PaellaCorePlugins.Get();
11 | }
12 |
13 | get name() {
14 | return super.name || "es.upv.paella.vttManifestCaptionsPlugin";
15 | }
16 |
17 | async isEnabled() {
18 | const enabled = await super.isEnabled();
19 | return enabled &&
20 | this.player.videoManifest.captions &&
21 | this.player.videoManifest.captions.length>0;
22 | }
23 |
24 | async getCaptions() {
25 | const result = [];
26 | const p = [];
27 | this.player.videoManifest.captions.forEach(captions => {
28 | p.push(new Promise(async (resolve, reject) => {
29 | if (/vtt/i.test(captions.format)) {
30 | const fileUrl = resolveResourcePath(this.player, captions.url);
31 | const fetchResult = await fetch(fileUrl)
32 | if (fetchResult.ok) {
33 | const text = await fetchResult.text();
34 | const parser = new WebVTTParser(text);
35 | parser.captions.label = captions.text;
36 | parser.captions.language = captions.lang;
37 | result.push(parser.captions);
38 | resolve();
39 | }
40 | else {
41 | reject();
42 | }
43 | }
44 | else {
45 | reject();
46 | }
47 | }));
48 | });
49 | await Promise.allSettled(p);
50 | return result;
51 | }
52 | }
--------------------------------------------------------------------------------
/repository_test/repository/webvtt-captions/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "metadata": {
3 | "duration":1000,
4 | "title": "WebVTT captions",
5 | "preview": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/slides/thumb_0.jpg"
6 | },
7 | "streams": [
8 | {
9 | "sources": {
10 | "mp4": [
11 | {
12 | "src": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/video/720p.mp4",
13 | "mimetype": "video/mp4",
14 | "res": {
15 | "w": "1280",
16 | "h": "720"
17 | }
18 | }
19 | ],
20 | "image": [
21 | {
22 | "mimetype": "image/jpeg",
23 | "frames": [
24 | {
25 | "time": 0,
26 | "src": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/slides/thumb_0.jpg"
27 | }
28 | ],
29 | "count": 1,
30 | "duration": 0,
31 | "res": {
32 | "w": 320,
33 | "h": 180
34 | }
35 | },
36 | {
37 | "mimetype": "image/jpeg",
38 | "frames": [
39 | {
40 | "time": 0,
41 | "src": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/slides/thumb_0.jpg"
42 | }
43 | ],
44 | "count": 1,
45 | "duration": 0,
46 | "res": {
47 | "w": 1280,
48 | "h": 720
49 | }
50 | }
51 | ]
52 | },
53 | "preview": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/slides/thumb_0.jpg",
54 | "content":"presenter"
55 | }
56 | ],
57 | "frameList": [
58 | {
59 | "id": "frame_0",
60 | "mimetype": "image/jpeg",
61 | "time": 0,
62 | "url": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/slides/thumb_0.jpg",
63 | "thumb": "https://repository.paellaplayer.upv.es/pm-be0c7738-039d-9445-8237-8b85f37cd303/slides/thumb_0.jpg"
64 | }
65 | ],
66 | "captions": [
67 | {
68 | "lang": "es",
69 | "text": "Español (traducción automática)",
70 | "format": "vtt",
71 | "url": "captions.es.vtt"
72 | }
73 | ]
74 | }
--------------------------------------------------------------------------------
/src/css/VideoCanvas.css:
--------------------------------------------------------------------------------
1 |
2 | .video-canvas .button-area {
3 | position: absolute;
4 | top: 5px;
5 | left: 0px;
6 | right: 0px;
7 | pointer-events: none;
8 | text-align: center;
9 | z-index: 1;
10 | container-type: size;
11 | container-name: button-area;
12 | }
13 |
14 |
15 | .video-canvas .button-area button {
16 | pointer-events: all;
17 | margin: 2px;
18 | width: 40px;
19 | opacity: 0.8;
20 | background-color: var(--main-bg-color);
21 | border: none;
22 | border-radius: 5px;
23 | opacity: 0.3;
24 | }
25 |
26 | .video-canvas:hover .button-area button {
27 | opacity: 1;
28 | }
29 |
30 | .video-canvas .button-area button:hover {
31 | background-color: var(--highlight-bg-color-hover);
32 | }
33 |
34 | .video-canvas .button-area button i svg {
35 | width: 100%;
36 | height: 100%;
37 | fill: var(--main-fg-color);
38 | color: var(--main-fg-color);
39 | }
40 |
41 | .video-canvas .button-area button:hover {
42 | opacity: 1;
43 | }
44 |
45 | .video-canvas .button-area button.align-left {
46 | float: left;
47 | }
48 |
49 | .video-canvas .button-area button.align-right {
50 | float: right;
51 | }
52 |
53 | .video-canvas .button-area {
54 | padding: 5px;
55 | }
56 |
57 | .video-canvas.image-canvas .image-container {
58 | width: 100%;
59 | height: 100%;
60 | display: flex;
61 | align-items: center;
62 | align-content: center;
63 | justify-content: center;
64 | }
65 | .video-canvas.image-canvas img.landscape {
66 | height: 100%;
67 | }
68 |
69 | .video-canvas.image-canvas img.portrait {
70 | width: 100%;
71 | }
72 |
73 |
74 | @container button-area (max-width: 200px) {
75 | .video-canvas .button-area button {
76 | width: 25cqi;
77 | }
78 | }
79 |
80 | @container button-area (min-width: 200px) and (max-width: 350px) {
81 | .video-canvas .button-area button {
82 | width: 45px;
83 | }
84 | }
85 |
86 | @container button-area (min-width: 350px) {
87 | .video-canvas .button-area button {
88 | width: 55px;
89 | }
90 | }
91 |
92 |
93 |
94 |
--------------------------------------------------------------------------------
/repository_test/repository/audio-only/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "_metadata": {
3 | "duration": 909.13,
4 | "title": "Belmar 15 minutes (multiresolution)",
5 | "preview": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/7dc22bee-14f3-442c-8f0d-30d8b68c8604/presentation_cut.jpg"
6 | },
7 | "streams": [
8 | {
9 | "sources": {
10 | "audio": [
11 | {
12 | "src": "https://repository.paellaplayer.upv.es/dual-video-audio/media/presenter-audio.m4a"
13 | }
14 | ]
15 | },
16 | "role":"mainAudio",
17 | "content":"presenter",
18 | "canvas":["audio"]
19 | }
20 | ],
21 | "frameList": [
22 | {
23 | "id": "frame_854",
24 | "mimetype": "image/jpeg",
25 | "time": 854,
26 | "url": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/3d90109c-9608-44c1-8660-fce3f216d716/presentation_cut.jpg",
27 | "thumb": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/403de1df-aa66-44c0-b600-7683acf249b8/presentation_cut.jpg"
28 | },
29 | {
30 | "id": "frame_751",
31 | "mimetype": "image/jpeg",
32 | "time": 751,
33 | "url": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/598bd2ba-4fef-4886-884e-0ab82176f13d/presentation_cut.jpg",
34 | "thumb": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/73a6564c-b2d6-4896-b0f1-38129dde2c85/presentation_cut.jpg"
35 | },
36 | {
37 | "id": "frame_0",
38 | "mimetype": "image/jpeg",
39 | "time": 0,
40 | "url": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/7dc22bee-14f3-442c-8f0d-30d8b68c8604/presentation_cut.jpg",
41 | "thumb": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/46561b90-85b3-4ad7-a986-cdd9b52ae02b/presentation_cut.jpg"
42 | },
43 | {
44 | "id": "frame_363",
45 | "mimetype": "image/jpeg",
46 | "time": 363,
47 | "url": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/d3194d9b-8f65-403b-a639-9de4311a283b/presentation_cut.jpg",
48 | "thumb": "https://repository.paellaplayer.upv.es/dual-video-audio/slides/4505b6d9-8a0c-4809-ade3-840e743188ed/presentation_cut.jpg"
49 | }
50 | ]
51 | }
--------------------------------------------------------------------------------
/src/css/VideoContainerMessage.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --video-container-message-bkg: rgba(0, 0, 0, 0.4);
3 | --video-container-message-color: white;
4 | }
5 | .video-container-message {
6 | display: flex;
7 | justify-content: space-around;
8 | flex-wrap: wrap;
9 | position: absolute;
10 | left: 0px;
11 | top: 0px;
12 | bottom: 0px;
13 | right: 0px;
14 | padding-top: 1%;
15 | pointer-events: none;
16 | container-type: size;
17 | container-name: video-container-message;
18 | }
19 |
20 | .video-container-message .container {
21 | width: 31%;
22 | display: flex;
23 | flex-wrap: wrap;
24 | justify-content: center;
25 | align-items: center;
26 | height: 30%;
27 | }
28 |
29 | .video-container-message .container .message-content {
30 | background-color: var(--video-container-message-bkg);
31 | border-radius: 5px;
32 | padding-left: 10%;
33 | padding-right: 10%;
34 | text-align: center;
35 | width: 40%;
36 | }
37 |
38 | .video-container-message .container .message-content .text {
39 | text-shadow: 0px 0px 3px var(--video-container-message-bkg);
40 | color: var(--video-container-message-color);
41 | width: 100%;
42 | }
43 |
44 | .video-container-message .container .message-content i {
45 | display: inline-block;
46 | width: 90%;
47 | padding-top: 10%;
48 | }
49 |
50 | .video-container-message .container .message-content i svg {
51 | width: 100%;
52 | height: 100%;
53 | fill: var(--video-container-message-color);
54 | color: var(--video-container-message-color);
55 | }
56 |
57 | @container video-container-message (max-width: 700px) {
58 | .video-container-message .container .message-content .text {
59 | font-size: 1.2em;
60 | }
61 | }
62 |
63 | @container video-container-message (min-width: 700px) and (max-width: 1300px) {
64 | .video-container-message .container .message-content .text {
65 | font-size: 2.0em;
66 | }
67 | }
68 |
69 | @container video-container-message (min-width: 1300px) {
70 | .video-container-message .container .message-content .text {
71 | font-size: 2.3em;
72 | }
73 | }
--------------------------------------------------------------------------------
/src/js/core/dom.js:
--------------------------------------------------------------------------------
1 |
2 | import PlayerResource from './PlayerResource';
3 |
4 | export function createElement({tag='div',attributes={},children="",innerText="",parent=null}) {
5 | const result = document.createElement(tag);
6 | result.innerText = innerText;
7 | for (let key in attributes) {
8 | result.setAttribute(key,attributes[key]);
9 | }
10 | result.innerHTML = children;
11 | if (parent) {
12 | parent.appendChild(result);
13 | }
14 | return result;
15 | }
16 |
17 | export function createElementWithHtmlText(htmlText,parent = null) {
18 | const tmpElem = document.createElement('div');
19 | tmpElem.innerHTML = htmlText;
20 | const result = tmpElem.children[0];
21 | if (parent) {
22 | parent.appendChild(result);
23 | }
24 | return result;
25 | }
26 |
27 | export class DomClass extends PlayerResource {
28 | constructor(player, {tag='div',attributes=[],children="",parent=null}) {
29 | super(player);
30 | this._element = createElement({tag,attributes,children,parent});
31 |
32 | // Add a getter as a shortcut to the DOM element tag
33 | Object.defineProperty(this, tag, {
34 | get: () => this._element
35 | });
36 | }
37 |
38 | get element() {
39 | return this._element;
40 | }
41 |
42 | get parent() {
43 | return this._element.parentElement;
44 | }
45 |
46 | hide() {
47 | this.element.style.display = "none";
48 | }
49 |
50 | show(showMode = "block") {
51 | this.element.style.display = showMode;
52 | }
53 |
54 | get isVisible() {
55 | const style = window.getComputedStyle(this.element);
56 | return style.display !== "none" &&
57 | style.display !== "";
58 | }
59 |
60 | setAttribute(name,value) {
61 | this._element.setAttribute(name,value);
62 | }
63 |
64 | removeFromParent() {
65 | this._element.parentElement?.removeChild(this._element);
66 | }
67 |
68 | setParent(parent) {
69 | this.removeFromParent();
70 | parent.appendChild(this._element);
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/doc/tutorial/create_custom_plugin.md:
--------------------------------------------------------------------------------
1 | # Create custom plugin
2 |
3 | You can extend `paella-core` using plugins. Plugins allow you to add new functions to the player in a modular way, so that the same plugins can be reused in other players.
4 |
5 | There are many types of plugins that you can add to your player. In fact, it is impossible to cover all types of `paella-core` plugins in a single tutorial. To learn all about plugins, you can use the [reference documentation on this topic](../plugins.md).
6 |
7 | In our case, we are going to create a button type plugin, which we can add to the player in the same way we did in the [tutorial where we added the playback bar buttons](add_plugins.md).
8 |
9 | ## Plugin file
10 |
11 | Create a file with the name `TestButtonPlugin.js` in the same location as the `main.js` file. Insert the following code:
12 |
13 | ```js
14 | import { ButtonPlugin } from 'paella-core';
15 |
16 | export default class TestButtonPlugin extends ButtonPlugin {
17 | get name() {
18 | return "es.upv.paella.testButtonPlugin";
19 | }
20 |
21 | async load() {
22 | this.icon = `
23 |
28 | `;
29 | }
30 |
31 | async action() {
32 | alert("Hello, World!");
33 | }
34 | }
35 | ```
36 |
37 | The `name` attribute is mandatory and has to return a unique identifier for that plugin. The `async load()` function is called just before loading the plugin, so we can use it to load resources necessary for its operation. In this case we have initialized the button icon (attribute `this.icon`). The `async action()` function, in button type plugins, is the one called when the user clicks on it.
38 |
39 | Previous tutorial: [Trimming basics](trimming_basics.md)
40 | Next tutorial: [Video canvas: adding zoom](video_canvas.md)
41 |
--------------------------------------------------------------------------------
/doc/styles.md:
--------------------------------------------------------------------------------
1 | # Styles
2 |
3 | The paella core styles are designed to make it possible to define, in a simple way, some aspects such as background colors, highlight colors or text and icon colors.
4 |
5 | For this purpose, paella core colors are defined by CSS variables. By defining a stylesheet that rewrites these variables, it is possible to quickly change the colors of the player.
6 |
7 | ## Load styles
8 |
9 | It is possible to define skins for paella core easily by adding style sheets at the end of the header.
10 |
11 | ```js
12 | const head = document.getElementsByTagName("head")[0];
13 | head.insertAdjacentHTML(
14 | "beforeend",
15 | ''
16 | );
17 | ```
18 |
19 | It is important to do the loading of stylesheets at runtime, as this is the only way to ensure that the styles we add have higher priority over the predefined ones in paella-core and plugins. There is a function in the paella-core utilities that allows you to load stylesheets from JavaScript code asynchronously:
20 |
21 | ```js
22 | import { utils } from 'paella-core';
23 |
24 | ...
25 |
26 | await utils.loadStyle('custom-paella-styles.css');
27 | ```
28 |
29 | ## CSS variables
30 |
31 | ```css
32 | :root {
33 | --main-fg-color: white;
34 | --main-bg-color: rgba(0,0,0,0.8);
35 | --main-bg-color-hover: rgb(0,0,0);
36 | --secondary-bg-color: rgb(32,32,32);
37 | --secondary-bg-color-hover: rgba(32,32,32,0.8);
38 | --highlight-bg-color: #A00;
39 | --highlight-bg-color-hover: red;
40 | --main-bg-gradient: linear-gradient(0deg, rgba(32,32,32,1) 0%, rgba(32,32,32,0.49531687675070024) 72%, rgba(32,32,32,0.08355217086834732) 100%);
41 | --main-border-color: rgba(125,125,125,0.4);
42 | --video-container-background-color: #e4e4e4;
43 | --base-video-rect-background-color: #8a8a8a;
44 | }
45 |
46 | ```
47 |
48 | ## Modify default styles
49 |
50 | You can override the default `paella-core` styles by using the function described in the *Load styles* section `utils.loadStyle()`. Otherwise, to modify more complex aspects of the styles, proceed as you would with any website: use the browser's development tools to find out which styles you need to redefine.
51 |
52 |
--------------------------------------------------------------------------------
/doc/tutorial/quality_selector.md:
--------------------------------------------------------------------------------
1 | # Quality selector
2 |
3 | In the previous tutorial we have learned how to use different video formats, some of which (HLS, HLS Live and images) support various resolution levels. To change the resolution level we need to use the image quality selection plugin.
4 |
5 | The necessary plugin is already installed, because it belongs to the `paella-basic-plugins` package, so we only need to activate it:
6 |
7 | ```json
8 | {
9 | ...
10 | "plugins": {
11 | ...
12 | "es.upv.paella.qualitySelector": {
13 | "enabled": true,
14 | "side": "right",
15 | "order": "2",
16 | "showIcon": false,
17 | "showForSingleQuality": false,
18 | "menuTitle": "Video Quality",
19 | "parentContainer": "options"
20 | }
21 | }
22 | }
23 | ```
24 |
25 | We already know most of the configuration options we have added: `side`, `order`, `parentContainer` and `menuTitle` are explained in the [plugin tutorial](add_plugins.md).
26 |
27 | The `showIcon` option is specific to this plugin, and indicates whether we want to show an icon on the button that displays the video quality options. If `true`, then a white box icon containing the text of the selected resolution is displayed. If the video quality labels are somewhat long, it is preferable to leave the option to `false`, which will make the width of the button fit the size of the text it contains.
28 |
29 | If the `showForSingleQuality` option is set to `true`, then the quality selector is also shown if there is only a single quality available. This can be useful so that the user can at least the current quality (even if they cannot change it). Further, when the quality selector is in a sub-menu, it can be useful to always have that button to avoid ending up with a completely empty sub-menu.
30 |
31 | To test the new icon, you can use the HLS stream example we added in the [previous tutorial](video_formats.md):
32 |
33 | `http://localhost:5173/?id=hls-dual`
34 |
35 | As we have configured the button, we will have the video quality selector available in the `options` button group.
36 |
37 | 
38 |
39 |
40 |
41 | Previous tutorial: [Video manifest: formats](video_formats.md)
42 | Next tutorial: [Customize icons](customize_icons.md)
43 |
44 |
--------------------------------------------------------------------------------
/src/js/core/Events.js:
--------------------------------------------------------------------------------
1 |
2 | export default Object.freeze({
3 | PLAY: "paella:play",
4 | PAUSE: "paella:pause",
5 | STOP: "paella:stop",
6 | ENDED: "paella:ended",
7 | SEEK: "paella:seek",
8 | FULLSCREEN_CHANGED: "paella:fullscreenchanged",
9 | ENTER_FULLSCREEN: "paella:enterfullscreen",
10 | EXIT_FULLSCREEN: "paella:exitfullscreen",
11 | VOLUME_CHANGED: "paella:volumeChanged",
12 | TIMEUPDATE: "paella:timeupdate",
13 | TRIMMING_CHANGED: "paella:trimmingChanged",
14 | CAPTIONS_CHANGED: "paella:captionsChanged",
15 | CAPTIONS_ENABLED: "paella:captionsEnabled",
16 | CAPTIONS_DISABLED: "paella:captionsDisabled",
17 | BUTTON_PRESS: "paella:buttonPress",
18 | SHOW_POPUP: "paella:showPopUp",
19 | HIDE_POPUP: "paella:hidePopUp",
20 | MANIFEST_LOADED: "paella:manifestLoaded",
21 | STREAM_LOADED: "paella:streamLoaded",
22 | PLAYER_LOADED: "paella:playerLoaded",
23 | PLAYER_UNLOADED: "paella:playerUnloaded",
24 | RESIZE: "paella:resize",
25 | RESIZE_END: "paella:resizeEnd",
26 | LAYOUT_CHANGED: "paella:layoutChanged",
27 | PLAYBACK_RATE_CHANGED: "paella:playbackRateChanged",
28 | VIDEO_QUALITY_CHANGED: "paella:videoQualityChanged",
29 | HIDE_UI: "paella:hideUI",
30 | SHOW_UI: "paella:showUI",
31 | COOKIE_CONSENT_CHANGED: "paella:cookieConsentChanged",
32 | LOG: "paella:log"
33 | });
34 |
35 | export function bindEvent(player, event, callback, unregisterOnUnload = true) {
36 | player.__eventListeners__ = player.__eventListeners__ || {};
37 | player.__eventListeners__[event] = player.__eventListeners__[event] || [];
38 | player.__eventListeners__[event].push({
39 | callback,
40 | unregisterOnUnload
41 | });
42 | return callback;
43 | }
44 |
45 | export function triggerEvent(player, event, params = {}) {
46 | player.__eventListeners__ &&
47 | player.__eventListeners__[event] &&
48 | player.__eventListeners__[event].forEach(cbData => cbData.callback(params));
49 | }
50 |
51 | export function triggerIfReady(player, event, params = {}) {
52 | if (player.ready) {
53 | triggerEvent(player, event, params);
54 | }
55 | }
56 |
57 | export function unregisterEvents(player) {
58 | if (!player.__eventListeners__) {
59 | return;
60 | }
61 |
62 | for (const event in player.__eventListeners__) {
63 | player.__eventListeners__[event] = player.__eventListeners__[event].filter(cbData => cbData.unregisterOnUnload == false);
64 | player.log.debug("Unregister event: " + player.__eventListeners__[event]);
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/js/plugins/es.upv.paella.playPauseButton.js:
--------------------------------------------------------------------------------
1 | import ButtonPlugin from 'paella-core/js/core/ButtonPlugin';
2 | import Events, { bindEvent } from 'paella-core/js/core/Events';
3 |
4 | import defaultPlayIcon from 'paella-core/icons/play.svg';
5 | import defaultPauseIcon from 'paella-core/icons/pause.svg';
6 | import defaultReplayIcon from 'paella-core/icons/replay.svg';
7 |
8 | import PaellaCorePlugins from './PaellaCorePlugins';
9 |
10 | export default class PlayButtonPlugin extends ButtonPlugin {
11 |
12 | getPluginModuleInstance() {
13 | return PaellaCorePlugins.Get();
14 | }
15 |
16 | get name() {
17 | return super.name || "es.upv.paella.playPauseButton";
18 | }
19 |
20 | async load() {
21 | const playIcon = this.player.getCustomPluginIcon(this.name,"play") || defaultPlayIcon;
22 | const pauseIcon = this.player.getCustomPluginIcon(this.name,"pause") || defaultPauseIcon;
23 | const replayIcon = this.player.getCustomPluginIcon(this.name,"replay") || defaultReplayIcon;
24 | this.icon = playIcon;
25 | const titlePause = this.player.translate(this.config.ariaLabelPause || "pause");
26 | const titlePlay = this.player.translate(this.config.ariaLabelPlay || "play");
27 | const shortcutKey = this.config.ariaKeyshortcuts || "k";
28 | bindEvent(this.player, Events.PLAY, () => {
29 | this.icon = pauseIcon;
30 | this.button.ariaKeyshortcuts = shortcutKey;
31 | this.button.ariaLabel = titlePause;
32 | this.button.title = titlePause;
33 | });
34 | bindEvent(this.player, Events.PAUSE, () => {
35 | this.icon = playIcon;
36 | this.button.ariaKeyshortcuts = shortcutKey;
37 | this.button.ariaLabel = titlePlay;
38 | this.button.title = this.config.ariaLabelPause || titlePlay;
39 | });
40 | bindEvent(this.player, Events.ENDED, () => {
41 | this.icon = replayIcon;
42 | this.button.ariaKeyshortcuts = shortcutKey;
43 | this.button.ariaLabel = titlePlay;
44 | this.button.title = this.config.ariaLabelPause || titlePlay;
45 | });
46 | bindEvent(this.player, Events.STOP, () => {
47 | this.icon = playIcon;
48 | this.button.ariaKeyshortcuts = shortcutKey;
49 | this.button.ariaLabel = titlePlay;
50 | this.button.title = this.config.ariaLabelPause || titlePlay;
51 | });
52 | }
53 |
54 | async action() {
55 | if (await this.player.paused()) {
56 | await this.player.videoContainer.play();
57 | }
58 | else {
59 | await this.player.videoContainer.pause();
60 | }
61 | }
62 | }
--------------------------------------------------------------------------------
/doc/preferences.md:
--------------------------------------------------------------------------------
1 | # Preferences API (paella >= 1.19)
2 |
3 | The preferences API allows you to manage key/value type data, globally for the website or specific to the current video. Preference data can be stored in a cookie, via the [cookie consent API](cookie_consent.md), or using [data plugins](data_plugins.md).
4 |
5 | ## Configuration
6 |
7 | The preference settings are set in the configuration file, in the `preferences` section.
8 |
9 | ```json
10 | {
11 | ...
12 | "preferences": {
13 | "currentSource": "cookie",
14 | "sources": {
15 | "cookie": {
16 | "consentType": "necessary"
17 | },
18 | "dataPlugin": {
19 | "context": "preferences"
20 | }
21 | }
22 | }
23 | ...
24 | }
25 | ```
26 |
27 | - `sources`: sets the configuration of the different data sources to save the preferences. There are two different data sources:
28 | + `cookie`: cookie consent API preferences. Here you can configure the consent type to use. Note that if you store preferences that can identify the user (e.g., a unique user ID or email), you must use a consentType that can be disabled to comply with data protection regulations.
29 | + `dataPlugin`: configuration of the data source that uses data plugins. In this section you can configure the context that will be used to resolve the data plugin. For more information, see the documentation on [data plugins](data_plugins.md).
30 | - `currentSource`: sets which data source is to be used. The possible values are those defined in `sources`.
31 |
32 | ## Using the API
33 |
34 | This API is used internally in `paella-core` to store some settings, like for example the volume of the video, or the last known time instant for a video identifier. But it can also be used by external plugins
35 |
36 | You can also use the API through the `player.preferences` object. Preferences can be stored globally or specifically for the current video. If the property is global, it will be available for any video that is loaded, otherwise it will only be stored for that specific video. It is possible to store a global and a specific property with the same key, both will be stored.
37 |
38 | - `async player.preferences.set(key, value, { global = false } = {})`: Stores a value associated with a key.
39 | - `async player.preferences.get(key, { global = false } = {})`: Returns a value associated with a key. If the required property is not present, this function will return `undefined`.
40 |
--------------------------------------------------------------------------------
/doc/audio_video_plugin.md:
--------------------------------------------------------------------------------
1 | # Audio video plugin (paella-core >= 1.1)
2 |
3 | Allows playback of audio-only streams. To fill the video area in the player's playback view, the preview image defined in the [video manifest's](video_manifest.md) metadata is used. The preview image is a mandatory element of the video manifest, so if it is not defined, the plugin will generate an exception.
4 |
5 | To use this plugin you need to have the [audio canvas plugin](audio_canvas_plugin.md) activated.
6 |
7 | supported formats are those that the browser can play natively.
8 |
9 | ## Configuration
10 |
11 | To recognise audio-only videos, you need to activate the plugin in the settings.
12 |
13 | ```json
14 | {
15 | "plugins": {
16 | ...
17 | "es.upv.paella.audioVideoFormat": {
18 | "enabled": true,
19 | "order": 3
20 | },
21 | ...
22 | }
23 | }
24 | ```
25 |
26 | If there is more than one stream type in a stream within the video manifest that is compatible with the current configuration, the plugin whose value in the `order` attribute is lower will be used. For more information, see the [video format plugins](video_plugins.md) documentation.
27 |
28 | ## Video manifest format
29 |
30 | ```json
31 | {
32 | ...
33 | "streams": [
34 | {
35 | "sources": {
36 | "audio": [
37 | {
38 | "src": "audio/file/url.mp3"
39 | }
40 | ]
41 | },
42 | "role": "mainAudio",
43 | "content": "presenter",
44 | "canvas": ["audio"]
45 | }
46 | ]
47 | }
48 | ```
49 |
50 | - Due to the `paella-core` specifications, an audio-only stream must necessarily have the `mainAudio` role. The `role` property is not mandatory, but you should check the document about the [Stream Provider](stream_provider.md) to make sure that the stream will be chosen as the main audio stream.
51 | - For the same reason as the above, the video manifest can only contain one audio-only stream.
52 | - The `content` of the stream can be any that match the [video layout plugins](video_layout.md) configuration.
53 | - The canvas must be compatible with audio only streams. There is a predefined audio canvas in `paella-core` that can manage `audio` canvas, but you must be sure that [it is enabled in the configuration](audio_canvas_plugin.md). The default canvas used by `paella-core` is not compatible with audio only streams, so the `canvas` property is mandatory in audio only streams.
54 |
55 |
--------------------------------------------------------------------------------
/src/js/core/Preferences.js:
--------------------------------------------------------------------------------
1 |
2 | import PlayerResource from "./PlayerResource";
3 | import { setCookieIfAllowed, getCookie } from "./utils";
4 |
5 | const g_defaultPreferences = '{ "global": {}, "videos": {} }';
6 |
7 | async function load() {
8 | switch (this.source.name) {
9 | case "cookie":
10 | try {
11 | return JSON.parse(getCookie("preferences"));
12 | }
13 | catch (err) {
14 | return JSON.parse(g_defaultPreferences);
15 | }
16 | case "dataPlugin":
17 | try {
18 | const data = await this.player.data.read(this.source.context, {});
19 | return data || JSON.parse(g_defaultPreferences);
20 | }
21 | catch (err) {
22 | return JSON.parse(g_defaultPreferences);
23 | }
24 | }
25 | }
26 |
27 | async function save(data) {
28 | switch (this.source.name) {
29 | case "cookie":
30 | setCookieIfAllowed(this.player, this.source.consentType, "preferences", JSON.stringify(data));
31 | break;
32 | case "dataPlugin":
33 | await this.player.data.write(this.source.context, {}, data);
34 | break;
35 | }
36 | }
37 |
38 | export default class Preferences extends PlayerResource {
39 | constructor(player) {
40 | super(player);
41 | const { currentSource, sources } = player.config.preferences || {
42 | currentSource: "cookie",
43 | sources: {
44 | cookie: {
45 | consentType: "necessary"
46 | }
47 | }
48 | };
49 | this.source = sources[currentSource];
50 | this.source.name = currentSource;
51 | this._loaded = false;
52 |
53 | if (!this.source) {
54 | throw Error("Invalid configuration in preferences. Check the configuration file.");
55 | }
56 | }
57 |
58 | async set(key, value, { global = false } = {}) {
59 | const data = await load.apply(this);
60 | if (global) {
61 | data.global[key] = value;
62 | }
63 | else {
64 | data.videos[this.player.videoId] = data.videos[this.player.videoId] || {};
65 | data.videos[this.player.videoId][key] = value;
66 | }
67 | await save.apply(this, [data]);
68 | }
69 |
70 | async get(key, { global = false } = {}) {
71 | const data = await load.apply(this);
72 | if (global) {
73 | return data.global[key];
74 | }
75 | else {
76 | return data.videos[this.player.videoId] && data.videos[this.player.videoId][key] || undefined;
77 | }
78 | }
79 | }
--------------------------------------------------------------------------------
/src/js/captions/Captions.js:
--------------------------------------------------------------------------------
1 |
2 | import { timeToSeconds, secondsToTime } from 'paella-core/js/core/utils';
3 |
4 | export default class Captions {
5 | get cues() {
6 | return this._cues;
7 | }
8 |
9 | get label() {
10 | return this._label;
11 | }
12 |
13 | get language() {
14 | return this._lang;
15 | }
16 |
17 | set label(l) {
18 | this._label = l;
19 | }
20 |
21 | set language(l) {
22 | this._lang = l;
23 | }
24 |
25 | constructor(label = "", lang = "") {
26 | this._cues = [];
27 | this._label = label;
28 | this._lang = lang;
29 | }
30 |
31 | addCue({ label = "", start, end, captions }) {
32 | const cue = {
33 | label
34 | };
35 |
36 | if (typeof(captions) === "string") {
37 | cue.captions = [captions];
38 | }
39 | else if (Array.isArray(captions)) {
40 | cue.captions = captions;
41 | }
42 | else {
43 | throw Error("Invalid cue caption format: must be an array of strings or a string");
44 | }
45 |
46 | if (typeof(start) === "string") {
47 | cue.start = timeToSeconds(start);
48 | cue.startString = start;
49 | }
50 | else if (typeof(start) === "number") {
51 | cue.start = start;
52 | cue.startString = secondsToTime(start);
53 | }
54 | else {
55 | throw Error("Invalid cue timestamp format: must be a valid time string or a number of seconds");
56 | }
57 |
58 | if (typeof(end) === "string") {
59 | cue.end = timeToSeconds(end);
60 | cue.endString = end;
61 | }
62 | else if (typeof(end) === "number") {
63 | cue.end = end;
64 | cue.endString = secondsToTime(end);
65 | }
66 | else {
67 | throw Error("Invalid cue timestamp format: must be a valid time string or a number of seconds");
68 | }
69 |
70 | this._cues.push(cue);
71 | return cue;
72 | }
73 |
74 | getCue(instant) {
75 | if (typeof(instant) === "string") {
76 | instant = timeToSeconds(instant);
77 | }
78 | else if (typeof(instant) !== "number") {
79 | throw Error("Invalid time instant format getting cue");
80 | }
81 |
82 | let result = null;
83 | this._cues.some(cue => {
84 | if (instant>=cue.start && instant<=cue.end) {
85 | result = cue;
86 | return true;
87 | }
88 | });
89 | return result;
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/repository_test/repository/belmar-16-9-hls/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "metadata": {
3 | "duration": 900,
4 | "title": "Belmar 16:9 - 15 minutes (hls)",
5 | "preview": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/preview.png"
6 | },
7 | "streams": [
8 | {
9 | "sources": {
10 | "hls": [
11 | {
12 | "src": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/SCREEN.m3u8",
13 | "mimetype": "video/mp4"
14 | }
15 | ]
16 |
17 | },
18 | "content":"presentation"
19 | },
20 | {
21 | "sources": {
22 | "hls": [
23 | {
24 | "src": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/PRESENTER.m3u8",
25 | "mimetype": "video/mp4"
26 | }
27 | ]
28 | },
29 | "content":"presenter",
30 | "audioTag":"es"
31 | }
32 | ],
33 | "frameList": [
34 | {
35 | "mimetype": "image/jpg",
36 | "url": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/frame.0.jpg",
37 | "id": "frame_0",
38 | "thumb": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/thumb.0.jpg",
39 | "time": 0
40 | },
41 | {
42 | "mimetype": "image/jpg",
43 | "url": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/frame.420.jpg",
44 | "id": "frame_420",
45 | "thumb": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/thumb.420.jpg",
46 | "time": 420
47 | },
48 | {
49 | "mimetype": "image/jpg",
50 | "url": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/frame.660.jpg",
51 | "id": "frame_660",
52 | "thumb": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/thumb.660.jpg",
53 | "time": 660
54 | },
55 | {
56 | "mimetype": "image/jpg",
57 | "url": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/frame.870.jpg",
58 | "id": "frame_870",
59 | "thumb": "https://repository.paellaplayer.upv.es/belmar_16_9_hls/framelist/thumb.870.jpg",
60 | "time": 870
61 | }
62 | ],
63 | "captions": [
64 | {
65 | "lang": "de",
66 | "text": "Deutsch (automatische Übersetzung)",
67 | "format": "vtt",
68 | "url": "captions.de.vtt"
69 | },
70 | {
71 | "lang": "en",
72 | "text": "English (automatic transcription)",
73 | "format": "vtt",
74 | "url": "captions.en.vtt"
75 | },
76 | {
77 | "lang": "es",
78 | "text": "Español (traducción automática)",
79 | "format": "vtt",
80 | "url": "captions.es.vtt"
81 | }
82 | ]
83 | }
--------------------------------------------------------------------------------
/config/schema/v1/video-layout-plugin.schema.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json-schema.org/draft/2020-12/schema",
3 | "$id": "https://paellaplayer.upv.es/schema/v1/video-layout-plugin.schema.json",
4 | "title": "paella-core generic plugin settings",
5 | "description": "Common configuration options for paella-core plugins.",
6 | "type": "object",
7 | "properties": {
8 | "enabled": {
9 | "description": "Defines whether the plugin is active or not",
10 | "type": "boolean",
11 | "default": false
12 | },
13 | "order": {
14 | "description": "Within each plugin type, the loading order is defined by the 'order' attribute. The lower the order attribute is, the sooner the plugin will be loaded.",
15 | "type": "number",
16 | "default": 0
17 | },
18 | "description": {
19 | "description": "Descriptive text of the button, which can be displayed at different times depending on the paella-core configuration.",
20 | "type": "string"
21 | },
22 | "validContent": {
23 | "description": "It allows you to configure which contents will be displayed in a video layout, and identifies each configuration with a unique identifier, which will then be used to activate that configuration.",
24 | "type": "object",
25 | "properties": {
26 | "id": {
27 | "description": "Unique identifier for this content configuration",
28 | "type": "string"
29 | },
30 | "content": {
31 | "description": "Identifies the contents to be loaded for this configuration. The values in this list match the 'content' property of the streams in the video manifest.",
32 | "type": "array"
33 | },
34 | "icon": {
35 | "description": "Name of an SVG file that identifies the contents of this configuration. The path of the icon is relative to the location of the config.json file.",
36 | "type": "string"
37 | },
38 | "title": {
39 | "description": "Cadena de texto que identifica esta configuración.",
40 | "type": "string"
41 | }
42 | }
43 | },
44 | "dualVideoContentIds": {
45 | "description": "List of contentIds, ordered by preference, that identifies a dual stream video layout. It is used to activate a dual stream layout from this video layout, for example, by using an embedded button within the layout.",
46 | "type": "array"
47 | }
48 | }
49 | }
--------------------------------------------------------------------------------
/tests/trimming.spec.js:
--------------------------------------------------------------------------------
1 | const { test, expect } = require('@playwright/test');
2 | import { playVideo } from './utils';
3 |
4 | const loadPlayer = async (page) => {
5 | await page.evaluate(`
6 | const paella = new Paella('player-container', {});
7 |
8 | paella.loadManifest()
9 | .then(() => {})
10 | .catch(err => console.error(err));
11 | `);
12 | }
13 |
14 | test.describe("Trimming", () => {
15 | test("Seek in trimmed video", async ({page}) => {
16 | await page.goto('/?id=belmar-multiresolution-remote');
17 | await loadPlayer(page);
18 | await playVideo(page);
19 |
20 | await page.evaluate(`__paella_instances__[0].videoContainer.setTrimming({ start: 100, end: 160, enabled: true })`);
21 | await page.click('#playPauseButton');
22 | await page.click('.progress-indicator-container');
23 |
24 | const currentTime = await page.evaluate(`__paella_instances__[0].videoContainer.currentTime()`);
25 | await expect(currentTime).toBeCloseTo(30, 0);
26 | });
27 |
28 | test("Captions in trimmed video", async ({page}) => {
29 | await page.goto('/?id=webvtt-captions');
30 | await loadPlayer(page);
31 | await playVideo(page);
32 |
33 | await page.evaluate(`__paella_instances__[0].videoContainer.setTrimming({ start: 100, end: 160, enabled: true })`);
34 | await page.evaluate(`__paella_instances__[0].captionsCanvas.enableCaptions({ lang: 'es' })`);
35 | await page.evaluate(`__paella_instances__[0].videoContainer.setCurrentTime(32)`);
36 | await page.click('#playPauseButton');
37 |
38 | const elem = page.getByText('es un enfoque');
39 | await expect(elem).toBeVisible();
40 | });
41 |
42 | test("Enable and disable trimming", async ({page}) => {
43 | await page.goto('/?id=belmar-multiresolution-remote');
44 | await loadPlayer(page);
45 | await playVideo(page);
46 |
47 | await page.evaluate(`__paella_instances__[0].videoContainer.setTrimming({ start: 100, end: 160, enabled: true })`);
48 | await page.click('#playPauseButton');
49 | await page.click('.progress-indicator-container');
50 |
51 | let currentTime = await page.evaluate(`__paella_instances__[0].videoContainer.currentTime()`);
52 | await expect(currentTime).toBeCloseTo(30, 0);
53 |
54 | await page.evaluate(`__paella_instances__[0].videoContainer.setTrimming({ enabled: false })`);
55 | await page.click('.progress-indicator-container');
56 |
57 | currentTime = await page.evaluate(`__paella_instances__[0].videoContainer.currentTime()`);
58 | await expect(Math.floor(currentTime)).toBeCloseTo(454);
59 | });
60 | });
61 |
62 |
--------------------------------------------------------------------------------
/src/js/plugins/es.upv.paella.dfxpManifestCaptionsPlugin.js:
--------------------------------------------------------------------------------
1 |
2 | import CaptionsPlugin from 'paella-core/js/captions/CaptionsPlugin';
3 | import DFXPParser from 'paella-core/js/captions/DFXPParser';
4 | import PaellaCorePlugins from './PaellaCorePlugins';
5 |
6 | import { resolveResourcePath } from 'paella-core/js/core/utils';
7 |
8 | export default class DfxpManifestCaptionsPlugin extends CaptionsPlugin {
9 | getPluginModuleInstance() {
10 | return PaellaCorePlugins.Get();
11 | }
12 |
13 | get name() {
14 | return super.name || "es.upv.paella.dfxpManifestCaptionsPlugin";
15 | }
16 |
17 | async isEnabled() {
18 | const enabled = await super.isEnabled();
19 | return enabled &&
20 | this.player.videoManifest.captions &&
21 | this.player.videoManifest.captions.length>0;
22 | }
23 |
24 | async getCaptions() {
25 | const result = [];
26 | const p = [];
27 | this.player.videoManifest.captions.forEach(captions => {
28 | p.push(new Promise(async (resolve, reject) => {
29 | if (/dfxp/i.test(captions.format)) {
30 | const fileUrl = resolveResourcePath(this.player, captions.url);
31 | const fetchResult = await fetch(fileUrl);
32 | if (fetchResult.ok) {
33 | let text = await fetchResult.text();
34 | // fix malformed xml replacing the malformed characters with blank
35 | // Ignore no-control-regex is Ok for cleaning test per eslint docs
36 | // "If you need to use control character pattern matching, then you should turn this rule off."
37 | // ref https://eslint.org/docs/latest/rules/no-control-regex
38 | // eslint-disable-next-line no-control-regex
39 | text = text.replace(/[^\x09\x0A\x0D\x20-\xFF\x85\xA0-\uD7FF\uE000-\uFDCF\uFDE0-\uFFFD]/gm, '');
40 | text = text.replace(/&\w+;/gmi,'');
41 | text = text.replaceAll('
','');
42 |
43 | const parser = new DFXPParser(this.player, text);
44 | Object.entries(parser.captions).forEach(([lang,captions]) => {
45 | result.push(captions);
46 | });
47 | resolve();
48 | }
49 | else {
50 | reject();
51 | }
52 | }
53 | else {
54 | reject();
55 | }
56 | }));
57 | });
58 | await Promise.allSettled(p);
59 | return result;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/repository_test/repository/belmar-single/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "metadata": {
3 | "duration": 909.13,
4 | "title": "Belmar 15 minutes (multiresolution)",
5 | "preview": "https://repository.paellaplayer.upv.es/belmar-multiresolution/preview/belmar-preview.jpg",
6 | "related": [
7 | {
8 | "title":"Video with independent audio",
9 | "url":"index.html?id=dual-video-audio",
10 | "thumb":"https://repository.paellaplayer.upv.es/belmar-multiresolution/preview/belmar-preview.jpg",
11 | "id":"dual-video-audio"
12 | },
13 | {
14 | "title":"HLS video stream",
15 | "url":"index.html?id=hls",
16 | "thumb":"https://repository.paellaplayer.upv.es/belmar-multiresolution/preview/belmar-preview.jpg",
17 | "id":"hls"
18 | }
19 | ]
20 | },
21 | "streams": [
22 | {
23 | "sources": {
24 | "mp4": [
25 | {
26 | "src": "https://repository.paellaplayer.upv.es/belmar-multiresolution/media/720-presenter.mp4",
27 | "mimetype": "video/mp4; codecs=\"avc1.66.13, mp4a.40.2\"",
28 | "res": {
29 | "w": "1920",
30 | "h": "1080"
31 | }
32 | }
33 | ]
34 | },
35 | "content":"presenter",
36 | "role": "mainAudio"
37 | }
38 | ],
39 | "frameList": {
40 | "targetContent": "presenter",
41 | "frames": [
42 | {
43 | "id": "frame_854",
44 | "mimetype": "image/jpeg",
45 | "time": 854,
46 | "url": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/3d90109c-9608-44c1-8660-fce3f216d716/presentation_cut.jpg",
47 | "thumb": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/403de1df-aa66-44c0-b600-7683acf249b8/presentation_cut.jpg"
48 | },
49 | {
50 | "id": "frame_751",
51 | "mimetype": "image/jpeg",
52 | "time": 751,
53 | "url": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/598bd2ba-4fef-4886-884e-0ab82176f13d/presentation_cut.jpg",
54 | "thumb": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/73a6564c-b2d6-4896-b0f1-38129dde2c85/presentation_cut.jpg"
55 | },
56 | {
57 | "id": "frame_0",
58 | "mimetype": "image/jpeg",
59 | "time": 0,
60 | "url": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/7dc22bee-14f3-442c-8f0d-30d8b68c8604/presentation_cut.jpg",
61 | "thumb": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/46561b90-85b3-4ad7-a986-cdd9b52ae02b/presentation_cut.jpg"
62 | },
63 | {
64 | "id": "frame_363",
65 | "mimetype": "image/jpeg",
66 | "time": 363,
67 | "url": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/d3194d9b-8f65-403b-a639-9de4311a283b/presentation_cut.jpg",
68 | "thumb": "https://repository.paellaplayer.upv.es/belmar-multiresolution/slides/4505b6d9-8a0c-4809-ade3-840e743188ed/presentation_cut.jpg"
69 | }
70 | ]
71 | }
72 | }
--------------------------------------------------------------------------------
/doc/progress_indicator_plugin.md:
--------------------------------------------------------------------------------
1 | # Progress indicator plugin (paella-core >= 1.2)
2 |
3 | They allow content to be drawn on the playback bar. For this purpose, two canvases are used, which are accessed by all plugins in a shared way. One canvas is located below the video progress indicator, while the other is located above it. These canvases are called background canvas and foreground canvas respectively.
4 |
5 | The playbar plugins contain two drawing functions for each canvas. Note that other plugins may have previously drawn content, so no delete operations should be performed. We can't assume that the context will come with a certain configuration, so we must always specify all the characteristics of the operations (colours, text fonts, line sizes, etc.).
6 |
7 | ```js
8 | export default class MyProgressIndicatorPlugin extends ProgressIndicatorPlugin {
9 |
10 | drawForeground(context, width, height, isHover) {
11 | context.fillStyle = 'green';
12 | context.fillRect(2, 2, width - 4, 2);
13 | }
14 |
15 | drawBackground(context, width, height, isHover) {
16 | context.fillStyle = 'green';
17 | context.fillRect(2, height - 6, width - 4, 2);
18 | }
19 | }
20 | ```
21 |
22 | The draw methods of the canvas plugins will be called every time an event occurs that changes the size of the playbar. If we want to force a redraw from a plugin, we can call the `requestUpdate()` function of the plugin itself, or the `requestUpdateCanvas()` function of the `progressIndicator` object. The second case can occur when we have plugins of other types that interact with progress bar plugins. For example: we can have a button that saves a timestamp in the video, which would be a plugin of type button, and with a PropgressIndicatorPlugin plugin we would draw these timestamps.
23 |
24 | ```js
25 | // Request update from a plugin instance
26 | export default class OtherProgressIndicatorPlugin extends ProgressIndicatorPlugin {
27 |
28 | ...
29 |
30 | init() {
31 | this.player.bindEvent(Events.PLAY, () => this.requestUpdate());
32 | }
33 | }
34 |
35 | ...
36 |
37 | // Request update using the player instance
38 | ...
39 | player.playbackBar.progressIndicator.requestUpdateCanvas();
40 | ```
41 |
42 | ## Progress bar size
43 |
44 | We can use a progress indicator plugin to modify the size of the playback bar. The progress bar plugins contains two properties that define the minimum height of the playback bar when the mouse cursor is outside and inside the bar:
45 |
46 | ```js
47 | export default class OtherProgressIndicatorPlugin extends ProgressIndicatorPlugin {
48 | get minHeight() { return 30; }
49 |
50 | get minHeightHover() { return 40; }
51 | }
52 | ```
53 |
54 | You can use these APIs to, for example, draw a visitor graph over the playback bar. You can use `minHeightHover` to enlarge the size of the bar when the mouse hovers over it.
55 |
56 |
--------------------------------------------------------------------------------
/doc/playback_bar.md:
--------------------------------------------------------------------------------
1 | # Playback bar
2 |
3 | The playbar is the user interface component that is displayed at the bottom of the player container, and provides the space to house the timeline bar and buttons that are added to the player via [button plugins](button_plugin.md).
4 |
5 | The `playbackBar` object is accessible through the paella core instance, but note that this object will only be accessible after the video loading is complete:
6 |
7 | ```js
8 | ...
9 | const player = new Paella('my-player-container', initData);
10 | player.playbackBar // undefined
11 |
12 | player.bindEvent(player.Events.PLAYER_LOADED, () => {
13 | player.playbackBar // Ok
14 | });
15 |
16 | player.loadManifest()
17 | .then(() => console.log("Manifest loaded))
18 | .catch(err => console.error(err));
19 | ```
20 |
21 | The playback bar object only contains a public accessible API that allows you to enable or disable it:
22 |
23 | **`playbackBar.enable` (read/write, `paella-core >= 1.10.x`):** Enables or disables the playback bar. Disabling the playback bar causes it to be hidden in the user interface, but internally it will continue to function: the status of the timeline will be updated and the plugins it contains will remain active.
24 |
25 | The following code snippet shows how to configure the player to disable the playback bar. Note that the last parameter of `bindEvent` is set to `false`, because we don't want the player to unregister this event if the player is unloaded with the `async player.unload()` API. For more information on the `bindEvent` function, see the documentation on [events](events.md).
26 |
27 | ```js
28 | player.bindEvent(player.Events.PLAYER_LOADED, () => {
29 | player.playbackBar.enabled = false;
30 | }, false);
31 | ```
32 |
33 | ## Progress indicator visibility (paella-core >= 1.25)
34 |
35 | On some occasions we may want to modify the visibility of the video progress indicator, for example in live broadcasts. The progress indicator provides several functions to control the visibility of the timeline and the current time indicator of the video:
36 |
37 | - **`playbackBar.progressIndicator.hideProgressContainer()`:** Hides the progress indicator bar.
38 | - **`playbackBar.progressIndicator.hideProgressTimer()`:** Hides the current timer text.
39 | - **`playbackBar.progressIndicator.hideTimeLine()`:** Hides the progress indicator bar and the current time text.
40 | - **`playbackBar.progressIndicator.showProgressContainer()`:** Shows the progress indicator bar.
41 | - **`playbackBar.progressIndicator.showProgressTimer()`:** Shows the current time text.
42 | - **`playbackBar.progressIndicator.showTimeLine()`:** Shows the progress indicator bar and the current time text.
43 |
44 | ## Customization
45 |
46 | You can customize several elements of the playback and progress indication using CSS styles and the player configuration. Check [here how to customize it](progress_indicator_customization.md).
47 |
48 |
--------------------------------------------------------------------------------
/doc/debug.md:
--------------------------------------------------------------------------------
1 | # Debug paella player
2 |
3 | There are three cases where we may want to debug a `paella-core` based video player:
4 |
5 | - If you are developing your own player.
6 | - If you are developing plugins for `paella-core`.
7 | - If you are working on a fork of `paella-core`.
8 |
9 | ## Debug your own player
10 |
11 | Like many other libraries, both `paella-core` and the rest of the Universidad Politécnica de Valencia plug-in libraries include `.map` files to facilitate development. You can use the following example projects to set up the debugging environment with `webpack` and `rollup`:
12 |
13 | - [Paella Reference Player](https://github.com/polimediaupv/paella-player) (webpack): Our reference standalone player.
14 | - [Paella Player website sources](https://github.com/polimediaupv/paellaplayer.upv.es) (rollup, svelte): The source code of Paella Player website.
15 | - [Svelte tutorial](paella_svelte.md) (rollup, svelte): A tutorial on how to integrate `paella-core` in a Svelte website.
16 | - [React tutorial](paella_react.md) (webpack, react): A tutorial on how to integrate `paella-core` in a React website.
17 |
18 | ## Debug a plugin repository
19 |
20 | You can use the `paella-core` plugin repositories of the Universidad Politécnica de Valencia as a basis:
21 |
22 | - [`paella-basic-plugins`](https://github.com/polimediaupv/paella-basic-plugins)
23 | - [`paella-slide-plugins`](https://github.com/polimediaupv/paella-slide-plugins)
24 | - [`paella-zoom-plugin`](https://github.com/polimediaupv/paella-zoom-plugin)
25 | - [`paella-user tracking`](https://github.com/polimediaupv/paella-user-tracking)
26 |
27 | You can also follow our [tutorial on how to create you own plugin repository](plugin_module_tutorial.md). All plugin repositories work in the same way. They are created using Webpack, and have a file in the path `src/index.js`, which is the main library file, and another file `src/debug.js`, which is used to create a debug player within the plugin repository itself. All the above repositories are configured to use the `paella-core.js.map` file to debug the test player. There are two `npm` scripts configured in the `package.json` file that launch each of the two development environments:
28 |
29 | - `npm run dev`: launch the debug environment from the `src/debug.js` file.
30 | - `npm run build`: launches the library build, which will be placed in the `dist` folder. The build also generates the `.map` file corresponding to the library.
31 |
32 | ## Debug your own `paella-core` fork
33 |
34 | The `paella-core` repository works just like the other plugin repositories, including a `src/index.js` file to build the library, and a `src/debug.js` file to debug the player core library. It also includes the same `npm` scripts:
35 |
36 | - `npm run dev`: launch the debug environment from the `src/debug.js` file.
37 | - `npm run build`: launches the library build, which will be placed in the `dist` folder. The build also generates the `.map` file corresponding to the library.
38 |
39 |
--------------------------------------------------------------------------------
/doc/captions_plugins.md:
--------------------------------------------------------------------------------
1 | ## Captions plugins
2 |
3 | Integrates the captions API defined in [CaptionsCanvas](captions.md) with the Paella Player plugin system, to load captions into the video.
4 |
5 | Caption plugins only have one specific method, which is normally used together with the two generic plugin methods:
6 |
7 | - `async getCaptions()`: returns an array with objects of type [Caption](captions.md).
8 | - `async isEnabled()` and `async load()`: can be used to determine if the video has captions, and to get them from the backend.
9 |
10 | Caption plugins have the responsibility to determine if a video has captions, for example, from the `captions` attribute of the [video manifest](video_manifest.md). If your service's backend provides other methods for loading captions, the way to get them is via a caption plugin.
11 |
12 | In addition, the subtitle plugins are also in charge of loading and decoding the subtitles in whatever format, and generating the `Captions` objects from there.
13 |
14 | For subtitles in `webvtt` format, there is a utility to load this format and convert it into a `Captions` object:
15 |
16 | ```javascript
17 | import { WebVTTParser } from 'paella-core';
18 |
19 | ...
20 | const parser = WebVTTParser(vttText);
21 | const { captions } = parser;
22 |
23 | console.log(captions.cues);
24 | ```
25 |
26 |
27 |
28 | ## Example: vttManifestCaptionsPlugin
29 |
30 | **es.upv.paella.vttManifestCaptionsPlugin.js:**
31 |
32 | ```javascript
33 |
34 | import CaptionsPlugin from 'paella-core/js/captions/CaptionsPlugin';
35 | import WebVTTParser from 'paella-core/js/captions/WebVTTParser';
36 |
37 | import { resolveResourcePath } from 'paella-core/js/core/utils';
38 |
39 | export default class VttManifestCaptionsPlugin extends CaptionsPlugin {
40 | async isEnabled() {
41 | const enabled = await super.isEnabled();
42 | return enabled &&
43 | this.player.videoManifest.captions &&
44 | this.player.videoManifest.captions.length>0;
45 | }
46 |
47 | async getCaptions() {
48 | const result = [];
49 | const p = [];
50 | this.player.videoManifest.captions.forEach(captions => {
51 | p.push(new Promise(resolve => {
52 | if (/vtt/i.test(captions.format)) {
53 | const fileUrl = resolveResourcePath(this.player, captions.url);
54 | console.log(fileUrl);
55 | fetch(fileUrl)
56 | .then(fetchResult => {
57 | if (fetchResult.ok) {
58 | return fetchResult.text();
59 | }
60 | else {
61 | reject();
62 | }
63 | })
64 | .then((text) => {
65 | const parser = new WebVTTParser(text);
66 | parser.captions.label = captions.text;
67 | parser.captions.language = captions.lang;
68 | result.push(parser.captions);
69 | resolve();
70 | })
71 |
72 | }
73 | }));
74 | });
75 | await Promise.all(p);
76 | return result;
77 | }
78 | }
79 | ```
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/doc/time_line_pop_up.md:
--------------------------------------------------------------------------------
1 | # TimeLine pop up
2 |
3 | The `TimeLinePopUp` class allows to display a horizontal container that is placed at the top of the timeline. It is intended to place content that is related or interacts with the time of the video: for example, it can be used to display a list of frames extracted from the video, and when clicking on one of them the time instant of the video is placed at the second in which that frame appears.
4 |
5 | It should not be used to display other types of content: for other types of content it is more convenient to use the [PopUps](pop_up_api.md) API.
6 |
7 | Note that you can use pop up plugins to launch TimeLinePopUp windows, and in most cases this will be sufficient. This API is only indicated if you have to invoke it manually from JavaScript code.
8 |
9 | ## Example
10 |
11 | ```js
12 | import { TimeLinePopUp, createElementWithHtmlText } from 'paella-core'
13 |
14 | ...
15 |
16 | const myPopUp = new TimeLinePopUp(player, null);
17 | const content = createElementWithHtmlText(`
18 |
19 |
Hello World!
20 |
21 | `);
22 | const closeButton = createElementWithHtmlText('', content);
23 | closeButton.addEventListener('click', evt => myPopUp.hide());
24 | myPopUp.setContent(content);
25 | myPopUp.show();
26 | ```
27 |
28 | ## Constructor
29 |
30 | The constructor receives only two parameters:
31 |
32 | - player: instance of paella-core to which the pop up is associated.
33 | - contextObject: object that invoked the pop up. Internally it is not used for anything else but to trigger the `Events.SHOW_POPUP` event, so that whoever catches that event can know who has triggered the call.
34 |
35 | No parameters are set for position and size: the position will always be above the playback bar, while the size will be 100% of the width of the playback bar, and the height will be defined by the content.
36 |
37 | ## Methods
38 |
39 | **`static Unload(player)`:**, **`static HideUserInterface(player)`** and **`static ShowUserInterface(player)`:** these are internal `paella-core` methods and should not be used.
40 |
41 | **`static HideAll(player)`:** Hides all timeline pop ups that are currently displayed. Generally only one pop up is shown at a time, but the method has been added with this name because it is not excluded that in the future more than one can be shown. It receives as parameter the instance of `paella-core` to which the pop up is associated.
42 |
43 | **`show(uiTimerTriggered = false)`:** Displays a pop up. The `uiTimerTriggered` parameter is used to inform if the `SHOW_POPUP` event has already been fired. If `true`, the event will not be fired again.
44 |
45 | **`hide(uiTimerTriggered)`:** Hides the pop up. The `uiTimerTriggered` parameter is used for the same as in the case of the `show` method, but controls the `events.HIDE_POPUP` event.
46 |
47 | **`setContent(content)`:** receives as parameter a DOM element to be used as pop up content. Calling `setContent()` removes any content that may have been previously present.
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/config/schema/v1/button-plugin.schema.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json-schema.org/draft/2020-12/schema",
3 | "$id": "https://paellaplayer.upv.es/schema/v1/button-plugin.schema.json",
4 | "title": "paella-core button plugin settings",
5 | "description": "Common configuration options for paella-core button plugins.",
6 | "type": "object",
7 | "properties": {
8 | "enabled": {
9 | "description": "Defines whether the plugin is active or not.",
10 | "type": "boolean",
11 | "default": false
12 | },
13 | "order": {
14 | "description": "Within each plugin type, the loading order is defined by the 'order' attribute. The lower the order attribute is, the sooner the plugin will be loaded.",
15 | "type": "number",
16 | "default": 0
17 | },
18 | "id": {
19 | "description": "Returns the value of the 'id' attribute that the '