Merge pull request #157 from os2display/feature/vimeo-player

Add Vimeo Player Component

CHANGELOG.md

@@ -3,7 +3,8 @@
 All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
-
+- [#157](https://github.com/os2display/display-templates/pull/157)
+  - Add Vimeo player template.
 - [#156](https://github.com/os2display/display-templates/pull/156)
   - Clarified template creation.
 - [#155](https://github.com/os2display/display-templates/pull/155)

build/vimeo-player-admin.json

@@ -0,0 +1,27 @@
+[
+  {
+    "key": "vimeo-form-1",
+    "input": "header",
+    "text": "Skabelon: Vimeo Video",
+    "name": "header1",
+    "formGroupClasses": "h4 mb-3"
+  },
+  {
+    "key": "vimeo-form-2",
+    "input": "input",
+    "name": "vimeoid",
+    "label": "Vimeo Id",
+    "formGroupClasses": "col-md-6"
+  },
+  {
+    "key": "vimeo-form-3",
+    "input": "duration",
+    "name": "duration",
+    "min": "1",
+    "type": "number",
+    "label": "Varighed (i sekunder)",
+    "helpText": "Her skal du skrive varigheden på slidet.",
+    "required": true,
+    "formGroupClasses": "col-md-6 mb-3"
+  }
+]

build/vimeo-player-config-develop.json

@@ -0,0 +1,14 @@
+{
+  "title": "Vimeo Player",
+  "icon": "",
+  "id": "01FQBJQ2M3544ZKAADPWBXHY17",
+  "description": "Skabelon til Vimeo Video.",
+  "resources": {
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/vimeo-player.js?ts=1727091804576",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/vimeo-player-admin.json?ts=1727091804576",
+    "schema": "",
+    "assets": [],
+    "options": {},
+    "content": {}
+  }
+}

build/vimeo-player-config-main.json

@@ -0,0 +1,14 @@
+{
+  "title": "Vimeo Player",
+  "icon": "",
+  "id": "01FQBJQ2M3544ZKAADPWBXHY17",
+  "description": "Skabelon til Vimeo Video.",
+  "resources": {
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/vimeo-player.js?ts=1727091804576",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/vimeo-player-admin.json?ts=1727091804576",
+    "schema": "",
+    "assets": [],
+    "options": {},
+    "content": {}
+  }
+}

package.json

@@ -24,6 +24,7 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
+    "@u-wave/react-vimeo": "^0.9.11",
     "babel-loader": "^8.2.2",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^5.2.6",

src/index.js

@@ -27,6 +27,7 @@ import IFrame from "./iframe/iframe";
 import Table from "./table/table";
 import Video from "./video/video";
 import Travel from "./travel/travel";
+import VimeoPlayer from "./vimeo-player/vimeo-player";
 import "./index.css";
 
 export const renderScreen = (screen) => {
@@ -187,6 +188,16 @@ export const renderSlide = (slide) => {
           executionId="SLIDE_ID"
         />
       );
+    case "vimeo-player":
+      return (
+        <VimeoPlayer
+          content={slide.content}
+          slide={slide}
+          run="1234"
+          slideDone={slideDone}
+          executionId="SLIDE_ID"
+        />
+      );
     default:
       return <div>Slide type not found!</div>;
   }

src/slides.js

@@ -1451,6 +1451,14 @@ const slides = [
       animation: "none",
     },
   },
+  {
+    id: "slide24-vimeo-player",
+    type: "vimeo-player",
+    content: {
+      duration: 5000,
+      vimeoid: "882393277",
+    },
+  },
 ];
 
 export default slides;

src/vimeo-player/vimeo-player-admin.json

@@ -0,0 +1,27 @@
+[
+  {
+    "key": "vimeo-form-1",
+    "input": "header",
+    "text": "Skabelon: Vimeo Video",
+    "name": "header1",
+    "formGroupClasses": "h4 mb-3"
+  },
+  {
+    "key": "vimeo-form-2",
+    "input": "input",
+    "name": "vimeoid",
+    "label": "Vimeo Id",
+    "formGroupClasses": "col-md-6"
+  },
+  {
+    "key": "vimeo-form-3",
+    "input": "duration",
+    "name": "duration",
+    "min": "1",
+    "type": "number",
+    "label": "Varighed (i sekunder)",
+    "helpText": "Her skal du skrive varigheden på slidet.",
+    "required": true,
+    "formGroupClasses": "col-md-6 mb-3"
+  }
+]

src/vimeo-player/vimeo-player-config.json

@@ -0,0 +1,14 @@
+{
+  "title": "Vimeo Player",
+  "icon": "",
+  "id": "01FQBJQ2M3544ZKAADPWBXHY17",
+  "description": "Skabelon til Vimeo Video.",
+  "resources": {
+    "component": "https://display-templates.local.itkdev.dk/build/vimeo-player.js",
+    "admin": "https://display-templates.local.itkdev.dk/build/vimeo-player-admin.json",
+    "schema": "",
+    "assets": [],
+    "options": {},
+    "content": {}
+  }
+}

src/vimeo-player/vimeo-player.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from "react";
+import Vimeo from "@u-wave/react-vimeo"; // eslint-disable-line import/no-unresolved
+import PropTypes from "prop-types";
+import BaseSlideExecution from "../base-slide-execution";
+import { ThemeStyles } from "../slide-util";
+import "../global-styles.css";
+
+/**
+ * Vimeo Player component.
+ *
+ * @param {object} props Props.
+ * @param {object} props.slide The slide.
+ * @param {object} props.content The slide content.
+ * @param {boolean} props.run Whether or not the slide should start running.
+ * @param {Function} props.slideDone Function to invoke when the slide is done playing.
+ * @param {string} props.executionId Unique id for the instance.
+ * @returns {JSX.Element} The component.
+ */
+function VimeoPlayer({ slide, content, run, slideDone, executionId }) {
+  const { vimeoid, duration = 15000 } = content;
+
+  /** Setup slide run function. */
+  const slideExecution = new BaseSlideExecution(slide, slideDone);
+  useEffect(() => {
+    if (run) {
+      slideExecution.start(duration);
+    }
+
+    return function cleanup() {
+      slideExecution.stop();
+    };
+  }, [run]);
+
+  return (
+    <>
+      <div width="100%" height="100%">
+        <Vimeo video={vimeoid} responsive autoplay muted paused={false} loop />
+      </div>
+      <ThemeStyles id={executionId} css={slide?.themeData?.cssStyles} />
+    </>
+  );
+}
+
+VimeoPlayer.propTypes = {
+  run: PropTypes.string.isRequired,
+  slideDone: PropTypes.func.isRequired,
+  slide: PropTypes.shape({
+    instanceId: PropTypes.string,
+    themeData: PropTypes.shape({
+      cssStyles: PropTypes.string,
+    }),
+  }).isRequired,
+  content: PropTypes.shape({
+    duration: PropTypes.number.isRequired,
+    vimeoid: PropTypes.string,
+  }).isRequired,
+  executionId: PropTypes.string.isRequired,
+};
+
+export default VimeoPlayer;

webpack.config.js

@@ -47,6 +47,10 @@ const entry = devMode
       table: path.resolve(__dirname, "./src/table/table.js"),
       video: path.resolve(__dirname, "./src/video/video.js"),
       travel: path.resolve(__dirname, "./src/travel/travel.js"),
+      "vimeo-player": path.resolve(
+        __dirname,
+        "./src/vimeo-player/vimeo-player.js"
+      ),
     };
 
 const timestamp = new Date().getTime().toString();

