@vixoniccom/news-internal 0.4.19 → 0.4.20-dev.0

package/src/components/QrCodeContainer/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { FormattedText } from '../FormattedText'
+import QRCode from 'react-qr-code'
+
+type Props = {
+  item: NewsItem
+  parameters: VixonicParameters
+}
+
+export const QrCodeContainer: React.FunctionComponent<Props> = (props) => {
+  const { item, parameters } = props
+  const qrCodeSize = parameters.qrCodeWidth || 200
+  const qrCodeWidth = `${qrCodeSize}px`
+  const qrCodeHeight = `${parameters.qrCodeHeight || 220}px`
+  const qrCodeBackgroundColor = parameters.qrCodeBackgroundColor || 'white'
+
+  return <div style={{
+    display: 'block',
+    position: 'absolute',
+    top: `${parameters.qrCodePositionY || 0}px`,
+    left: `${parameters.qrCodePositionX || 0}px`,
+    width: qrCodeWidth,
+    height: qrCodeHeight,
+    borderRadius: '10px',
+    padding: '20px',
+    textAlign: 'center',
+    background: qrCodeBackgroundColor,
+    boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)'
+  }}>
+    <QRCode
+      value={item.qrCodeUrl || ''} size={qrCodeSize}
+      bgColor={qrCodeBackgroundColor} fgColor={parameters.qrCodeColor || 'black'}
+    />
+    {item.qrCodeTitle &&
+      <FormattedText text={item.qrCodeTitle} unit={'px'} format={parameters.QrCodeTitleFormat} />
+    }
+  </div>
+}

package/src/components/StandardItem/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { ImageContainer } from '../ImageContainer'
+import { TextContainer } from '../TextContainer'
+import { QrCodeContainer } from '../QrCodeContainer'
+
+const imageContainerStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  flexShrink: 0
+}
+
+type Props = {
+  item: NewsItem
+  parameters: VixonicParameters
+}
+
+const direction: { [key: string]: 'column' | 'row-reverse' | 'column-reverse' | 'row' } = {
+  'top': 'column',
+  'right': 'row-reverse',
+  'bottom': 'column-reverse',
+  'left': 'row'
+}
+
+export const StandardItem: React.FunctionComponent<Props> = (props) => {
+  const { item, parameters } = props
+  const flexDirection = direction[parameters.imagePosition || 'left']
+
+  return <div style={{
+    display: 'flex',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    flexDirection,
+    overflow: 'hidden',
+    padding: 'inherit'
+  }}>
+    <ImageContainer parameters={parameters} style={imageContainerStyle} src={item.image} />
+    <TextContainer parameters={parameters} item={item} />
+    {parameters.qrCodeEnabled && <QrCodeContainer parameters={parameters} item={item} />}
+  </div>
+}

package/src/components/TextContainer/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { FormattedText } from '../FormattedText'
+import FormattedHtmlText from '../FormattedHtmlText'
+
+type Props = {
+  item: NewsItem
+  parameters: VixonicParameters
+  style?: React.CSSProperties
+}
+
+export const TextContainer: React.FunctionComponent<Props> = (props) => {
+  const { item, parameters, style } = props
+  return <div style={{
+    ...style,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: parameters.textAlignment || 'center',
+    height: '100%',
+    flex: 1
+  }}>
+    {parameters.titleEnabled && <FormattedText text={item.title || ''} unit={'px'}
+      format={parameters.titleFormat} lineHeight={parameters.titleLineHeight}
+      style={
+        (parameters.textSeparation && parameters.titleEnabled && parameters.descriptionEnabled)
+          ? { marginBottom: Number(parameters.textSeparation) }
+          : undefined
+      } multiline />
+    }
+    {parameters.descriptionEnabled && <FormattedHtmlText html={item.description || ''} unit={'px'}
+      format={parameters.descriptionFormat} lineHeight={parameters.descriptionLineHeight}
+      defaults={{ fontSize: 10, fontColor: 'black', alignment: 'left' }}
+      multiline />
+    }
+  </div>
+}

package/src/global.d.ts

@@ -0,0 +1,9 @@
+type NewsItem = {
+  id: string
+  title?: string
+  description?: string
+  image?: string
+  qrCodeUrl?: string
+  qrCodeTitle?: string
+  expirationDate?: string
+}

