@vixoniccom/news-internal 0.4.21-dev.20 → 0.4.21-dev.23

package/build/test/parameters.json

@@ -37,30 +37,6 @@
         "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",
@@ -91,6 +67,19 @@
       },
       "fontColor": "#336699",
       "fontSize": "36"
-    }
+    },
+    "defaultMessageFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "defaultMessage": "No hay noticias disponibles en este momento."
   }
 }

package/configuration/appearanceGroup/generalInputs.ts

@@ -1,5 +1,5 @@
 import { Label, SelectInput, NumberInput } from '@vixoniccom/modules'
-import { NumberRangeValue, Slider } from '@vixoniccom/modules/dist/lib'
+import { NumberRangeValue, Slider, TextFormat, TextInput } from '@vixoniccom/modules/dist/lib'
 
 export const generalInputs = [
   new Label({ label: 'General' }),
@@ -51,5 +51,7 @@ export const generalInputs = [
       { label: 'Distribuidos', value: 'space-around' },
       { label: 'Separados', value: 'space-between' }
     ]
-  })
+  }),
+  new TextInput({ id: 'defaultMessage', label: 'Mensaje sin noticias', description: 'Mensaje a mostrar cuando no existen noticias o han caducado' }),
+  new TextFormat({ id: 'defaultMessageFormat', label: 'Formato del mensaje sin noticias' }),
 ]

package/configuration.json

@@ -251,6 +251,16 @@
           "required": true,
           "defaultValue": "center"
         },
+        {
+          "id": "defaultMessage",
+          "label": "Sin cumpleaños",
+          "type": "text-input"
+        },
+        {
+          "id": "defaultMessageFormat",
+          "label": "Formato Mensaje sin cumpleaños",
+          "type": "text-format"
+        },
         {
           "type": "label",
           "label": "Elementos"

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": ""
   },
-  "version": "0.4.21-dev.20",
+  "version": "0.4.21-dev.23",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/components/FontLoader.tsx

@@ -17,6 +17,7 @@ export const FontLoader: React.FunctionComponent<Props<any>> = (props) => {
           src: url("${parseFontUrl(props.downloadPath, font)}");
         }`
     } catch (err) {
+      console.error('Error loading font:', font, err)
       return ''
     }
   })

package/src/components/FormattedText/index.tsx

@@ -47,8 +47,8 @@ export const FormattedText: React.FunctionComponent<Props> = (props) => {
 
   const getHorizontalAlignment = (alignment: Aligment) => {
     if (alignment) {
-      const hA = alignment.horizontal
-      return alignments.hasOwnProperty(hA) ? alignments[alignment.horizontal] : 'flex-start'
+      const hA = alignment?.horizontal
+      return alignments.hasOwnProperty(hA) ? alignments[alignment?.horizontal] : 'flex-start'
     }
     return 'flex-start'
   }
@@ -79,9 +79,4 @@ export const FormattedText: React.FunctionComponent<Props> = (props) => {
   )
 }
 
-FormattedText.defaultProps = {
-  format: {},
-  lineHeight: 1,
-  unit: 'vh',
-  maxChar: undefined,
-}
+

package/src/components/NewsContainer/index.tsx

@@ -4,6 +4,7 @@ import { StandardItem } from '../StandardItem'
 import { GalleryItem } from '../GalleryItem'
 import { GradientItem } from '../GradientItem'
 import './styles.css'
+import { FormattedText } from '../FormattedText'
 
 type Props = {
   data: VixonicData
@@ -12,7 +13,7 @@ type Props = {
 
 export const NewsContainer: React.FunctionComponent<Props> = (props) => {
   const { parameters, downloadsPath } = props.data
-  const { animationSpeed } = parameters
+  const { animationSpeed, defaultMessage } = parameters
   const timerRef = useRef<number | undefined>(undefined)
   const [currentIndex, setCurrentIndex] = useState(0)
   const item = props.items.length > currentIndex ? props.items[currentIndex] : undefined
@@ -40,7 +41,7 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
     return <TransitionGroup className='main-container' style={{
       backgroundColor: parameters.gradientBackgroundColor || 'red'
     }}>
-      {item &&
+      {item ?
         <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
           <div className={'news-item-container'}>
             {
@@ -48,6 +49,7 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
             }
           </div>
         </CSSTransition>
+       : <FormattedText text={defaultMessage || 'No hay cumpleaños para mostrar'} format={parameters.defaultMessageFormat} />
       }
     </TransitionGroup>
 
@@ -56,15 +58,17 @@ export const NewsContainer: React.FunctionComponent<Props> = (props) => {
       padding: parameters.padding,
       backgroundImage: parameters.background && `url("${downloadsPath}/${parameters.background.filename}")`
     }}>
-      {item &&
+      {item ?
         <CSSTransition key={item.id} classNames={parameters.animationType || 'fade'} timeout={(1750 / (animationSpeed || 1)) * 2}>
           <div className={'news-item-container'}>
-            {parameters.template !== 'gallery'
-              ? <StandardItem parameters={parameters} item={item} />
-              : <GalleryItem parameters={parameters} item={item} />
+            {parameters.template === 'gallery'
+              ? <GalleryItem parameters={parameters} item={item} />
+              : <StandardItem parameters={parameters} item={item} />
             }
           </div>
         </CSSTransition>
+        :<FormattedText text={defaultMessage || 'No hay noticias para mostrar'} format={parameters.defaultMessageFormat} />
+
       }
     </TransitionGroup>
   }

package/src/parameters.d.ts

@@ -4,6 +4,124 @@ declare type VixonicData = {
   parameters: VixonicParameters
 }
 
-declare type VixonicParameters = Partial<{
-  news: {titleShort: string, titleMedium: string, titleLarge: string, titleExtraLarge: string, descriptionShort: string, descriptionMedium: string, descriptionLarge: string, descriptionExtraLarge: 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
+declare type VixonicParameters = 
+Partial<{
+  news: {
+    titleShort: string, 
+    titleMedium: string, 
+    titleLarge: string, 
+    titleExtraLarge: string, 
+    descriptionShort: string, 
+    descriptionMedium: string, 
+    descriptionLarge: string, 
+    descriptionExtraLarge: 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',
+    defaultMessage: string
+    defaultMessageFormat: {
+      fontSize?: number,
+      fontColor?: string,
+      alignment?: {
+        horizontal?: 'left' | 'right' | 'center'},
+        font?: {
+          filename: string; 
+          id: string; 
+          __isAsset: true}
+    }
+    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/parameters.json

@@ -37,30 +37,6 @@
         "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",
@@ -91,6 +67,19 @@
       },
       "fontColor": "#336699",
       "fontSize": "36"
-    }
+    },
+    "defaultMessageFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "defaultMessage": "No hay noticias disponibles en este momento."
   }
 }