add environment variable to set custom movie backend url

edit readme
handle enter event on AuthenticationPage

README.md

@@ -22,24 +22,30 @@ and in dark mode:
 ![](https://i.ibb.co/xzhdsbJ/Screenshot-20200812-172926.png)
 
 ## Installation
-First of all clone the repository.
 
-`git clone https://gitlab.heili.eu/lukas/openmediacenter.git`
+Download the latest release .deb file from the Releases page and install it via `apt install ./OpenMediaCenter-0.1.x_amd64.deb`
 
-Then build a production build via npm. 
+Now you could optionally check if the service is up and running: `systemctl status OpenMediaCenter`
-
-`npm run build`
-
-Afterwards you can copy the content of the generated `build` folder as well as the `api` folder to your webserver root. 
-
-You need also to setup a Database with the structure described in [SQL Style Reference](https://gitlab.heili.eu/lukas/openmediacenter/-/blob/master/database.sql). 
-The login data to this database needs to be specified in the `api/Database.php` file.
- 
 ## Usage
-Now you can access your MediaCenter via your servers global ip (:
+Now you can access your MediaCenter via your servers global ip on port 8080 (:
 
 At the settings tab you can set the correct videopath on server and click reindex afterwards. 
 
+
+## Development
+
+Build and start the go backend:
+
+`go build`
+
+Start frontend dev server:
+
+`npm start`
+
+### Environent Variables:
+
+`REACT_APP_CUST_BACK_DOMAIN` :: Set a custom movie domain
+
 ## Contact
 Any contribution is appreciated. 
 Feel free to contact me (lukas.heiligenbrunner@gmail.com), open an issue or request a new feature. 

src/pages/AuthenticationPage/AuthenticationPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Button} from '../../elements/GPElements/Button';
 import style from './AuthenticationPage.module.css';
+import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
 
 interface state {
     pwdText: string;
@@ -17,6 +18,16 @@ class AuthenticationPage extends React.Component<Props, state> {
         this.state = {
             pwdText: ''
         };
+
+        this.keypress = this.keypress.bind(this);
+    }
+
+    componentDidMount(): void {
+        addKeyHandler(this.keypress);
+    }
+
+    componentWillUnmount(): void {
+        removeKeyHandler(this.keypress);
     }
 
     render(): JSX.Element {
@@ -46,6 +57,20 @@ class AuthenticationPage extends React.Component<Props, state> {
             </>
         );
     }
+
+    /**
+     * key event handling
+     * @param event keyevent
+     */
+    keypress(event: KeyboardEvent): void {
+        // hide if escape is pressed
+        if (event.key === 'Enter') {
+            // call a parentsubmit if defined
+            if (this.props.submit) {
+                this.props.submit(this.state.pwdText);
+            }
+        }
+    }
 }
 
 export default AuthenticationPage;

src/pages/Player/Player.tsx

@@ -280,12 +280,18 @@ export class Player extends React.Component<myprops, mystate> {
             {action: 'loadVideo', MovieId: parseInt(this.props.match.params.id, 10)},
             (result: VideoTypes.loadVideoType) => {
                 console.log(result);
+                console.log(process.env.REACT_APP_CUST_BACK_DOMAIN);
                 this.setState({
                     sources: {
                         type: 'video',
                         sources: [
                             {
-                                src: getBackendDomain() + GlobalInfos.getVideoPath() + result.MovieUrl,
+                                src:
+                                    (process.env.REACT_APP_CUST_BACK_DOMAIN
+                                        ? process.env.REACT_APP_CUST_BACK_DOMAIN
+                                        : getBackendDomain()) +
+                                    GlobalInfos.getVideoPath() +
+                                    result.MovieUrl,
                                 type: 'video/mp4',
                                 size: 1080
                             }