package/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html style="position: absolute; height:100%; width: 100%; overflow: hidden;">
+<head>
+<title></title>
+<meta charset="utf-8">
+</head>
+<body style="margin:0; overflow: hidden;">
+	<div id="root" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;">
+	</div>
+</body>
+</html>

package/src/main.ts

@@ -0,0 +1,28 @@
+import ReactDOM from 'react-dom'
+import React from 'react'
+const { ipcRenderer } = require('electron')
+
+import { App, Props } from './components/App'
+
+let start = false
+
+ipcRenderer.on('preload', (_event: any, data: VixonicData) => {
+  render(data)
+})
+
+ipcRenderer.on('start', (_event: any, data: VixonicData) => {
+  start = true
+  render(data)
+})
+
+ipcRenderer.on('update', (_event: any, data: VixonicData) => {
+  render(data)
+})
+
+ipcRenderer.on('finish', (_event: any) => {
+  // Finish command sent by vixonic player when module is going to be removed
+})
+
+function render(data: VixonicData) {
+  ReactDOM.render(React.createElement<Props>(App, { data, start }), document.getElementById('root'))
+}

package/src/parameters.d.ts

@@ -0,0 +1,80 @@
+declare type VixonicData = {
+  downloadsPath: string
+  services: { [key: string]: { data?: any; updatedAt?: number } }
+  parameters: VixonicParameters
+}
+
+declare type VixonicParameters = Partial<{
+  news: {
+    title: string | string | string | string
+    description: string | string | string | string
+    image: { id?: string; filename?: string; extension?: string }
+    qrCodeUrl: string
+    qrCodeTitle: string
+    expirationDate: string
+    __id: string | undefined
+  }[]
+  newsSizeSelect: 'short' | 'medium' | 'large' | 'extra-large'
+  template: 'standard' | 'gallery' | 'gradient'
+  showTime: number
+  animationSpeed: number
+  animationType: 'fade' | 'crossFade'
+  textAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between'
+  titleEnabled: boolean
+  titleFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  titleLineHeight: number
+  descriptionEnabled: boolean
+  descriptionFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  descriptionLineHeight: number
+  textSeparation: number
+  imageEnabled: boolean
+  imageSize: 'small' | 'medium' | 'large' | 'custom'
+  imageCustomSize: number
+  imagePosition: 'top' | 'right' | 'bottom' | 'left'
+  imageMode: 'contain' | 'cover' | 'fill' | 'none'
+  imageStyle: 'normal' | 'rounded' | 'circle' | 'hex'
+  imageSeparation: number
+  gradientBackgroundColor: string
+  gradientRate: number
+  gradientOrientation: 'left' | 'right'
+  gradientTitleEnabled: boolean
+  gradientTitle: string
+  gradientTitlePositionX: number
+  gradientTitlePositionY: number
+  gradientTitleFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  barSize: 'small' | 'medium' | 'big'
+  barColor: string
+  barOpacity: number
+  iconVisible: boolean
+  iconColor: string
+  qrCodeEnabled: boolean
+  qrCodeWidth: number
+  qrCodeHeight: number
+  qrCodePositionX: number
+  qrCodePositionY: number
+  qrCodeBackgroundColor: string
+  qrCodeColor: string
+  QrCodeTitleFormat: {
+    fontSize?: number
+    fontColor?: string
+    alignment?: { horizontal?: 'left' | 'right' | 'center' }
+    font?: { filename: string; id: string; __isAsset: true }
+  }
+  background: { id?: string; filename?: string; extension?: string }
+  padding: string
+}>

