paella-core/doc/paella_svelte.md

Multistream HTML video player

## Embedding Paella Player in a React application

You can download the source code of this tutorial from [https://github.com/polimediaupv/paella-svelte-tutorial](https://github.com/polimediaupv/paella-svelte-tutorial).



## Create the project

Create a Svelte template and install `paella-core`

```sh
npx degit sveltejs/template paella-svelte
cd paella-svelte
npm install
npm install --save paella-core
```



## Add the player

Edit `src/App.svelte` to create the player:

```svelte
<script>
	import { onMount } from 'svelte';
	import { Paella } from 'paella-core';

	onMount(async () => {
		const paella = new Paella('player-container');

		paella.loadManifest()
			.then(() => console.log("Done"))
			.catch(err => console.log(err));
	});
</script>

<main>
	<h1>Hello from Svelte</h1>
	<div id="player-container"></div>
</main>

<style>
	div {
		width: 800px;
		height: 600px;
	}
</style>
```



## Create the resource files

Create the `config.json` and `data.json` in the `public` directory:

**public/config/config.json:**

```json
{
	"repositoryUrl": "manifest",
	"manifestFileName": "data.json",

	"defaultLayout": "presenter-presentation",
	
	"plugins": {
		"es.upv.paella.singleVideo": {
			"enabled": true,
			"validContent": [
				{ "id": "presenter", "content": ["presenter"], "icon": "present-mode-2.svg", "title": "Presenter" },
				{ "id": "presentation", "content": ["presentation"], "icon": "present-mode-1.svg", "title": "Presentation" },
				{ "id": "presenter-2", "content": ["presenter-2"], "icon": "present-mode-1.svg", "title": "Presentation" }
			]
		},
		"es.upv.paella.dualVideo": {
			"enabled": true,
			"validContent": [
				{ "id": "presenter-presentation", "content": ["presenter","presentation"], "icon": "present-mode-3.svg", "title": "Presenter and presentation" },
				{ "id": "presenter-2-presentation", "content": ["presenter-2","presentation"], "icon": "present-mode-3.svg", "title": "Presenter and presentation" },
				{ "id": "presenter-presenter-2", "content": ["presenter","presenter-2"], "icon": "present-mode-3.svg", "title": "Presenter and presentation" }
			]
		},
		"es.upv.paella.mp4VideoFormat": {
			"enabled": true,
			"order": 1
		},
		"es.upv.paella.playPauseButton": {
			"enabled": true,
			"order": 1
		}
	}
}
```



**public/manifest/test/data.json:**

```json
{
	"metadata": {
		"duration": 909.13,
		"title": "Belmar 15 minutes (multiresolution)",
		"preview": "https://repository.paellaplayer.upv.es/belmar-multiresolution/preview/belmar-preview.jpg"
	},
	"streams": [
		{
			"sources": {
				"mp4": [
					{
						"src": "https://repository.paellaplayer.upv.es/belmar-multiresolution/media/720-presentation.mp4",
						"mimetype": "video/mp4",
						"res": {
							"w": "1442",
							"h": "1080"
						}
					}
				]
			},
			"preview": "https://repository.paellaplayer.upv.es/belmar-multiresolution/preview/presentation_cut.jpg",
			"content":"presentation"
		},
		{
			"sources": {
				"mp4": [
					{
						"src": "https://repository.paellaplayer.upv.es/belmar-multiresolution/media/720-presenter.mp4",
						"mimetype": "video/mp4",
						"res": {
							"w": "1920",
							"h": "1080"
						}
					}
				]
			},
			"preview": "https://repository.paellaplayer.upv.es/belmar-multiresolution/preview/presenter_cut.jpg",
			"content":"presenter"
		}
	]
}
```

## Extra: load SVG icons

The icon customization APIs require SVG images to be used, as a text string ([define custom plugin icons](plugin_icon_customization.md)). It is possible to load icons in SVG format with Rollup using the `rollup-plugin-svg-import` plguin.

**rollupu.config.js:**

```js
import svg from 'rollup-plugin-svg-import'

export default {
	...
	plugins: [
		svg: {
			// Queremos que los iconos estén en formato texto SVG, by default
			// this plugin converts the icon in a DOM tree.
			stringify: true 
		},
		...
	]
}
```

```js
import myCustomIcon from './myCustomIcon.svg'
...
player.addCustomPluginIcon("es.upv.paella.aCustomizableButtonPlugin","iconName",myCustomIcon);
```

## That's all!

Run the player:

```sh
npm run dev
```

And open it in the following URL: [http://localhost:5000?id=test](http://localhost:5000?id=test).