Merge branch 'feature/new-element-iframe-video' into 'master'

New Element IFrame and Audio Player

See merge request SOL1/meerkat!2

frontend/package-lock.json

@@ -297,6 +297,30 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
       "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
     },
+    "@videojs/http-streaming": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-1.13.3.tgz",
+      "integrity": "sha512-rOEShTytYchSxTKR5YvQ91mDN0b3BVOGoBSVzbgMbT8pOm2FEZ1G5dWuLtUpBnvFTPb0cxnTGmISwllPq3EWYg==",
+      "requires": {
+        "aes-decrypter": "3.0.0",
+        "global": "^4.3.0",
+        "m3u8-parser": "4.4.0",
+        "mpd-parser": "0.10.0",
+        "mux.js": "^5.5.3",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^6.8.0 || ^7.0.0"
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-1.3.0.tgz",
+      "integrity": "sha512-oiqXDtHQqDPun7JseWkirUHGrgdYdeF12goUut5z7vwAj4DmUufEPFJ4xK5hYGXGFDyDhk2rSFOR122Ze6qXyQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "^4.3.2",
+        "url-toolkit": "^2.1.6"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -469,6 +493,16 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
       "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
     },
+    "aes-decrypter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.0.0.tgz",
+      "integrity": "sha1-eEihwUW5/b9Xrj4rWxvHzwZEqPs=",
+      "requires": {
+        "commander": "^2.9.0",
+        "global": "^4.3.2",
+        "pkcs7": "^1.0.2"
+      }
+    },
     "ajv": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
@@ -619,6 +653,22 @@
         }
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -690,6 +740,15 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -1108,6 +1167,11 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "core-js": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1293,6 +1357,11 @@
         "@babel/runtime": "^7.1.2"
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -1551,6 +1620,12 @@
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -1691,6 +1766,15 @@
         "is-glob": "^4.0.1"
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -1850,6 +1934,11 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -1969,6 +2058,11 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -2106,6 +2200,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.4.0.tgz",
+      "integrity": "sha512-iH2AygTFILtato+XAgnoPYzLHM4R3DjATj7Ozbk7EHdB2XoLF2oyOUguM7Kc4UVHbQHHL/QPaw98r7PbWzG0gg==",
+      "requires": {
+        "global": "^4.3.2"
+      }
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -2190,6 +2292,14 @@
         }
       }
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -2270,11 +2380,33 @@
         "run-queue": "^1.0.3"
       }
     },
+    "mpd-parser": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.10.0.tgz",
+      "integrity": "sha512-eIqkH/2osPr7tIIjhRmDWqm2wdJ7Q8oPfWvdjealzsLV2D2oNe0a0ae2gyYYs1sw5e5hdssDA2V6Sz8MW+Uvvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@videojs/vhs-utils": "^1.1.0",
+        "global": "^4.3.2",
+        "xmldom": "^0.1.27"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "mux.js": {
+      "version": "5.6.4",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.6.4.tgz",
+      "integrity": "sha512-k7UUafOn1axLqcnx0oF3xbTrVMXHd54ytwFHW30v+SRbZED63QjK7al+q9KMlF+NQOkydd+46xPqHk+ELZxL+g=="
+    },
+    "nan": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
+      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -2457,6 +2589,11 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
+      "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
+    },
     "parse-passwd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -2521,6 +2658,11 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
     },
+    "pkcs7": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.2.tgz",
+      "integrity": "sha1-ttulJ1KMKUK/wSLOLa/NteWQdOc="
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -2862,11 +3004,27 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -3315,6 +3473,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
       "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -3431,6 +3594,11 @@
         }
       }
     },
+    "url-toolkit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.0.tgz",
+      "integrity": "sha512-Rde0c9S4fJK3FaHim3DSgdQ8IFrSXcZCpAJo9T7/FA+BoQGhK0ow3mpwGQLJCPYsNn6TstpW7/7DzMpSpz9F9w=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -3461,6 +3629,50 @@
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
       "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ=="
     },