package/src/test/downloads/custom-template/main.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<style type="text/css">
+		@font-face {
+  			font-family: 'MainFont';
+  			src: url('./assets/main-font.ttf'); /* IE9 Compat Modes */
+
+		}
+		.news-item, .background {
+			position: absolute; 
+			width: 800px; 
+			height: 500px; 
+			background-image: url('./assets/background.png');
+		}
+		.news-item__title {
+			display: flex;
+			position: absolute;
+			top: 35px;
+			left: 35px;
+			width: 725px;
+			height: 52px;
+			align-items: center;
+			font-size: 30px;
+		    font-family: 'MainFont';
+		    color: #112244;
+		}
+		.news-item__description {
+			display: flex;
+		    position: absolute;
+		    top: 155px;
+		    left: 390px;
+		    width: 370px;
+		    height: 292px;
+		    font-size: 25px;
+		    font-family: 'MainFont';
+		    color: #224466;
+		}
+		.news-item__image, .news-item__image-loading, .news-item__image-error {
+			border-radius: 10px;
+		    position: absolute;
+		    left: 32px;
+		    top: 135px;
+		    width: 335px;
+		    height: 335px;
+		    object-fit: cover;
+		}
+	</style>
+</head>
+<body>
+	<div class="background"></div>
+	<div class="news-item">
+		<div class="news-item__title">Título</div>
+		<div class="news-item__description">Descripción</div>
+		<div>
+			<img class="news-item__image">
+			<img class="news-item__image-error" src="./assets/image-error.png">
+			<img class="news-item__image-loading" src="./assets/image-loading.gif">
+		</div>
+	</div>
+</body>
+</html>

package/src/test/parameters.json

@@ -0,0 +1,96 @@
+{
+  "parameters": {
+    "maxTitleShort": 25,
+    "maxTitleMedium": 50,
+    "maxTitleLarge": 70,
+    "maxDescriptionShort": 80,
+    "maxDescriptionMedium": 350,
+    "maxDescriptionLarge": 500,
+    "animationSpeed": 1.75,
+    "animationType": "fade",
+    "automaticShowTime": false,
+    "background": {
+      "filename": "fondo-noticiario-vitacura.jpg"
+    },
+    "descriptionEnabled": true,
+    "descriptionFormat": {
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#224466",
+      "fontSize": "24"
+    },
+    "imageEnabled": true,
+    "imageMode": "contain",
+    "imagePosition": "left",
+    "imageSize": "medium",
+    "imageSeparation": -50,
+    "news": [
+      {
+        "$$hashKey": "object:584",
+        "description": "Colabra",
+        "image": {
+          "__type": "kna-resource",
+          "filename": "colabra.jpg"
+        },
+        "title": "Las bandas elásticas apañan en casa🏋🏻 #SKCBalance",
+        "qrCodeUrl": "https://vixonic.com/",
+        "qrCodeTitle": "Entra a Vixonic",
+        "expirationDate": ""
+      },
+      {
+        "$$hashKey": "object:583",
+        "description": "Miau",
+        "image": {
+          "__type": "kna-resource",
+          "filename": "cat.jpg"
+        },
+        "title": "Gato",
+        "qrCodeUrl": "https://vixonic.com/",
+        "qrCodeTitle": "Entra a Vixonic",
+        "expirationDate": ""
+      },
+      {
+        "$$hashKey": "object:653",
+        "description": "Guau",
+        "image": {
+          "__type": "kna-resource",
+          "filename": "dog.jpg"
+        },
+        "title": "Perro",
+        "qrCodeUrl": "https://mandomedio.com/",
+        "qrCodeTitle": "Entra a Mandomedio",
+        "expirationDate": "2026-05-30"
+      }
+    ],
+    "padding": "25px 80px 120px 20px",
+    "showTime": 5,
+    "showTimeSpeed": 200,
+    "template": "standard",
+    "templateUrl": {
+      "filename": "custom-template.zip"
+    },
+    "qrCodeEnabled": true,
+    "qrCodePositionX": 1600,
+    "qrCodePositionY": 700,
+    "QrCodeTitleFormat": {
+      "alignment": {
+        "horizontal": "center"
+      },
+      "fontColor": "#336699",
+      "fontSize": "24"
+    },
+    "textAlignment": "center",
+    "titleEnabled": true,
+    "titleFormat": {
+      "alignment": {
+        "horizontal": "left"
+      },
+      "font": {
+        "filename": "font-title.otf"
+      },
+      "fontColor": "#336699",
+      "fontSize": "36"
+    }
+  }
+}

package/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2015",
-    "module": "es2015",
+    "target": "es6",
+    "module": "esnext",
     "moduleResolution": "node",
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowJs": true,
     "checkJs": true,
     "allowSyntheticDefaultImports": true,
@@ -19,6 +19,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "sourceMap": true,
+    "skipLibCheck": true,
     "types": ["node"],
     "typeRoots": ["./node_modules/@types", "./src"]
   },