Add v1.0.0

.dockerignore

@@ -0,0 +1,11 @@
+Dockerfile*
+.dockerignore
+.editorconfig
+.gitignore
+README.md
+node_modules/
+.yarn/cache
+.eslintcache
+.github
+.github_build
+.build

.editorconfig

@@ -0,0 +1,23 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+spaces_around_brackets = outside
+
+[*.js]
+max_line_length = 160
+
+[*.md]
+trim_trailing_whitespace = false
+indent_style = space
+
+[*.patch]
+indent_style = space

.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.VSCodeCounter
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+messages.mo
+.eslintcache

.linguirc

@@ -0,0 +1,10 @@
+{
+   "catalogs": [{
+	   "path": "src/locales/{locale}/messages",
+	   "include": ["src/"],
+	   "exclude": ["**/node_modules/**"]
+	 }],
+   "format": "po",
+   "sourceLocale": "en",
+   "locales": ["en", "de", "fr", "it", "pt", "es"]
+}

.prettierignore

@@ -0,0 +1 @@
+src/locales

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "semi": true,
+    "jsxSingleQuote": false,
+    "singleQuote": true
+}

.yarnrc.yml

@@ -0,0 +1,4 @@
+packageExtensions:
+  react-scripts@*:
+    peerDependencies:
+      eslint-config-react-app: "*"

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:17-alpine3.15
+
+WORKDIR /ui
+
+COPY . /ui
+
+RUN yarn install && \
+	npm run build
+
+EXPOSE 3000
+CMD [ "npm", "run", "start" ]

README.md

@@ -1,2 +1,19 @@
-# restreamer-ui
-The Restreamer is a complete streaming server solution for self-hosting. It has a visually appealing user interface and no ongoing license costs. Upload your live stream to YouTube, Twitch, Facebook, Vimeo, or other streaming solutions like Wowza. Receive video data from OBS and publish it with the internal RTMP server.
+# Restreamer-UI
+
+The user interface of the Restreamer for the connection to the Core application.
+
+- React
+- Material-UI (MUI)
+
+## Development 
+
+```sh
+yarn install
+yarn run start
+```
+
+Connect the UI to datarhei Core:
+http://localhost:3000?address=http://core-ip:core-port/
+
+## License
+See the [LICENSE](./LICENSE) file for licensing information.

package.json