yarn.lock

@@ -1539,6 +1539,14 @@
     "@types/scheduler" "^0.16"
     csstype "^3.0.2"
 
+"@types/react@^17.0.0 || ^18.0.0":
+  version "18.3.7"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.7.tgz#6decbfbb01f8d82d56ff5403394121940faa6569"
+  integrity sha512-KUnDCJF5+AiZd8owLIeVHqmW9yM4sqmDVf2JRJiBMFkGvkoZ4/WyV2lL4zVsoinmRS/W3FeEdZLEWFRofnT2FQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@^0.16":
   version "0.16.8"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
@@ -1559,13 +1567,36 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4"
   integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==
 
+"@types/vimeo__player@^2.10.0":
+  version "2.18.3"
+  resolved "https://registry.yarnpkg.com/@types/vimeo__player/-/vimeo__player-2.18.3.tgz#585ccafd483304561c26897d48aa7695f7b36ed7"
+  integrity sha512-IzSzb6doT4I4uAnBHa+mBCiNtK7iAllEJjtpkX0sKY6/s1Vi+aX1134IAiPgiyFlMvFab/oZQpSeccK4r0/T2A==
+
 "@types/yauzl@^2.9.1":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.3.tgz#e9b2808b4f109504a03cda958259876f61017999"
   integrity sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==
   dependencies:
     "@types/node" "*"
 
+"@u-wave/react-vimeo@^0.9.11":
+  version "0.9.11"
+  resolved "https://registry.yarnpkg.com/@u-wave/react-vimeo/-/react-vimeo-0.9.11.tgz#2e253988bf48b03506f6b7c1becbdd12bee712fd"
+  integrity sha512-4WEfkYaJHhgxRusQvrA6CmRVS91ZA1SCX/qWDBRpG2akLEfhv1QvDwV15YX++Dh2QArzf+jdWPygSxKgQxvsmg==
+  dependencies:
+    "@types/react" "^17.0.0 || ^18.0.0"
+    "@types/vimeo__player" "^2.10.0"
+    "@vimeo/player" "^2.16.4"
+    prop-types "^15.7.2"
+
+"@vimeo/player@^2.16.4":
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/@vimeo/player/-/player-2.24.0.tgz#ccc2e64f78c46548c4dc952ccf572dfa5428aac4"
+  integrity sha512-oIpucg40ijdV1hGvAwHZitgbzSB/FFl1NbU82IHasG9e4EHNRYqJLetQjPk9oxMgeR06Pt/xB2wne/3jqKtLUg==
+  dependencies:
+    native-promise-only "0.8.1"
+    weakmap-polyfill "2.0.4"
+
 "@webassemblyjs/[email protected]", "@webassemblyjs/ast@^1.12.1":
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.12.1.tgz#bb16a0e8b1914f979f45864c23819cc3e3f0d4bb"
@@ -6544,6 +6575,11 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+[email protected]:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/native-promise-only/-/native-promise-only-0.8.1.tgz#20a318c30cb45f71fe7adfbf7b21c99c1472ef11"
+  integrity sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -9275,6 +9311,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+[email protected]:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz#bcc301e4c8eb4eda3e406f08f1a691093e407884"
+  integrity sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==
+
 webpack-cli@^4.7.0:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.10.0.tgz#37c1d69c8d85214c5a65e589378f53aec64dab31"