+    "video.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.0.0.tgz",
+      "integrity": "sha512-0yKHCYd/zloQIvtwOe/spng7lw3Q4wfs+/ktf5sNpuO3nvaFY78bmWGi3eFWJKLsBOqaeoPhGpRJxbKD30WF5w==",
+      "requires": {
+        "@videojs/http-streaming": "^1.0.0",
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "3.0.0",
+        "videojs-vtt.js": "0.14.1",
+        "xhr": "2.4.0"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
+    "videojs-font": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.0.0.tgz",
+      "integrity": "sha512-XS6agz2T7p2cFuuXulJD70md8XMlAN617SJkMWjoTPqZWv+RU8NcZCKsE3Tk73inzxnQdihOp0cvI7NGz2ngHg=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz",
+      "integrity": "sha512-YxOiywx6N9t3J5nqsE5WN2Sw4CSqVe3zV+AZm2T4syOc2buNJaD6ZoexSdeszx2sHLU/RRo2r4BJAXFDQ7Qo2Q==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -3545,7 +3757,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -3700,6 +3916,38 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
+    "xmldom": {
+      "version": "0.1.31",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

frontend/package.json

@@ -12,12 +12,15 @@
   "dependencies": {
     "@babel/core": "^7.11.1",
     "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "@videojs/http-streaming": "^1.13.3",
     "babel-loader": "^8.1.0",
     "dayjs": "^1.8.33",
     "preact": "^10.4.7",
     "preact-router": "^3.2.1",
+    "react-widgets": "4.4.4",
+    "video.js": "^7.0.0",
     "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "react-widgets": "4.4.4"
-  }
+    "webpack-cli": "^3.3.12"
+  },
+  "devDependencies": {}
 }

frontend/src/editor.jsx

@@ -11,6 +11,8 @@ import { CheckLine, CheckLineOptions, CheckLineDefaults } from './elements/line'
 import { StaticText, StaticTextOptions, StaticTextDefaults } from './statics/text';
 import { StaticSVG, StaticSVGOptions, StaticSVGDefaults } from './statics/svg';
 import { StaticImage, StaticImageOptions } from './statics/image';
+import { IframeVideo, IframeVideoOptions } from './elements/video';
+import { AudioStream, AudioOptions } from './elements/audio';
 
 //Manage dashboard state
 const dashboardReducer = (state, action) => {
@@ -282,12 +284,14 @@ function DashboardElements({dashboardDispatch, selectedElementId, elements, high
 		if(element.type === 'static-text') { ele = <StaticText options={element.options}/> }
 		if(element.type === 'static-svg') { ele = <StaticSVG options={element.options}/> }
 		if(element.type === 'static-image') { ele = <StaticImage options={element.options}/> }
-
-		return <TransformableElement rect={element.rect} updateRect={updateRect}
-			glow={selectedElementId === index} highlight={highlightedElementId === index}
-			updateRotation={updateRotation} rotation={element.rotation}>
-			{ele}
-		</TransformableElement>
+		if(element.type === 'iframe-video') { ele = <div><IframeVideo options={element.options}/><div class="move-button">Move</div></div> }
+		if(element.type === 'audio-stream') { ele = <AudioStream options={element.options}/> }
+
+		return  <TransformableElement rect={element.rect} updateRect={updateRect}
+					glow={selectedElementId === index} highlight={highlightedElementId === index}
+					updateRotation={updateRotation} rotation={element.rotation}>
+					{ele}
+			    </TransformableElement>
 	});
 }
 
@@ -427,7 +431,7 @@ export function ElementSettings({selectedElement, updateElement}) {
 		updateElement({...selectedElement, options: newOptions})
 	}
 
