News feed template

CHANGELOG.md

@@ -2,7 +2,9 @@
 
 All notable changes to this project will be documented in this file.
 
-- [#TODO](https://github.com/os2display/display-templates/pull/TODO)
+- [#161](https://github.com/os2display/display-templates/pull/161) 
+  - Added social news template. 
+- [#160](https://github.com/os2display/display-templates/pull/160)
   - Added option to set image size contain instead of cover.
 - [#159](https://github.com/os2display/display-templates/pull/159)
   - Fixed issue where slideshow flickered first image before transitioning to next slide.

build/news-feed-admin.json

@@ -0,0 +1,70 @@
+[
+  {
+    "key": "news-feed-form-1",
+    "input": "header",
+    "text": "Skabelon: Instagram feed",
+    "name": "header1",
+    "formGroupClasses": "h4 mb-3"
+  },
+  {
+    "key": "news-feed-form-2",
+    "input": "header-h3",
+    "text": "Opsæt feed",
+    "name": "header2",
+    "formGroupClasses": "h5 mb-3"
+  },
+  {
+    "key": "news-feed-form-3",
+    "input": "feed",
+    "text": "Opsæt feed",
+    "name": "feeds",
+    "supportedFeedOutputType": "rss",
+    "formGroupClasses": "mb-3",
+    "singleSelect": true
+  },
+  {
+    "key": "news-feed-form-entry-duration",
+    "input": "input",
+    "name": "entryDuration",
+    "type": "number",
+    "label": "Varighed pr. nyhed (i sekunder)",
+    "helpText": "Her skal du skrive varigheden pr. nyhed.",
+    "formGroupClasses": "mb-3",
+    "required": true
+  },
+  {
+    "key": "news-feed-form-readmore",
+    "input": "input",
+    "label": "Læs mere tekst",
+    "helpText": "Hvis den ikke overskrives, står der \"Læs hele nyheden\"",
+    "name": "readMore",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "news-feed-max-entries",
+    "input": "input",
+    "name": "maxEntries",
+    "type": "number",
+    "min": 1,
+    "label": "Maksimalt antal nyheder",
+    "helpText": "Her kan du skrive maksimalt antal nyheder, der skal vises.",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "rss-form-4",
+    "multipleImages": false,
+    "input": "image",
+    "name": "fallbackImage",
+    "label": "Fallback-billede",
+    "helpText": "Dette billede kan vises, hvis nyheden mangler et billede.",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "form-media-contain",
+    "input": "checkbox",
+    "name": "mediaContain",
+    "label": "Deaktivér billedbeskæring",
+    "helpText": "Billedet vil blive vist ubeskåret med tomme områder omkring",
+    "formGroupClasses": "mb-3"
+  }
+]

build/news-feed-config-develop.json

@@ -0,0 +1,14 @@
+{
+  "title": "Nyheder",
+  "icon": "",
+  "id": "01JEWPAFF93YSF418TH72W1SBA",
+  "description": "Mulighed for at vise nyhedsindhold.",
+  "resources": {
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/news-feed.js?ts=1734244724142",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/develop/build/news-feed-admin.json?ts=1734244724142",
+    "schema": "",
+    "assets": [],
+    "options": {},
+    "content": {}
+  }
+}

build/news-feed-config-main.json

@@ -0,0 +1,14 @@
+{
+  "title": "Nyheder",
+  "icon": "",
+  "id": "01JEWPAFF93YSF418TH72W1SBA",
+  "description": "Mulighed for at vise nyhedsindhold.",
+  "resources": {
+    "component": "https://raw.githubusercontent.com/os2display/display-templates/main/build/news-feed.js?ts=1734244724142",
+    "admin": "https://raw.githubusercontent.com/os2display/display-templates/main/build/news-feed-admin.json?ts=1734244724142",
+    "schema": "",
+    "assets": [],
+    "options": {},
+    "content": {}
+  }
+}

package.json

@@ -39,6 +39,7 @@
     "os2display-grid-generator": "^1.0.9",
     "postcss-loader": "^5.3.0",
     "prop-types": "^15.7.2",
+    "qrcode": "^1.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.20.12",
@@ -52,13 +53,13 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "enzyme": "^3.11.0",
+    "@svgr/webpack": "^5.5.0",
     "@testing-library/react": "^12.1.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "@svgr/webpack": "^5.5.0",
     "babel-eslint": "^10.1.0",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^9.0.0",
+    "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",

src/index.js

@@ -29,6 +29,7 @@ import Video from "./video/video";
 import Travel from "./travel/travel";
 import VimeoPlayer from "./vimeo-player/vimeo-player";
 import "./index.css";
+import NewsFeed from "./news-feed/news-feed";
 
 export const renderScreen = (screen) => {
   const gridTemplateAreas = {
@@ -158,6 +159,16 @@ export const renderSlide = (slide) => {
           executionId="SLIDE_ID"
         />
       );
+    case "news-feed":
+      return (
+        <NewsFeed
+          content={slide.content}
+          slide={slide}
+          run="1234"
+          slideDone={slideDone}
+          executionId="SLIDE_ID"
+        />
+      );
     case "table":
       return (
         <Table

src/news-feed/news-feed-admin.json

@@ -0,0 +1,69 @@
+[
+  {
+    "key": "news-feed-form-1",
+    "input": "header",
+    "text": "Skabelon: Nyheder",
+    "name": "header1",
+    "formGroupClasses": "h4 mb-3"
+  },
+  {
+    "key": "news-feed-form-2",
+    "input": "header-h3",
+    "text": "Opsæt feed",
+    "name": "header2",
+    "formGroupClasses": "h5 mb-3"
+  },
+  {
+    "key": "news-feed-form-3",
+    "input": "feed",
+    "text": "Opsæt feed",
+    "name": "feeds",
+    "supportedFeedOutputType": "rss",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "news-feed-form-entry-duration",
+    "input": "input",
+    "name": "entryDuration",
+    "type": "number",
+    "label": "Varighed pr. nyhed (i sekunder)",
+    "helpText": "Her skal du skrive varigheden pr. nyhed.",
+    "formGroupClasses": "mb-3",
+    "required": true
+  },
+  {
+    "key": "news-feed-form-readmore",
+    "input": "input",
+    "label": "Læs mere tekst",
+    "helpText": "Hvis den ikke overskrives, står der \"Læs hele nyheden\"",
+    "name": "readMore",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "news-feed-max-entries",
+    "input": "input",
+    "name": "maxEntries",
+    "type": "number",
+    "min": 1,
+    "label": "Maksimalt antal nyheder",
+    "helpText": "Her kan du skrive maksimalt antal nyheder, der skal vises.",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "rss-form-4",
+    "multipleImages": false,
+    "input": "image",
+    "name": "fallbackImage",
+    "label": "Fallback-billede",
+    "helpText": "Dette billede kan vises, hvis nyheden mangler et billede.",
+    "formGroupClasses": "mb-3"
+  },
+  {
+    "key": "form-media-contain",
+    "input": "checkbox",
+    "name": "mediaContain",
+    "label": "Deaktivér billedbeskæring",
+    "helpText": "Billedet vil blive vist ubeskåret med tomme områder omkring",
+    "formGroupClasses": "mb-3"
+  }
+]

src/news-feed/news-feed-config.json

@@ -0,0 +1,14 @@
+{
+  "title": "Nyheder",
+  "icon": "",
+  "id": "01JEWPAFF93YSF418TH72W1SBA",
+  "description": "Mulighed for at vise nyhedsindhold.",
+  "resources": {
+    "component": "https://display-templates.local.itkdev.dk/build/news-feed.js",
+    "admin": "https://display-templates.local.itkdev.dk/build/news-feed-admin.json",
+    "schema": "",
+    "assets": [],
+    "options": {},
+    "content": {}
+  }
+}