@@ -0,0 +1,97 @@
+{
+	"name": "restreamer-ui",
+	"version": "1.0.0",
+	"bundle": "restreamer-v2.0.0",
+	"private": false,
+	"dependencies": {
+		"@auth0/auth0-spa-js": "^1.16.1",
+		"@clappr/core": "^0.4.17",
+		"@clappr/hlsjs-playback": "^0.5.3",
+		"@clappr/plugins": "^0.4.10",
+		"@clappr/stats-plugin": "^0.2.0",
+		"@emotion/react": "^11.5.0",
+		"@emotion/styled": "^11.3.0",
+		"@fontsource/dosis": "^4.5.1",
+		"@fontsource/roboto": "^4.5.5",
+		"@fortawesome/fontawesome-svg-core": "^6.1.1",
+		"@fortawesome/free-brands-svg-icons": "^5.15.2",
+		"@fortawesome/free-solid-svg-icons": "^5.15.2",
+		"@fortawesome/react-fontawesome": "^0.1.14",
+		"@lingui/core": "^3.13.2",
+		"@lingui/macro": "^3.4.0",
+		"@lingui/react": "^3.4.0",
+		"@material-ui/core": "^4.11.3",
+		"@material-ui/icons": "^4.11.2",
+		"@material-ui/lab": "^4.0.0-alpha.57",
+		"@mui/icons-material": "^5.0.4",
+		"@mui/lab": "^5.0.0-alpha.51",
+		"@mui/material": "^5.0.4",
+		"@mui/styles": "^5.0.1",
+		"@testing-library/dom": ">=5",
+		"@testing-library/jest-dom": "^4.2.4",
+		"@testing-library/react": "^9.5.0",
+		"@testing-library/user-event": "^7.2.1",
+		"babel-plugin-macros": "2 || 3",
+		"eslint": "^7.19.0",
+		"handlebars": "^4.7.6",
+		"hls.js": "^0.13.2",
+		"jwt-decode": "^3.1.2",
+		"make-plural": "^7.1.0",
+		"react": "^17.0.2",
+		"react-colorful": "^5.5.1",
+		"react-device-detect": "^2.2.2",
+		"react-dom": "^17.0.2",
+		"react-router-dom": "^6.2.1",
+		"react-scripts": "4.0.3",
+		"semver": "^7.3.4",
+		"typescript": "^3.9.7",
+		"url-parse": "^1.5.10",
+		"uuid": "^8.3.2",
+		"video.js": "^7.18.1",
+		"videojs-overlay": "^2.1.5"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts --optimize-for-size build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"i18n-extract": "lingui extract",
+		"i18n-extract:clean": "lingui extract --clean",
+		"i18n-compile": "lingui compile",
+		"format": "prettier --write ./src"
+	},
+	"eslintConfig": {
+		"extends": "react-app",
+		"overrides": [
+			{
+				"files": [
+					"**/*.js"
+				],
+				"rules": {
+					"import/no-anonymous-default-export": "off"
+				}
+			}
+		]
+	},
+	"browserslist": {
+		"production": [
+			"> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11, maintained node versions"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"@babel/core": "^7.12.10",
+		"@lingui/cli": "^3.4.0",
+		"babel-core": "^7.0.0-bridge.0",
+		"prettier": "2.2.1",
+		"react-error-overlay": "^6.0.11"
+	},
+	"resolutions": {
+		"[email protected]": "patch:url-parse@npm:1.5.3#.yarn/patches/url-parse-npm-1.5.3-225ab9cae7.patch",
+		"react-error-overlay": "6.0.9"
+	}
+}

public/_player/README.md

@@ -0,0 +1,21 @@
+# Player Templates
+
+Affected files: `(clappr|videojs)/player.html`, `oembed.json`, and `oembed.xml`.
+
+The templates are interpreted with [handlebars](https://handlebarsjs.com/).
+
+The following placeholders will be replaced by their respective value:
+
+| Placeholder | Description                               |
+| ----------- | ----------------------------------------- |
+| name        | The user-given name of the ingest.        |
+| description | The user-given description of the ingest. |
+| iframecode  | The HTML iframe code for the player.      |
+| poster      | The URL to the latest snapshot image.     |
+| width       | The width of the video/poster.            |
+| height      | The height of the video/poster.           |
+
+# File list
+
+Each player directory has a `files.txt` that contains a list of files, that need to
+be copied besides the `player.html`.

public/_player/clappr/files.txt

@@ -0,0 +1,4 @@
+dist/clappr.min.js.map
+dist/clappr.min.js
+dist/clappr-stats.min.js
+dist/clappr-nerd-stats.min.js

public/_player/clappr/player.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="{{description}}">
+	<meta name="author" content="datarhei restreamer">
+	<title>{{name}}</title>
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+	<link rel="alternate" type="application/json+oembed" href="channels/{{channelid}}/oembed.json" title="{{name}}">
+	<link rel="alternate" type="text/xml+oembed" href="channels/{{channelid}}/oembed.xml" title="{{name}}">
+	<script src="channels/{{channelid}}/config.js"></script>
+	<script src="player/clappr/dist/clappr.min.js"></script>
+	<script src="player/clappr/dist/clappr-stats.min.js"></script>
+	<script src="player/clappr/dist/clappr-nerd-stats.min.js"></script>
+	<style>
+		.player-poster[data-poster] .poster-background[data-poster] {
+			height: initial !important;
+		}
+	</style>
+</head>
+<body>
+<div id="player" style="position:absolute;top:0;right:0;bottom:0;left:0"></div>
+<script>
+	function getQueryParam(key, defaultValue) {
+		var query = window.location.search.substring(1);
+		var vars = query.split("&");
+		for(var i = 0; i < vars.length; i++) {
+			var pair = vars[i].split("=");
+			if(pair[0] == key) {
+				return pair[1];
+			}
+		}
+		return defaultValue;
+	}
+
+	function convertBoolParam(key, defaultValue) {
+		var val = getQueryParam(key, defaultValue);
+		return val === true || val === "true" || val === "1" || val === "yes" || val === "on";
+	}
+
+	function convertColorParam(parameter, defaultColor) {
+		var re = new RegExp("^#([0-9a-f]{3}|[0-9a-f]{6})$");
+		var c = getQueryParam(parameter, defaultColor);
+		// decode color as # has to be represented by %23
+		var c = decodeURIComponent(c);
+		// if color was given without leading #, prepend it
+		if (!String(c).startsWith("#")) c = "#" + c;
+
+		if (re.test(c)) {
+			return c;
+		} else {
+			return defaultColor;
+		}
+	}
+
+	var autoplay = convertBoolParam("autoplay", playerConfig.autoplay);
+	var mute = convertBoolParam("mute", playerConfig.mute);
+	var statistics = convertBoolParam("stats", playerConfig.statistics);
+	var color = convertColorParam("color", playerConfig.color.buttons);
+
+	var plugins = [];
+
+	if(statistics == true) {
+		plugins.push(ClapprNerdStats);
+		plugins.push(ClapprStats);
+	}
+
+	var config = {
+		source: playerConfig.source,
+		parentId: '#player',
+		baseUrl: 'clappr/',
+		plugins: plugins,
+		poster: playerConfig.poster + '?t=' + String(new Date().getTime()),
+		mediacontrol: {
+			seekbar: playerConfig.color.seekbar,
+			buttons: color
+		},
+		height: '100%',
+		width: '100%',
+		disableCanAutoPlay: true,
+		autoPlay: autoplay,
+		mute: mute,
+		clapprStats: {
+			runEach: 1000,
+			onReport: (metrics) => {},
+		},
+		clapprNerdStats: {
+			shortcut: ['command+shift+s', 'ctrl+shift+s'],
+			iconPosition: 'top-right'
+		}
+	};
+
+	if(playerConfig.logo.image.length != 0) {
+		config.watermark = playerConfig.logo.image;
+		config.position = playerConfig.logo.position;
+
+		if(playerConfig.logo.link.length != 0) {
+			config.watermarkLink = playerConfig.logo.link;
+		}
+	}
+
+	var player = new window.Clappr.Player(config);
+	var posterPlugin = player.core.mediaControl.container.getPlugin('poster');
+	player.on(window.Clappr.Events.PLAYER_STOP, function updatePoster () {
+		posterPlugin.options.poster = playerConfig.poster + '?t=' + String(new Date().getTime());
+		posterPlugin.render();
+	});
+</script>
+</body>
+</html>

public/_player/oembed.json.in

@@ -0,0 +1,17 @@
+{
+	"version": "1.0",
+	"type": "video",
+	"title": {{{name}}},
+	"description": {{{description}}},
+	"author_name": {{{author_name}}},
+	"author_url": {{{author_url}}},
+	"provider_name": "datarhei Restreamer",
+	"provider_url": "https://datarhei.org",
+	"license": {{{license}}},
+	"html": {{{iframecode}}},
+	"width": {{width}},
+	"height": {{height}},
+	"thumbnail_url": {{{poster_url}}},
+	"thumbnail_width": {{width}},
+	"thumbnail_height": {{height}}
+}

public/_player/oembed.xml.in

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<oembed>
+	<version>1.0</version>
+	<type>video</type>
+	<title>{{title}}</title>
+	<description>{{description}}</description>
+	<author_name>{{author_name}}</author_name>
+	<author_url>{{author_url}}</author_url>
+	<provider_name>datarhei Restreamer</provider_name>
+	<provider_url>https://datarhei.org</provider_url>
+	<license>{{license}}</license>
+	<html>{{iframecode}}</html>
+	<width>{{width}}</width>
+	<height>{{height}}</height>
+	<thumbnail_url>{{poster_url}}</thumbnail_url>
+	<thumbnail_width>{{width}}</thumbnail_width>
+	<thumbnail_height>{{height}}</thumbnail_height>
+</oembed>