-	//sets good default values for each visial type when they're selected
+	//sets good default values for each visual type when they're selected
 	const updateType = e => {
 		const newType = e.currentTarget.value
 		let defaults = {};
@@ -453,6 +457,8 @@ export function ElementSettings({selectedElement, updateElement}) {
 	if(selectedElement.type === 'static-text') { ElementOptions = <StaticTextOptions updateOptions={updateElementOptions} options={selectedElement.options} /> }
 	if(selectedElement.type === 'static-svg') { ElementOptions = <StaticSVGOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
 	if(selectedElement.type === 'static-image') { ElementOptions = <StaticImageOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
+	if(selectedElement.type === 'iframe-video') { ElementOptions = <IframeVideoOptions updateOptions={updateElementOptions} options={selectedElement.options}/> }
+	if(selectedElement.type === 'audio-stream') { ElementOptions = <AudioOptions updateOptions={updateElementOptions} options={selectedElement.options}/>}
 
 	return <div class="editor settings-overlay">
 		<div class="options">
@@ -476,6 +482,8 @@ export function ElementSettings({selectedElement, updateElement}) {
 					<option value="static-text">Static Text</option>
 					<option value="static-svg">Static SVG</option>
 					<option value="static-image">Static Image</option>
+					<option value="iframe-video">HLS Stream</option>
+					<option value="audio-stream">Audio Stream</option>
 				</select>
 				<hr />
 

frontend/src/elements/audio.jsx

+import { h, Fragment } from 'preact';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+import * as meerkat from '../meerkat';
+
+
+export function AudioOptions({options, updateOptions}) {
+  return <Fragment>
+    <label for="src">Source</label>
+    <input id="src" name="src" value={options.source}
+      onInput={e => updateOptions({source: e.currentTarget.value})}>
+    </input>
+    <div>
+      <button>Render</button>
+    </div>
+  </Fragment>
+}
+
+export function AudioStream({options}, props) { 
+    return (
+        <div>
+            <audio controls src={options.source} type="audio/mpeg"></audio>
+        </div>
+    );
+}
\ No newline at end of file

frontend/src/elements/video.jsx

+import { h, Fragment } from 'preact';
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+import videojs from 'video.js';
+import * as meerkat from '../meerkat';
+
+
+export function IframeVideoOptions({options, updateOptions}) {
+  return <Fragment>
+    <label for="src">Source</label>
+    <input id="src" name="src" value={options.source}
+      onInput={e => updateOptions({source: e.currentTarget.value})}>
+    </input>
+    <div>
+      <button>Render</button>
+    </div>
+  </Fragment>
+}
+
+export function IframeVideo({options}, props) {
+  const { videoSrc } = props;
+  const playerRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+
+  useEffect(() => {   
+    buildPlayer();
+  }, []);
+
+  const buildPlayer = () => {
+    const player = videojs(playerRef.current, { 
+      autoplay: true, 
+      controls: true,
+      muted: true,
+      disableVideoPlayPauseClick: true,
+      controlBar: {
+        fullscreenToggle: false
+      },
+      sources: [{
+        src: `${options.source}`,
+        type: 'application/x-mpegURL',
+      }, {
+        src: `${options.source}`,
+        type: 'audio/mp3'
+      }] 
+    }, () => {
+      player.src(videoSrc);
+    });
+    return () => {
+      player.dispose();
+    };
+  }
+
+    return (
+      <div>
+        <div data-vjs-player>
+          <video ref={playerRef} id="hls_stream" width="140" height="264" id='livestream' className="video-js vjs-16-9 vjs-big-play-centered" playsInline />
+        </div> 
+      </div>
+    )
+};
\ No newline at end of file

frontend/src/viewer.jsx

@@ -7,6 +7,8 @@ import { CheckCard } from './elements/card';
 import { CheckImage } from './elements/image';
 import { CheckSVG } from './elements/svg';
 import { CheckLine } from './elements/line';
+import { AudioStream } from './elements/audio';
+import { IframeVideo } from './elements/video';
 
 import { StaticText } from './statics/text';
 import { StaticSVG } from './statics/svg';
@@ -40,6 +42,8 @@ export function Viewer({slug}) {
 		if(element.type === 'static-text') { ele = <StaticText options={element.options}/> }
 		if(element.type === 'static-svg') { ele = <StaticSVG options={element.options}/> }
 		if(element.type === 'static-image') { ele = <StaticImage options={element.options}/> }
+		if(element.type === 'iframe-video') { ele = <IframeVideo options={element.options}/> }
+		if(element.type === 'audio-stream') { ele = <AudioStream options={element.options}/> }
 
 		return <div class="check" style={{left: left, top: top, width: width, height: height, transform: rotation}}>
 			{ele}