@vixoniccom/footbal-score 1.4.6-dev.0 → 1.4.6-dev.2

package/build/test/parameters.json

@@ -1,6 +1,7 @@
 {
   "parameters": {
     "league": 1,
+    "debugTimezone" : false,
     "timeStart": "10 am",
     "timeEnd": "1 am",
     "matchesYesterday": false,

package/configuration/dataGroup/dataInputs.ts

@@ -98,4 +98,11 @@ export const dataInputs = [
     description: 'Duración por página (en segundos)',
     range: new NumberRangeValue(1, 100),
   }),
+  new Switch({
+    id: 'debugTimezone',
+    label: 'Debug Timezone',
+    displayOnTrue: 'Visible',
+    displayOnFalse: 'Oculto',
+    defaultValue: false,
+  }),
 ]

package/configuration.json

@@ -373,6 +373,14 @@
           "type": "number-input",
           "range": "[1:100:]",
           "description": "Duración por página (en segundos)"
+        },
+        {
+          "id": "debugTimezone",
+          "label": "Debug Timezone",
+          "type": "switch",
+          "defaultValue": false,
+          "displayOnTrue": "Visible",
+          "displayOnFalse": "Oculto"
         }
       ]
     },

package/package.json

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

package/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import localforage from 'localforage'
 import { FontLoader, FormattedText, Table } from './components'
-import { getFixture } from './helpers/getFixture'
+import { getFixture, resolvedTimezone } from './helpers/getFixture'
 
 export type Props = {
   data: VixonicData
@@ -56,7 +56,7 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   const [dataFixture, setDataFixture] = useState<any[]>([])
   const [leagueState, setLeagueState] = useState<string>('')
   const { parameters, downloadsPath } = data
-  const { backgroundImage, padding, msj0 = '', league = '9' } = parameters
+  const { backgroundImage, padding, msj0 = '', league = '9', debugTimezone = false } = parameters
   const backgroundImageState = backgroundImage?.filename
     ? `url("${downloadsPath}/${backgroundImage.filename}")`
     : ''
@@ -142,42 +142,66 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
     fetchAndSchedule()
   }, [league])
 
+  const timezone = resolvedTimezone
+
   return (
-    dataFixture.length > 0 ?
-      <div style={{
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundImage: backgroundImageState,
-        backgroundSize: '100% 100%',
-        padding: padding
-      }}>
-        <FontLoader paths={['nameFormat.font', 'statusFormat.font', 'timeFormat.font', 'titleFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'goalsFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
-        {parameters.titleEnabled &&
+    <>
+      {dataFixture.length > 0 ?
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          backgroundImage: backgroundImageState,
+          backgroundSize: '100% 100%',
+          padding: padding
+        }}>
+          <FontLoader paths={['nameFormat.font', 'statusFormat.font', 'timeFormat.font', 'titleFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'goalsFormat.font']} parameters={parameters} downloadsPath={downloadsPath} />
+          {parameters.titleEnabled &&
+            <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
+              <FormattedText text={parameters.title0 || 'Partidos Mundial'} format={parameters.titleFormat} />
+            </div>
+          }
+          <Table dataFixture={dataFixture} parameters={parameters} />
+        </div> :
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          backgroundImage: backgroundImageState,
+          backgroundSize: '100% 100%',
+          padding: padding,
+          display: 'flex',
+          alignItems: parameters.alignVerticalMsj
+        }}>
+          <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
           <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
-            <FormattedText text={parameters.title0 || 'Partidos Mundial'} format={parameters.titleFormat} />
+            <FormattedText text={msj0 || 'Sin partidos'} format={parameters.formatMjs} />
           </div>
-        }
-        <Table dataFixture={dataFixture} parameters={parameters} />
-      </div> :
-      <div style={{
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundImage: backgroundImageState,
-        backgroundSize: '100% 100%',
-        padding: padding,
-        display: 'flex',
-        alignItems: parameters.alignVerticalMsj
-      }}>
-        <FontLoader paths={['nameFormat.font', 'descriptionFormat.font', 'dateDayFormat.font', 'dateMonthFormat.font', 'formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
-        <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
-          <FormattedText text={msj0 || 'Sin partidos'} format={parameters.formatMjs} />
         </div>
-      </div>
+      }
+      {debugTimezone && (
+        <div style={{
+          position: 'fixed',
+          bottom: 8,
+          right: 8,
+          background: 'rgba(0,0,0,0.75)',
+          color: '#00ff00',
+          fontSize: 10,
+          fontFamily: 'monospace',
+          padding: '4px 8px',
+          borderRadius: 4,
+          zIndex: 9999,
+          lineHeight: 1.4,
+          pointerEvents: 'none',
+          whiteSpace: 'nowrap',
+        }}>
+          TZ: {timezone}
+        </div>
+      )}
+    </>
   )
 }

package/src/components/Table/components/Time.tsx

@@ -1,17 +1,44 @@
-import moment from 'moment'
 import React from 'react'
 import { FormattedText } from '../../'
+import { resolvedTimezone } from '../../../helpers/getFixture'
 
 interface Props {
   time: number
   parameters: VixonicParameters
 }
 
+const timezone = resolvedTimezone
+
+const formatFixtureTime = (timestamp: number) => {
+  const date = new Date(timestamp * 1000)
+
+  const dateParts = new Intl.DateTimeFormat('es-ES', {
+    timeZone: timezone,
+    day: '2-digit',
+    month: '2-digit',
+  }).formatToParts(date)
+  const day = dateParts.find(p => p.type === 'day')?.value ?? ''
+  const month = dateParts.find(p => p.type === 'month')?.value ?? ''
+
+  const timeParts = new Intl.DateTimeFormat('en-US', {
+    timeZone: timezone,
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  }).formatToParts(date)
+  const hour = timeParts.find(p => p.type === 'hour')?.value ?? ''
+  const minute = timeParts.find(p => p.type === 'minute')?.value ?? ''
+  const period = timeParts.find(p => p.type === 'dayPeriod')?.value?.toLowerCase() ?? ''
+
+  return { dateStr: `${day}-${month}`, timeStr: `${hour}:${minute} ${period}` }
+}
+
 export const Time: React.FunctionComponent<Props> = ({ time, parameters }) => {
+  const { dateStr, timeStr } = formatFixtureTime(time)
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-      <FormattedText text={moment.unix(time).format('DD-MM')} format={parameters.timeFormat} />
-      <FormattedText text={moment.unix(time).format('h:mm a')} format={parameters.timeFormat} />
+      <FormattedText text={dateStr} format={parameters.timeFormat} />
+      <FormattedText text={timeStr} format={parameters.timeFormat} />
     </div>
   )
 }

