@vixoniccom/footbal-score 1.2.1-beta.1 → 1.2.1-hotfix.0

package/CHANGELOG.md

@@ -2,19 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [1.2.1-beta.1](https://bitbucket.org/vixonic_dev/football-score/compare/v1.2.1-beta.0...v1.2.1-beta.1) (2024-06-25)
+### [1.2.1-hotfix.0](https://github.com/Vixonic/store-football-score/compare/v1.2.0...v1.2.1-hotfix.0) (2026-06-17)
 
 
 ### Bug Fixes
 
-* pagination was added to the app ([b847626](https://bitbucket.org/vixonic_dev/football-score/commit/b847626d7982b74c5e479fcc5878b65968349cc0))
-
-### [1.2.1-beta.0](https://bitbucket.org/vixonic_dev/football-score/compare/v1.2.0...v1.2.1-beta.0) (2024-06-24)
-
-
-### Bug Fixes
-
-* app was refactored and also new properties were added to show matches from previous and next days ([0a7be0c](https://bitbucket.org/vixonic_dev/football-score/commit/0a7be0ca60fe7ce2dce23d2287a965e5c636ce1e))
+* **getFixture:** use API-Sports endpoint and rotate API key ([a45b513](https://github.com/Vixonic/store-football-score/commit/a45b5137be863d3fac048c8a21b92e816109c3bd))
 
 ## [1.2.0](https://bitbucket.org/vixonic_dev/football-score/compare/v1.2.0-beta.0...v1.2.0) (2024-06-24)
 

package/configuration.json

@@ -31,18 +31,6 @@
             }
           ]
         },
-        {
-          "type": "switch",
-          "id": "matchesYesterday",
-          "label": "Mostrar partidos día anterior",
-          "defaultValue": false
-        },
-        {
-          "type": "switch",
-          "id": "matchesTomorrow",
-          "label": "Mostrar partidos día posterior",
-          "defaultValue": false
-        },
         {
           "id": "timeStart",
           "type": "select-input",
@@ -299,7 +287,7 @@
         {
           "type": "text-input",
           "id": "title0",
-          "description": "Título",
+          "description": "Texto.",
           "show": "{{titleEnabled}} === true"
         },
         {
@@ -317,21 +305,7 @@
         {
           "type": "text-format",
           "id": "formatMjs",
-          "label": "Formato Mensaje"
-        },
-        {
-          "type": "number-input",
-          "id": "itemsPerPage",
-          "range": "[1:100]",
-          "label": "Elementos por página",
-          "defaultValue": 4
-        },
-        {
-          "type": "number-input",
-          "id": "durationPerPage",
-          "range": "[1:100]",
-          "label": "Duración por página (segundos)",
-          "defaultValue": 5
+          "label": "Formato Status"
         },
         {
           "id": "alignVerticalMsj",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixoniccom/footbal-score",
   "alias": "Resultados Deportivos",
-  "version": "1.2.1-beta.1",
+  "version": "1.2.1-hotfix.0",
   "description": "Muestra resultados en vivo de fútbol.",
   "main": "main.js",
   "author": "",

package/src/App.tsx

@@ -1,18 +1,22 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import { FontLoader } from './components/FontLoader'
+import { FormattedText } from './components/FormattedText'
+import { Table } from './components/table-fixture/Table'
+import { ConfigureContext } from './contex/configureContext/ConfigureContext'
+import { getFixture } from './helpers/getFixture'
 import localforage from 'localforage'
 import moment from 'moment'
-import { FontLoader, FormattedText, Table } from './components'
-import { getFixture } from './helpers/getFixture'
 
-export type Props = {
-  data: VixonicData
+type Props = {
+  data: VixonicData,
   start: boolean
 }
 
 export const App = ({ data, start }: Props) => {
-  const [dataFixture, setDataFixture] = useState<any[]>([])
-  const [league, setLeague] = useState<string>('')
-  const { parameters, downloadsPath } = data
+  const [dataFixture, setDataFixture] = useState([])
+  const [league, setLeague] = useState('')
+  const { configureState, addConfiguration } = useContext(ConfigureContext)
+  const { parameters, downloadsPath } = configureState
   const { backgroundImage, padding, msj0 = '', updateTime } = parameters
   const backgroundImageState = backgroundImage && backgroundImage.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")`
@@ -23,11 +27,12 @@ export const App = ({ data, start }: Props) => {
     const momentLocalStorage: any = dataLocal ? moment().diff(dataLocal.date, 'millisecond') : undefined
     const timeNowFormat = moment().format('h:mma')
     const timeNow = moment(timeNowFormat, 'h:mma')
-    const horaInicio = moment(parameters.timeStart, 'h:mma')
-    const horaFin = moment(parameters.timeEnd, 'h:mma')
+
+    const horaInicio = moment(data.parameters.timeStart, 'h:mma')
+    const horaFin = moment(data.parameters.timeEnd, 'h:mma')
 
     if (momentLocalStorage == undefined || (timeNow.isBetween(horaInicio, horaFin) && momentLocalStorage > updateTime!)) {
-      const dataRequest = await getFixture(parameters.league!, parameters.matchesYesterday, parameters.matchesTomorrow)
+      const dataRequest = await getFixture(data.parameters.league!)
       setDataLocal(dataRequest)
       setDataFixture(dataRequest)
     } else {
@@ -40,6 +45,7 @@ export const App = ({ data, start }: Props) => {
       setLeague(data.parameters.league!)
       getData()
     }
+    addConfiguration(data)
   }, [data])
 
   useEffect(() => {
@@ -97,7 +103,7 @@ export const App = ({ data, start }: Props) => {
             <FormattedText text={parameters.title0 || 'Partidos Mundial'} format={parameters.titleFormat} />
           </div>
         }
-        <Table dataFixture={dataFixture} parameters={parameters} />
+        <Table dataFixture={dataFixture} />
       </div> :
       <div
         style={{

package/src/components/FontLoader.tsx

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import { ConfigureContext } from '../contex/configureContext/ConfigureContext'
+
+interface Props {
+  paths: Array<string>
+}
+
+export const FontLoader = ({ paths }: Props) => {
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters, downloadsPath } = configureState
+  const _getValueByPath = (path: any, obj: any): any => {
+    let pathsArray = path.split('.')
+    let propertyName = pathsArray[0]
+    if (pathsArray.length === 1) return obj[propertyName]
+    else {
+      pathsArray.splice(0, 1)
+      return _getValueByPath(pathsArray.join('.'), obj[propertyName])
+    }
+  }
+  let fonts = paths.map((path: any) => {
+    try {
+      let fontParam = _getValueByPath(path, parameters)
+      let font = {
+        family: fontParam.filename.replace('.', '-'),
+        src: `${downloadsPath}/${fontParam.filename}`
+      }
+      return `
+          @font-face {
+            font-family: "${font.family}";
+            src: url("${font.src}");
+          }
+        `
+    } catch (err) {
+      return ''
+    }
+  })
+
+  return (
+    <style>{fonts}</style>
+  )
+}
+
+FontLoader.defaultProps = {
+  paths: [],
+  parameters: {},
+  downloadsPath: ''
+}
+
+FontLoader.propTypes = {
+  paths: PropTypes.arrayOf(PropTypes.string).isRequired,
+  parameters: PropTypes.object,
+  downloadsPath: PropTypes.string
+}

package/src/components/{FormattedText/index.tsx → FormattedText.tsx}

@@ -58,18 +58,20 @@ export const FormattedText = ({ text, format, maxChar, lineHeight, style, unit,
     justifyContent: getHorizontalAlignment(format.alignment)
   }, style)
 
-  return <div style={containerStyle}>
-    <span style={{
-      color: format?.fontColor,
-      fontFamily: checkNested(format, 'font.filename') ? `"${format?.font?.filename?.replace('.', '-')}"` : '',
-      fontSize: `${format?.fontSize}${unit}`,
-      textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
-      lineHeight: lineHeight,
-      paddingBottom: paddingBottom,
-      paddingTop: paddingTop,
-      display: 'inline-flex'
-    }}>{renderText}</span>
-  </div>
+  return (
+    <div style={containerStyle}>
+      <span style={{
+        color: format?.fontColor,
+        fontFamily: checkNested(format, 'font.filename') ? `"${format?.font?.filename?.replace('.', '-')}"` : '',
+        fontSize: `${format?.fontSize}${unit}`,
+        textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
+        lineHeight: lineHeight,
+        paddingBottom: paddingBottom,
+        paddingTop: paddingTop,
+        display: 'inline-flex'
+      }}>{renderText}</span>
+    </div>
+  )
 }
 
 FormattedText.defaultProps = {

package/src/components/{Table/components → table-fixture}/Results.tsx

@@ -1,8 +1,12 @@
-import React from 'react'
-import { FormattedText } from '../../FormattedText'
+import React, { useContext } from 'react'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../FormattedText'
 import { isNumber } from 'lodash'
 
-export const Results = ({ parameters, goals, score }: any) => {
+export const Results = ({ goals, score }: any) => {
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters } = configureState
+
   return (
     <div style={{
       display: 'flex',

package/src/components/{Table/components → table-fixture}/Row.tsx

@@ -1,17 +1,19 @@
-import React, { useEffect, useState } from 'react'
-import { Results, Status, Time  } from './'
-import { FormattedText } from '../../'
-import { translateTeams } from '../../../helpers/translateTeams'
+import React, { useContext, useEffect, useState } from 'react'
+import { Time } from './Time'
+import { FormattedText } from '../FormattedText'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { Status } from './Status'
+import { translateTeams } from '../../helpers/translateTeams'
+import { Results } from './Results'
 
-type Props = {
-  item: any,
-  parameters: VixonicParameters
-}
+export const Row = (item: any) => {
 
-export const Row = ({ item, parameters }: Props) => {
-  const { fixture, teams, goals, score } = item
+  const { fixture, teams, goals, score } = item.item;
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters } = configureState
   const [homeTeam, setHomeTeam] = useState(false)
   const [awayTeam, setAwayTeam] = useState(false)
+
   const {
     descriptionEnabled,
     widthDescription,
@@ -25,10 +27,11 @@ export const Row = ({ item, parameters }: Props) => {
     widthTime,
   } = parameters
 
-  const gridColumns = descriptionEnabled ? `${widthTime || '200px'} ${widthStatus || '200px'} ${widthDescription || '200px'}  ${widthImage || '300px'} ${widthScore || '100px'} ${widthImage || '300px'} ${widthDescription || '200px'}` :
+  let gridColumns = descriptionEnabled ? `${widthTime || '200px'} ${widthStatus || '200px'} ${widthDescription || '200px'}  ${widthImage || '300px'} ${widthScore || '100px'} ${widthImage || '300px'} ${widthDescription || '200px'}` :
     ` ${widthTime || '100px'} ${widthStatus || '100px'} ${widthImage || '300px'} ${widthScore || '100px'} ${widthImage || '300px'}`
-  const nameHome = translateTeams(teams.home.name)
-  const nameAway = translateTeams(teams.away.name)
+
+  let nameHome = translateTeams(teams.home.name)
+  let nameAway = translateTeams(teams.away.name)
 
   const requestFlagHome = async (urlLogo: string) => {
     try {
@@ -56,6 +59,7 @@ export const Row = ({ item, parameters }: Props) => {
     requestFlagAway(teams.away.logo)
   }, [])
 
+
   return (
     <div
       style={{
@@ -76,7 +80,7 @@ export const Row = ({ item, parameters }: Props) => {
           justifyContent: 'flex-end',
         }}
       >
-        <Time time={Number(fixture.timestamp)} parameters={parameters} />
+        <Time time={Number(fixture.timestamp)} />
       </div>
       <div
         style={{
@@ -84,7 +88,7 @@ export const Row = ({ item, parameters }: Props) => {
           justifyContent: 'flex-end',
         }}
       >
-        <Status status={fixture.status.short} parameters={parameters} />
+        <Status status={fixture.status.short} />
       </div>
       {
         descriptionEnabled &&
@@ -110,7 +114,9 @@ export const Row = ({ item, parameters }: Props) => {
 
         }
       </div>
-      <Results goals={goals} score={score} parameters={parameters} />
+
+      <Results goals={goals} score={score} />
+
       <div
         style={{
           display: 'flex',

package/src/components/{Table/components → table-fixture}/Status.tsx

@@ -1,8 +1,15 @@
-import React from 'react'
-import { FormattedText } from '../../'
+import React, { useContext } from 'react'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../FormattedText'
+
+export const Status = ({
+  status
+}: any) => {
 
-export const Status = ({ status, parameters }: { status: string, parameters: VixonicParameters }) => {
   let translateStatus: string = ''
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters } = configureState
+
   switch (status) {
     case 'NS':
       translateStatus = 'Por iniciar'

package/src/components/table-fixture/Table.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Row } from './Row'
+
+type Props = {
+  dataFixture: any
+}
+
+export const Table = ({ dataFixture }: Props) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column'
+      }}
+    >
+      {
+        dataFixture.map((item: any) => (
+          <Row item={item} />
+        ))
+      }
+    </div>
+  )
+}

package/src/components/table-fixture/TeamItems.tsx

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../FormattedText'
+
+export const TeamItems = ({ team, home }: any) => {
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters } = configureState
+
+  return (
+    home ? (
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        width: '450px',
+        padding: '10px',
+      }}>
+        <FormattedText text={team.name} format={parameters.nameFormat || parameters.descriptionFormat} />
+        <img src={team.logo} style={{ width: '100%' }} />
+      </div>) :
+      (<div style={{
+        display: 'flex',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        width: '450px',
+        padding: '10px',
+      }}>
+        <img src={team.logo} style={{ width: '100%' }} />
+        <FormattedText text={team.name} format={parameters.nameFormat || parameters.descriptionFormat} />
+      </div>)
+  )
+}

package/src/components/{Table/components → table-fixture}/Time.tsx

@@ -1,8 +1,12 @@
 import moment from 'moment'
-import React from 'react'
-import { FormattedText } from '../../'
+import React, { useContext } from 'react'
+import { ConfigureContext } from '../../contex/configureContext/ConfigureContext'
+import { FormattedText } from '../FormattedText'
+
+export const Time = ({ time }: any) => {
+  const { configureState } = useContext(ConfigureContext)
+  const { parameters } = configureState
 
-export const Time = ({ time, parameters }: { time: number, parameters: VixonicParameters }) => {
   return (
     <div style={{
       display: 'flex',

package/src/contex/configureContext/ConfigureContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+type ConfigureContext = {
+  configureState: VixonicData
+  addConfiguration: (configure: VixonicData) => void
+}
+
+export const ConfigureContext = createContext<ConfigureContext>({} as ConfigureContext)

package/src/contex/configureContext/ConfigureProvider.tsx

@@ -0,0 +1,87 @@
+import React, { useReducer } from 'react'
+import { ConfigureContext } from './ConfigureContext'
+import { parameterReducer } from './configureReducer'
+
+const INITIAL_STATE: VixonicData = {
+  downloadsPath: '',
+  parameters: {
+    abbreviatedMonths: false,
+    animationMode: '',
+    animationOrder: false,
+    animationSpeed: 1.5,
+    animationTime: '',
+    backgroundImage: { id: '', filename: '', _isAsset: true },
+    apiDomain: '',
+    containerColumns: '',
+    statusFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: 'center' }, fontColor: '' },
+    containerColumnsGap: '',
+    containerRows: '',
+    containerRowsGap: '',
+    dataMode: '',
+    title0: 'App Mundial',
+    titleEnabled: false,
+    titleFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 55, alignment: { horizontal: 'center' }, fontColor: '', },
+    goalsFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 55, alignment: { horizontal: 'center' }, fontColor: '', },
+    timeFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 55, alignment: { horizontal: 'center' }, fontColor: '', },
+    dateAlignment: 'center',
+    dateDayFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 55, alignment: { horizontal: 'center' }, fontColor: '', },
+    dateEnabled: true,
+    dateMonthFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 20, alignment: { horizontal: 'center' }, fontColor: '' },
+    datePosition: 1,
+    datePrimaryColor: '',
+    dateStyle: 'circle',
+    descriptionEnabled: true,
+    descriptionFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: 'center' }, fontColor: '' },
+    excludePast: false,
+    imageAlignment: 'center',
+    imageEnabled: true,
+    imagePosition: 0,
+    imageStyle: 'normal',
+    imageSize: 50,
+    itemMargins: '',
+    msj0: 'No hay partidos hoy',
+    nameFormat: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: 'center' }, fontColor: '' },
+    orientation: '',
+    padding: '',
+    photosMode: '',
+    photosZip: { id: '0fb559ec-5da3-4b2d-95c4-d9623754c841', filename: '0fb559ec-5da3-4b2d-95c4-d9623754c841.zip', extension: 'zip', _isAsset: true },
+    template: '',
+    textAlignment: 'center',
+    textPosition: 0,
+    updateTime: 300000,
+    urlBaseApi: '',
+    imageMargin: '',
+    textMargin: '',
+    dateMargin: '',
+    separator: false,
+    widthDescription: '200px',
+    widthImage: '300px',
+    widthScore: '100px',
+    columnGap: '10px',
+    rowGap: '30px',
+    widthStatus: '200px',
+    widthTime: '200px',
+    timeEnd: '7pm',
+    timeStart: '6am',
+    formatMjs: { font: { filename: '', id: '', _isAsset: true }, fontSize: 3.8, alignment: { horizontal: 'center' }, fontColor: '' },
+    alignVerticalMsj: 'center',
+    league: '9'
+  }
+}
+
+interface props {
+  children: JSX.Element | JSX.Element[]
+}
+
+export const ParameterProvider = ({ children }: props) => {
+  const [configureState, dispatch] = useReducer(parameterReducer, INITIAL_STATE)
+  const addConfiguration = (configure: VixonicData) => {
+    dispatch({ type: 'addConfigure', payload: configure })
+  }
+
+  return (
+    <ConfigureContext.Provider value={{ configureState, addConfiguration }}>
+      {children}
+    </ConfigureContext.Provider>
+  )
+}

package/src/contex/configureContext/configureReducer.ts

@@ -0,0 +1,62 @@
+
+type ConfigureAction =
+  | { type: 'addConfigure', payload: VixonicData }
+
+export const parameterReducer = (state: VixonicData, action: ConfigureAction) => {
+  const { downloadsPath, parameters } = action.payload
+
+  switch (action.type) {
+    case 'addConfigure':
+      return {
+        downloadsPath: downloadsPath,
+        parameters: {
+          backgroundImage: parameters.backgroundImage,
+          descriptionEnabled: parameters.descriptionEnabled,
+          descriptionFormat: parameters.descriptionFormat,
+          imageAlignment: parameters.imageAlignment,
+          imageEnabled: parameters.imageEnabled,
+          imagePosition: parameters.imagePosition,
+          imageSize: parameters.imageSize,
+          imageStyle: parameters.imageStyle,
+          itemMargins: parameters.itemMargins,
+          msj0: parameters.msj0,
+          nameFormat: parameters.nameFormat,
+          orientation: parameters.orientation,
+          padding: parameters.padding,
+          photosMode: parameters.photosMode,
+          photosZip: parameters.photosZip,
+          template: parameters.template,
+          textAlignment: parameters.textAlignment,
+          textPosition: parameters.textPosition,
+          updateTime: parameters.updateTime,
+          urlBaseApi: parameters.urlBaseApi,
+          imageMargin: parameters.imageMargin,
+          textMargin: parameters.textMargin,
+          dateMargin: parameters.dateMargin,
+          separator: parameters.separator,
+          descriptionMaxChar: parameters.descriptionMaxChar,
+          nameMaxChar: parameters.nameMaxChar,
+          timeFormat: parameters.timeFormat,
+          goalsFormat: parameters.goalsFormat,
+          title0: parameters.title0,
+          titleEnabled: parameters.titleEnabled,
+          titleFormat: parameters.titleFormat,
+          statusFormat: parameters.statusFormat,
+          widthDescription: parameters.widthDescription,
+          widthImage: parameters.widthImage,
+          widthScore: parameters.widthScore,
+          columnGap: parameters.columnGap,
+          rowGap: parameters.rowGap,
+          widthTime: parameters.widthTime,
+          widthStatus: parameters.widthStatus,
+          timeStart: parameters.timeStart,
+          timeEnd: parameters.timeEnd,
+          formatMjs: parameters.formatMjs,
+          alignVerticalMsj: parameters.alignVerticalMsj,
+          league: parameters.league
+        }
+      }
+    default:
+      return state;
+  }
+}

package/src/helpers/getFixture.ts

@@ -1,20 +1,16 @@
 import moment from 'moment'
-import axios from 'axios'
+const axios = require('axios')
 
-export const getFixture = async (league: string, yesterday?: boolean, tomorrow?: boolean) => {
+export const getFixture = async (league: string) => {
   const today = moment().format('YYYY-MM-DD')
   const year = moment().format('YYYY')
-  const from = yesterday ? moment(Date.now() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD') : today
-  const to = tomorrow ? moment(Date.now() + 24 * 60 * 60 * 1000).format('YYYY-MM-DD') : today
-
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
   const options = {
     method: 'GET',
-    url: 'https://api-football-v1.p.rapidapi.com/v3/fixtures',
-    params: { from, to, league: league, season: `${year}`, timezone: `${timezone}` },
+    url: 'https://v3.football.api-sports.io/fixtures',
+    params: { date: `${today}`, league: league, season: `${year}`, timezone: `${timezone}` },
     headers: {
-      'X-RapidAPI-Key': 'a7e693d4c5msh72a2ff2020fd601p12dd08jsn0f168421d7bb',
-      'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'
+      'x-apisports-key': '932ef9439de2eb39756b44e7ff8338d8'
     }
   }
 

package/src/helpers/translateTeams.ts

@@ -1,3 +1,4 @@
+
 export const translateTeams = (team: string) => {
   switch (team) {
     case 'England':

package/src/main.tsx

@@ -1,10 +1,10 @@
 import ReactDOM from 'react-dom'
 import React from 'react'
-import { App, Props } from './App'
-
+import { App } from './App'
+import { ParameterProvider } from './contex/configureContext/ConfigureProvider'
 const { ipcRenderer } = require('electron')
-let start: boolean = false
 
+let start: boolean = false
 ipcRenderer.on('preload', (_event: any, data: VixonicData) => {
   render(data)
 })
@@ -23,5 +23,9 @@ ipcRenderer.on('finish', (_event: any) => {
 })
 
 function render(data: VixonicData) {
-  ReactDOM.render(React.createElement<Props>(App, {data, start}), document.getElementById('root'))
+  ReactDOM.render(
+    <ParameterProvider>
+      <App data={data} start={start} />
+    </ParameterProvider>
+    , document.getElementById('root'))
 }

package/src/parameters.d.ts

@@ -6,6 +6,7 @@ declare type VixonicData = {
   downloadsPath: string
 }
 
+
 declare type VixonicParameters = Partial<{
   abbreviatedMonths: boolean
   animationMode: string
@@ -52,45 +53,42 @@ declare type VixonicParameters = Partial<{
   textAlignment: keyof typeof alignment
   textPosition: number
   updateTime: number
-  urlBaseApi: string
-  imageMargin: string
-  textMargin: string
-  dateMargin: string
-  separator: boolean
-  separatorWidth: number
-  separatorColor: string
-  nameMaxChar: number
-  descriptionMaxChar: number
-  statusFormat: DateFormat
-  widthDescription: string
-  widthImage: string
-  widthScore: string
-  columnGap: string
-  rowGap: string
-  widthTime: string
+  urlBaseApi: string,
+  imageMargin: string,
+  textMargin: string,
+  dateMargin: string,
+  separator: boolean,
+  separatorWidth: number,
+  separatorColor: string,
+  nameMaxChar: number,
+  descriptionMaxChar: number,
+  statusFormat: DateFormat,
+  widthDescription: string,
+  widthImage: string,
+  widthScore: string,
+  columnGap: string,
+  rowGap: string,
+  widthTime: string,
   widthStatus: string
-  timeStart: string
-  timeEnd: string
-  formatMjs: DateFormat
-  alignVerticalMsj: string
+  timeStart: string,
+  timeEnd: string,
+  formatMjs: DateFormat,
+  alignVerticalMsj: string,
   league: string
-  matchesTomorrow: boolean
-  matchesYesterday: boolean
-  itemsPerPage: number
-  durationPerPage: number
 }>
 
+
 type GeneralData = {
   filename?: string
-  id?: string
-  extension?: string
+  id?: string,
+  extension?: string,
   _isAsset: boolean
 }
 
 type DateFormat = {
-  alignment?: { horizontal?: 'left' | 'right' | 'center' }
-  font?: GeneralData
-  fontColor?: string
+  alignment?: { horizontal?: 'left' | 'right' | 'center' },
+  font?: GeneralData,
+  fontColor?: string,
   fontSize?: number
 }
 
@@ -113,4 +111,4 @@ const styles = {
   calendarText: 'calendarText',
   circle: 'circle',
   outlines: 'outlines'
-}
+}

package/src/test/parameters.json

@@ -1,7 +1,98 @@
 {
   "parameters": {
-    "league": 9,
-    "matchesYesterday": false,
-    "matchesTomorrow": true
+    "urlBaseApi": "mandomedio",
+    "msj0": "No hay partidos",
+    "statusEnabled": true,
+    "timeRequest": 60000,
+    "rowGap": "30px",
+    "columnGap": "10px",
+    "padding": "30px 25px 80px 40px",
+    "dataMode": "monthly",
+    "template": "standard",
+    "league": "9",
+    "dateStyle": "circle",
+    "photosZip": {
+      "id": "d1093778-f3c9-42c8-9b07-9f8736390aeb",
+      "filename": "d1093778-f3c9-42c8-9b07-9f8736390aeb.zip",
+      "__isAsset": true,
+      "extension": "zip"
+    },
+    "imageStyle": "circle",
+    "nameFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "photosMode": "zip",
+    "updateTime": 300000,
+    "dateEnabled": true,
+    "excludePast": false,
+    "itemMargins": "5px",
+    "orientation": "h",
+    "datePosition": 1,
+    "imageEnabled": true,
+    "textPosition": 3,
+    "animationMode": "fade",
+    "animationTime": "5",
+    "containerRows": "3",
+    "dateAlignment": "center",
+    "dateDayFormat": {
+      "font": {
+        "id": "c705a739-312e-4334-9231-e73a05e9d382",
+        "filename": "c705a739-312e-4334-9231-e73a05e9d382.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 55,
+      "alignment": {
+        "horizontal": "center"
+      },
+      "fontColor": "#ffffff"
+    },
+    "imagePosition": 2,
+    "textAlignment": "center",
+    "animationOrder": false,
+    "animationSpeed": 1.5,
+    "imageAlignment": "center",
+    "backgroundImage": {
+      "id": "",
+      "filename": "",
+      "__isAsset": true
+    },
+    "dateMonthFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 20,
+      "alignment": {
+        "horizontal": "center"
+      },
+      "fontColor": "#ffffff"
+    },
+    "containerColumns": "1",
+    "containerRowsGap": "5",
+    "datePrimaryColor": "#d13139",
+    "abbreviatedMonths": false,
+    "descriptionFormat": {
+      "font": {
+        "id": "7953953c-7029-4730-ae4d-cff4abd5288f",
+        "filename": "7953953c-7029-4730-ae4d-cff4abd5288f.ttf",
+        "__isAsset": true
+      },
+      "fontSize": 3.8,
+      "alignment": {
+        "horizontal": "left"
+      },
+      "fontColor": "#585858"
+    },
+    "descriptionEnabled": true
   }
 }

package/src/components/FontLoader/index.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-
-type Props = {
-  parameters: VixonicParameters
-  downloadsPath: string
-  paths: string[]
-}
-
-export const FontLoader = ({ parameters, downloadsPath, paths }: Props) => {
-  const _getValueByPath = (path: any, obj: any): any => {
-    const pathsArray = path.split('.')
-    const propertyName = pathsArray[0]
-    if (pathsArray.length === 1) return obj[propertyName]
-    else {
-      pathsArray.splice(0, 1)
-      return _getValueByPath(pathsArray.join('.'), obj[propertyName])
-    }
-  }
-
-  const fonts = paths.map((path: any) => {
-    try {
-      const fontParam = _getValueByPath(path, parameters)
-      const font = {
-        family: fontParam.filename.replace('.', '-'),
-        src: `${downloadsPath}/${fontParam.filename}`
-      }
-      return `
-          @font-face {
-            font-family: "${font.family}";
-            src: url("${font.src}");
-          }
-        `
-    } catch (err) {
-      return ''
-    }
-  })
-
-  return (
-    <style>{fonts}</style>
-  )
-}

package/src/components/Table/components/index.ts

@@ -1,11 +0,0 @@
-import { Results } from './Results'
-import { Row } from './Row'
-import { Status } from './Status'
-import { Time } from './Time'
-
-export {
-  Results,
-  Row,
-  Status,
-  Time
-}

package/src/components/Table/index.tsx

@@ -1,50 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Row } from './components'
-
-type Props = {
-  dataFixture: any[]
-  parameters: VixonicParameters
-}
-
-export const Table = ({ dataFixture, parameters }: Props) => {
-  const { itemsPerPage, durationPerPage } = parameters
-  const rows = Number(itemsPerPage)
-  const orderedData = dataFixture.sort((a, b) => a.fixture.timestamp - b.fixture.timestamp)
-  const [page, setPage] = useState<number>(1)
-  const [items, setItems] = useState<string[][]>(orderedData.slice(0, rows))
-  const total = orderedData.length
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      handlePagination()
-    }, Number(durationPerPage) * 1000)
-
-    return () => clearTimeout(timer)
-  }, [page, dataFixture])
-
-  const handlePagination = () => {
-    const newPage = page < (total / rows) ? page + 1 : 1
-    const startIndex = rows * (newPage - 1)
-    const endIndex = (startIndex + rows) < total ? startIndex + rows : total
-    const filterData = orderedData.slice(startIndex, endIndex)
-    setItems(filterData)
-    setPage(newPage)
-  }
-
-  return <div
-    style={{
-      display: 'flex',
-      width: '100%',
-      height: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexDirection: 'column'
-    }}
-  >
-    {
-      items.map((item: any) => (
-        <Row item={item} parameters={parameters} />
-      ))
-    }
-  </div>
-}

package/src/components/index.ts

@@ -1,9 +0,0 @@
-import { FontLoader } from './FontLoader'
-import { FormattedText } from './FormattedText'
-import { Table } from './Table'
-
-export {
-  FontLoader,
-  FormattedText,
-  Table
-}