From 58ebd3bc0f00c532e97e9a5571471ffab87934ba Mon Sep 17 00:00:00 2001
From: AL-LCL <alvin@alvinhavel.com>
Date: Fri, 19 May 2023 10:39:49 +0200
Subject: GOD-VIEW

---
 server/web/src/components/Card.tsx | 80 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 server/web/src/components/Card.tsx

(limited to 'server/web/src/components/Card.tsx')

diff --git a/server/web/src/components/Card.tsx b/server/web/src/components/Card.tsx
new file mode 100644
index 0000000..f0e7c0e
--- /dev/null
+++ b/server/web/src/components/Card.tsx
@@ -0,0 +1,80 @@
+import { IProps, IState } from '../interfaces/components/Card.interface';
+import { FaRedo, FaTrash } from 'react-icons/fa';
+import React, { Component } from 'react';
+import svg from 'plyr/dist/plyr.svg';
+import 'plyr/dist/plyr.css';
+import flvjs from 'flv.js';
+import Plyr from 'plyr';
+import {
+    CardContainer,
+    CardHeader,
+    CardFooter,
+    CardFooterItem
+} from '../design/components/Card.design';
+
+class Card extends Component<IProps, IState> {
+    videoRef: any = React.createRef();
+    plyrPlayer: any;
+    flvPlayer: any;
+
+    componentDidMount() {
+        const video = this.videoRef.current;
+        this.createFlvPlayer();
+
+        this.plyrPlayer = new Plyr(video, {
+            iconUrl: svg,
+            controls: [
+                'play-large',
+                'play',
+                'progress',
+                'mute',
+                'volume',
+                'fullscreen'
+            ]
+        });
+    }
+
+    createFlvPlayer = () => {
+        const video = this.videoRef.current;
+        const { source } = this.props;
+
+        this.flvPlayer = flvjs.createPlayer({
+            type: 'flv',
+            isLive: true,
+            url: source
+        });
+        this.flvPlayer.attachMediaElement(video);
+        this.flvPlayer.load()
+    }
+
+    reload = () => {
+        this.flvPlayer.destroy();
+        this.createFlvPlayer();
+    }
+
+    remove = () => {
+        const { source, title } = this.props;
+        this.props.removeStream({ source, title });
+    }
+
+    render() {
+        const { source, title } = this.props;
+
+        return (
+            <CardContainer>
+                <CardHeader title={`${title}: ${source}`}>{title}: {source}</CardHeader>
+                <video ref={this.videoRef} data-poster="./static/poster.png" />
+                <CardFooter>
+                    <CardFooterItem onClick={this.reload}>
+                        <FaRedo size="0.8rem" />
+                    </CardFooterItem>
+                    <CardFooterItem onClick={this.remove}>
+                        <FaTrash size="0.8rem" />
+                    </CardFooterItem>
+                </CardFooter>
+            </CardContainer>
+        )
+    }
+}
+
+export default Card;
-- 
cgit v1.2.3