package/src/helpers/getFixture.ts

@@ -11,6 +11,17 @@ const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000
 
 const USE_MOCK = false
 
+export const resolvedTimezone = (() => {
+  try {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+    console.log(`[football-score] Timezone resolved: ${tz}`)
+    return tz
+  } catch (error) {
+    console.warn('[football-score] Failed to resolve timezone, defaulting to UTC', error)
+    return 'UTC'
+  }
+})()
+
 export const getFixture = async (league: string, yesterday?: boolean, tomorrow?: boolean) => {
   if (USE_MOCK) return mockFixtures
 
@@ -18,14 +29,7 @@ export const getFixture = async (league: string, yesterday?: boolean, tomorrow?:
   const year = moment().format('YYYY')
   const from = yesterday ? moment(Date.now() - MILLISECONDS_PER_DAY).format('YYYY-MM-DD') : today
   const to = tomorrow ? moment(Date.now() + MILLISECONDS_PER_DAY).format('YYYY-MM-DD') : today
-  const timezone = (() => {
-    try {
-      const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
-      return tz
-    } catch (error) {
-      return 'UTC'
-    }
-  })()
+  const timezone = resolvedTimezone
 
   const options = {
     method: 'GET',

package/src/parameters.d.ts

@@ -5,5 +5,5 @@ declare type VixonicData = {
 }
 
 declare type VixonicParameters = Partial<{
-  league: '1' | '9' | '4' | '22' | '15' | '1220' | '128' | '265', matchesYesterday: boolean, matchesTomorrow: boolean, timeStart: '12m' | '1m' | '2m' | '3m' | '4m' | '5m' | '6m' | '7m' | '8m' | '9m' | '10m' | '11m' | '12pm' | '1pm' | '2pm' | '3pm' | '4pm' | '5pm' | '6pm' | '7pm' | '8pm' | '9pm' | '10pm' | '11pm', timeEnd: '12m' | '1m' | '2m' | '3m' | '4m' | '5m' | '6m' | '7m' | '8m' | '9m' | '10m' | '11m' | '12pm' | '1pm' | '2pm' | '3pm' | '4pm' | '5pm' | '6pm' | '7pm' | '8pm' | '9pm' | '10pm' | '11pm', updateTime: 300000 | 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000, titleEnabled: boolean, title0: string, titleFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, msj0: string, formatMjs: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, alignVerticalMsj: 'flex-start' | 'center' | 'flex-end', itemsPerPage: number, durationPerPage: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, columnGap: string, rowGap: string, timeFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthTime: string, statusFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthStatus: string, goalsFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthScore: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthDescription: string, imageSize: number, widthImage: string
+  league: '1' | '9' | '4' | '22' | '15' | '1220' | '128' | '265', matchesYesterday: boolean, matchesTomorrow: boolean, timeStart: '12m' | '1m' | '2m' | '3m' | '4m' | '5m' | '6m' | '7m' | '8m' | '9m' | '10m' | '11m' | '12pm' | '1pm' | '2pm' | '3pm' | '4pm' | '5pm' | '6pm' | '7pm' | '8pm' | '9pm' | '10pm' | '11pm', timeEnd: '12m' | '1m' | '2m' | '3m' | '4m' | '5m' | '6m' | '7m' | '8m' | '9m' | '10m' | '11m' | '12pm' | '1pm' | '2pm' | '3pm' | '4pm' | '5pm' | '6pm' | '7pm' | '8pm' | '9pm' | '10pm' | '11pm', updateTime: 300000 | 600000 | 1800000 | 3600000 | 21600000 | 43200000 | 86400000, titleEnabled: boolean, title0: string, titleFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, msj0: string, formatMjs: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, alignVerticalMsj: 'flex-start' | 'center' | 'flex-end', itemsPerPage: number, durationPerPage: number, backgroundImage: {id?: string, filename?: string, extension?: string}, padding: string, columnGap: string, rowGap: string, timeFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthTime: string, statusFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthStatus: string, goalsFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthScore: string, descriptionEnabled: boolean, descriptionFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, widthDescription: string, imageSize: number, widthImage: string, debugTimezone: boolean
 }>

package/src/test/parameters.json

@@ -1,6 +1,7 @@
 {
   "parameters": {
     "league": 1,
+    "debugTimezone" : false,
     "timeStart": "10 am",
     "timeEnd": "1 am",
     "matchesYesterday": false,