added postbuild step to copy video chunks to right directory upon build (done hackily)

package.json

@@ -4,8 +4,8 @@
   "description": "Portfolio Site",
   "main": "src/index.jsx",
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "start": "rm -v dist/* && node postbuild.js && parcel index.html",
+    "build": "rm -rv dist && parcel build index.html && exec node postbuild.js"
   },
   "author": "",
   "license": "BSD-2-Clause",
@@ -13,17 +13,20 @@
     "@babel/core": "^7.12.3",
     "@babel/plugin-transform-react-jsx": "^7.12.5",
     "cssnano": "^4.1.10",
-    "parcel-bundler": "^1.12.4"
+    "parcel-bundler": "^1.12.4",
+    "typescript": "^4.0.5"
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@types/react": "^16.9.56",
     "fontsource-roboto": "^3.0.3",
+    "hls.js": "^0.14.16",
     "preact": "^10.5.5",
     "preact-async-route": "^2.2.1",
     "preact-router": "^3.2.1",
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "video.js": "^7.10.2"
   },
   "skipLibCheck": true,
   "alias": {

postbuild.js

@@ -0,0 +1,54 @@
+const Path = require("path");
+const fs = require("fs");
+
+fs.copyFile("./static/video/index0.ts", "./dist/index0.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});
+
+fs.copyFile("./static/video/index1.ts", "./dist/index1.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});
+
+fs.copyFile("./static/video/index2.ts", "./dist/index2.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});
+fs.copyFile("./static/video/index3.ts", "./dist/index3.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});
+fs.copyFile("./static/video/index4.ts", "./dist/index4.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});
+fs.copyFile("./static/video/index5.ts", "./dist/index5.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});
+fs.copyFile("./static/video/index6.ts", "./dist/index6.ts", (err) => {
+  if (err) {
+    return console.error("Video segments were not copied! \n", err);
+  } else {
+    return console.error("Video segments successfully copied! \n");
+  }
+});

src/Greeting.jsx

@@ -8,28 +8,29 @@ import {
   Button,
 } from "@material-ui/core";
 import CV from "../static/cv.pdf";
-import PortfolioVideo from "../static/video/Portfolio.mp4";
-import PortfolioTexture from "../static/images/diagmonds-light.png";
+
+import VideoPlayer from "./VideoPlayer.jsx";
 
 class Greeting extends Component {
   render() {
     return (
       <div>
-        {/*<div
+        <div
           style={{
             position: "absolute",
             width: "100%",
             left: "50%",
             right: "50%",
-            top: "50%",
-            height: "100%",
-            //objectfit: "cover",
+            top: "25%",
+            height: "50%",
+            objectFit: "cover",
             transform: "translate(-50%,-50%)",
-            zindex: "-100",
-            background: `url(${PortfolioTexture})`,
+            zIndex: "-1",
           }}
-          />*/}
-        <video
+        >
+          <VideoPlayer />
+        </div>
+        {/*<video
           autoPlay
           muted
           loop
@@ -48,7 +49,7 @@ class Greeting extends Component {
           //height="315"
         >
           <source src={PortfolioVideo} type="video/mp4" />
-        </video>
+          </video>*/}
         <Container
           maxWidth="sm"
           style={{