@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Epg/helpers/interfaces.ts

@@ -1,54 +1,54 @@
-export interface Program {
-  channelUuid: string
-  id: string
-  title: string
-  description: string
-  since: string | number | Date
-  till: string | number | Date
-  image: string
-  [key: string]: any
-}
-
-export interface Channel {
-  uuid: string
-  logo: string
-  [key: string]: any
-}
-
-export interface Theme {
-  primary: {
-    600: string
-    900: string
-  }
-  grey: { 300: string }
-  white: string
-  green: { 300: string }
-  loader: {
-    bg: string
-  }
-  scrollbar: {
-    border: string
-    thumb: {
-      bg: string
-    }
-  }
-  gradient: {
-    blue: {
-      300: string
-      600: string
-      900: string
-    }
-  }
-
-  text: {
-    grey: {
-      300: string
-      500: string
-    }
-  }
-  timeline: {
-    divider: {
-      bg: string
-    }
-  }
-}
+export interface Program {
+  channelUuid: string
+  id: string
+  title: string
+  description: string
+  since: string | number | Date
+  till: string | number | Date
+  image: string
+  [key: string]: any
+}
+
+export interface Channel {
+  uuid: string
+  logo: string
+  [key: string]: any
+}
+
+export interface Theme {
+  primary: {
+    600: string
+    900: string
+  }
+  grey: { 300: string }
+  white: string
+  green: { 300: string }
+  loader: {
+    bg: string
+  }
+  scrollbar: {
+    border: string
+    thumb: {
+      bg: string
+    }
+  }
+  gradient: {
+    blue: {
+      300: string
+      600: string
+      900: string
+    }
+  }
+
+  text: {
+    grey: {
+      300: string
+      500: string
+    }
+  }
+  timeline: {
+    divider: {
+      bg: string
+    }
+  }
+}

package/src/components/Epg/helpers/time.ts

@@ -1,51 +1,51 @@
-import { addDays, format, roundToNearestMinutes, startOfDay } from 'date-fns'
-
-// Import types
-import type { DateTime as DateRangeTime } from './types'
-
-// Variables
-import { TIME_FORMAT } from './variables'
-
-type DateTime = number | string | Date
-
-const getTime = (date: DateTime) => new Date(date).getTime()
-
-export function getLiveStatus(since: DateTime, till: DateTime) {
-  const nowTime = getTime(new Date())
-  const sinceTime = getTime(since)
-  const sinceTill = getTime(till)
-  return nowTime >= sinceTime && sinceTill > nowTime
-}
-
-export function formatTime(date: DateTime) {
-  return format(new Date(date), TIME_FORMAT.DEFAULT).replace(/\s/g, 'T')
-}
-
-export function roundToMinutes(date: DateTime) {
-  return roundToNearestMinutes(new Date(date))
-}
-
-export function isYesterday(since: DateTime, startDate: DateTime) {
-  const sinceTime = getTime(new Date(since))
-  const startDateTime = getTime(new Date(startDate))
-
-  return startDateTime > sinceTime
-}
-
-export function isFutureTime(date: DateTime) {
-  const dateTime = getTime(new Date(date))
-  const now = getTime(new Date())
-  return dateTime > now
-}
-
-// export function getTimeRangeDates(startDate: DateRangeTime, endDate: DateRangeTime) {
-//   let endDateValue = endDate
-//   if (endDate === '')
-//     endDateValue = formatTime(startOfDay(addDays(new Date(startDate), 1)))
-
-//   return { startDate, endDate: ref(endDateValue) }
-// }
-
-export function getDefaultEndDate(startDate: DateRangeTime) {
-  return formatTime(startOfDay(addDays(new Date(startDate), 1)))
-}
+import { addDays, format, roundToNearestMinutes, startOfDay } from 'date-fns'
+
+// Import types
+import type { DateTime as DateRangeTime } from './types'
+
+// Variables
+import { TIME_FORMAT } from './variables'
+
+type DateTime = number | string | Date
+
+const getTime = (date: DateTime) => new Date(date).getTime()
+
+export function getLiveStatus(since: DateTime, till: DateTime) {
+  const nowTime = getTime(new Date())
+  const sinceTime = getTime(since)
+  const sinceTill = getTime(till)
+  return nowTime >= sinceTime && sinceTill > nowTime
+}
+
+export function formatTime(date: DateTime) {
+  return format(new Date(date), TIME_FORMAT.DEFAULT).replace(/\s/g, 'T')
+}
+
+export function roundToMinutes(date: DateTime) {
+  return roundToNearestMinutes(new Date(date))
+}
+
+export function isYesterday(since: DateTime, startDate: DateTime) {
+  const sinceTime = getTime(new Date(since))
+  const startDateTime = getTime(new Date(startDate))
+
+  return startDateTime > sinceTime
+}
+
+export function isFutureTime(date: DateTime) {
+  const dateTime = getTime(new Date(date))
+  const now = getTime(new Date())
+  return dateTime > now
+}
+
+// export function getTimeRangeDates(startDate: DateRangeTime, endDate: DateRangeTime) {
+//   let endDateValue = endDate
+//   if (endDate === '')
+//     endDateValue = formatTime(startOfDay(addDays(new Date(startDate), 1)))
+
+//   return { startDate, endDate: ref(endDateValue) }
+// }
+
+export function getDefaultEndDate(startDate: DateRangeTime) {
+  return formatTime(startOfDay(addDays(new Date(startDate), 1)))
+}

package/src/components/Epg/helpers/types.ts

@@ -1,26 +1,26 @@
-// Interfaces
-import type { Channel, Program } from './interfaces'
-
-export interface Position {
-  width: number
-  height: number
-  top: number
-  left: number
-  // edgeEnd: number
-}
-
-export interface ProgramWithPosition {
-  position: Position
-  data: Program
-}
-
-export interface ProgramItem {
-  position: Omit<Position, 'edgeEnd'>
-  data: Program
-}
-
-export type ChannelWithPosition = Channel & {
-  position: Pick<Position, 'top' | 'height'>
-}
-
-export type DateTime = string | Date
+// Interfaces
+import type { Channel, Program } from './interfaces'
+
+export interface Position {
+  width: number
+  height: number
+  top: number
+  left: number
+  // edgeEnd: number
+}
+
+export interface ProgramWithPosition {
+  position: Position
+  data: Program
+}
+
+export interface ProgramItem {
+  position: Omit<Position, 'edgeEnd'>
+  data: Program
+}
+
+export type ChannelWithPosition = Channel & {
+  position: Pick<Position, 'top' | 'height'>
+}
+
+export type DateTime = string | Date

package/src/components/Epg/helpers/variables.ts

@@ -1,33 +1,33 @@
-// Dimensions
-export const DAY_WIDTH = 7200
-export const HOURS_IN_DAY = 24
-
-export const HOUR_IN_MINUTES = 60
-export const HOUR_IN_SECONDS = 3600
-
-export const TIMELINE_HEIGHT = 40
-
-export const SIDEBAR_WIDTH = 100
-export const ITEM_HEIGHT = 80
-
-export const ITEM_OVERSCAN = ITEM_HEIGHT
-
-// Debounce
-export const DEBOUNCE_WAIT = 100
-export const DEBOUNCE_WAIT_MAX = 100
-
-// Program refresh
-export const PROGRAM_REFRESH = 120000
-
-// Theme
-export const THEME_MODE = {
-  DARK: 'dark',
-  LIGHT: 'light',
-}
-
-export const TIME_FORMAT = {
-  DEFAULT: 'yyyy-MM-dd HH:mm:ss',
-  DATE: 'yyyy-MM-dd',
-  HOURS_MIN: 'HH:mm',
-  BASE_HOURS_TIME: 'h:mm a',
-}
+// Dimensions
+export const DAY_WIDTH = 7200
+export const HOURS_IN_DAY = 24
+
+export const HOUR_IN_MINUTES = 60
+export const HOUR_IN_SECONDS = 3600
+
+export const TIMELINE_HEIGHT = 40
+
+export const SIDEBAR_WIDTH = 100
+export const ITEM_HEIGHT = 80
+
+export const ITEM_OVERSCAN = ITEM_HEIGHT
+
+// Debounce
+export const DEBOUNCE_WAIT = 100
+export const DEBOUNCE_WAIT_MAX = 100
+
+// Program refresh
+export const PROGRAM_REFRESH = 120000
+
+// Theme
+export const THEME_MODE = {
+  DARK: 'dark',
+  LIGHT: 'light',
+}
+
+export const TIME_FORMAT = {
+  DEFAULT: 'yyyy-MM-dd HH:mm:ss',
+  DATE: 'yyyy-MM-dd',
+  HOURS_MIN: 'HH:mm',
+  BASE_HOURS_TIME: 'h:mm a',
+}

package/src/components/Epg/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './useProgram'
-export * from './useTimeline'
+export * from './useProgram'
+export * from './useTimeline'

package/src/components/Epg/hooks/useEpg.ts

@@ -1,160 +1,160 @@
-import { startOfToday } from 'date-fns'
-
-import type { Channel, Program } from '../helpers/interfaces'
-import type { DateTime, Position } from '../helpers/types'
-import { theme as defaultTheme } from '../theme'
-
-import {
-  DAY_WIDTH,
-  ITEM_HEIGHT,
-  ITEM_OVERSCAN,
-  SIDEBAR_WIDTH,
-  formatTime,
-  getConvertedChannels,
-  getConvertedPrograms,
-  getDayWidthResources,
-  getDefaultEndDate,
-  getItemVisibility,
-  getSidebarItemVisibility,
-} from '../helpers'
-
-import { useProvideEpgStore } from '../store'
-import { useLayout } from './useLayout'
-
-interface UseEpgProps {
-  channels: Ref<Channel[]>
-  epg: Ref<Program[]>
-  startDate: Ref<DateTime>
-  endDate: Ref<DateTime>
-  isBaseTimeFormat?: Ref<boolean>
-  isLine?: Ref<boolean>
-  dayWidth?: Ref<number>
-  itemHeight?: MaybeRefOrGetter<number>
-  itemOverscan?: number
-  revertScroll?: MaybeRef<boolean>
-  scrollX?: MaybeRef<number>
-  isSidebar?: Ref<boolean>
-  timezoneOffset?: Ref<number>
-}
-
-const defaultStartDateTime = formatTime(startOfToday())
-
-export function useEpg({
-  channels: channelsEpgRef,
-  epg: epgRef,
-  startDate: startDateInput = ref(defaultStartDateTime),
-  endDate: endDateInput = ref(getDefaultEndDate(defaultStartDateTime)),
-  isBaseTimeFormat = ref(false),
-  isSidebar = ref(true),
-  isTimeline = ref(true),
-  isLoading,
-  isLine = ref(true),
-  theme: customTheme,
-  dayWidth: customDayWidth = ref(DAY_WIDTH),
-  sidebarWidth = ref(SIDEBAR_WIDTH),
-  itemHeight = ref(ITEM_HEIGHT),
-  itemOverscan = ITEM_OVERSCAN,
-  width,
-  height,
-  revertScroll,
-  scrollX: _scrollX = ref(0),
-  divideBy,
-  timezoneOffset = ref(0),
-}: UseEpgProps) {
-  const startDate = toRef(startDateInput)
-  const endDate = toRef(endDateInput)
-
-  // Get day and hour width of the day
-  const dayWidthResourcesProps = computed(() => getDayWidthResources({
-    dayWidth: customDayWidth.value,
-    startDate: startDate.value,
-    endDate: endDate.value,
-  }))
-  const dayWidth = computed(() => dayWidthResourcesProps.value.dayWidth)
-  const hourWidth = computed(() => dayWidthResourcesProps.value.hourWidth)
-  const numberOfHoursInDay = computed(() => dayWidthResourcesProps.value.numberOfHoursInDay)
-  const offsetStartHoursRange = computed(() => dayWidthResourcesProps.value.offsetStartHoursRange)
-
-  // -------- Effects --------
-  const { containerRef, scrollBoxRef, ...layoutProps } = useLayout({
-    startDate,
-    endDate,
-    sidebarWidth,
-    width,
-    height,
-    hourWidth,
-    revertScroll,
-    scrollX: _scrollX,
-    timezoneOffset,
-  })
-
-  const { scrollX, scrollY, layoutWidth, layoutHeight } = layoutProps
-
-  const { onScroll, onScrollToNow, onScrollTop, onScrollLeft, onScrollRight } = layoutProps
-
-  // -------- Variables --------
-  const channels = computed(() => getConvertedChannels(channelsEpgRef.value, itemHeight.value))
-
-  const programs = computed(() => getConvertedPrograms({
-    data: epgRef.value,
-    channels: channels.value,
-    startDate: formatTime(startDate.value),
-    endDate: formatTime(endDate.value),
-    itemHeight: itemHeight.value,
-    hourWidth: hourWidth.value,
-  }))
-
-  const theme = toRef(customTheme || defaultTheme)
-  // -------- Handlers --------
-  const isProgramVisible = (position: Position) => getItemVisibility(
-    position,
-    scrollY.value,
-    scrollX.value,
-    layoutHeight.value,
-    layoutWidth.value,
-    itemOverscan,
-  )
-
-  const isChannelVisible = (position: Pick<Position, 'top'>) =>
-    getSidebarItemVisibility(position, scrollY.value, layoutHeight.value, itemOverscan)
-
-  useProvideEpgStore({
-    theme,
-    sidebarWidth,
-    divideBy,
-    scrollX: _scrollX,
-
-    width,
-    height,
-    isSidebar,
-    isTimeline,
-    isLoading,
-    isLine,
-    containerRef,
-    programs,
-    channels,
-    startDate,
-    endDate,
-    scrollY,
-    dayWidth,
-    hourWidth,
-    numberOfHoursInDay,
-    offsetStartHoursRange,
-    itemHeight,
-    onScroll,
-    isBaseTimeFormat,
-    isProgramVisible,
-    isChannelVisible,
-    scrollBoxRef,
-    timezoneOffset,
-  })
-
-  return {
-    onScrollToNow,
-    onScrollTop,
-    onScrollLeft,
-    onScrollRight,
-    scrollY,
-    scrollX,
-  }
-}
+import { startOfToday } from 'date-fns'
+
+import type { Channel, Program } from '../helpers/interfaces'
+import type { DateTime, Position } from '../helpers/types'
+import { theme as defaultTheme } from '../theme'
+
+import {
+  DAY_WIDTH,
+  ITEM_HEIGHT,
+  ITEM_OVERSCAN,
+  SIDEBAR_WIDTH,
+  formatTime,
+  getConvertedChannels,
+  getConvertedPrograms,
+  getDayWidthResources,
+  getDefaultEndDate,
+  getItemVisibility,
+  getSidebarItemVisibility,
+} from '../helpers'
+
+import { useProvideEpgStore } from '../store'
+import { useLayout } from './useLayout'
+
+interface UseEpgProps {
+  channels: Ref<Channel[]>
+  epg: Ref<Program[]>
+  startDate: Ref<DateTime>
+  endDate: Ref<DateTime>
+  isBaseTimeFormat?: Ref<boolean>
+  isLine?: Ref<boolean>
+  dayWidth?: Ref<number>
+  itemHeight?: MaybeRefOrGetter<number>
+  itemOverscan?: number
+  revertScroll?: MaybeRef<boolean>
+  scrollX?: MaybeRef<number>
+  isSidebar?: Ref<boolean>
+  timezoneOffset?: Ref<number>
+}
+
+const defaultStartDateTime = formatTime(startOfToday())
+
+export function useEpg({
+  channels: channelsEpgRef,
+  epg: epgRef,
+  startDate: startDateInput = ref(defaultStartDateTime),
+  endDate: endDateInput = ref(getDefaultEndDate(defaultStartDateTime)),
+  isBaseTimeFormat = ref(false),
+  isSidebar = ref(true),
+  isTimeline = ref(true),
+  isLoading,
+  isLine = ref(true),
+  theme: customTheme,
+  dayWidth: customDayWidth = ref(DAY_WIDTH),
+  sidebarWidth = ref(SIDEBAR_WIDTH),
+  itemHeight = ref(ITEM_HEIGHT),
+  itemOverscan = ITEM_OVERSCAN,
+  width,
+  height,
+  revertScroll,
+  scrollX: _scrollX = ref(0),
+  divideBy,
+  timezoneOffset = ref(0),
+}: UseEpgProps) {
+  const startDate = toRef(startDateInput)
+  const endDate = toRef(endDateInput)
+
+  // Get day and hour width of the day
+  const dayWidthResourcesProps = computed(() => getDayWidthResources({
+    dayWidth: customDayWidth.value,
+    startDate: startDate.value,
+    endDate: endDate.value,
+  }))
+  const dayWidth = computed(() => dayWidthResourcesProps.value.dayWidth)
+  const hourWidth = computed(() => dayWidthResourcesProps.value.hourWidth)
+  const numberOfHoursInDay = computed(() => dayWidthResourcesProps.value.numberOfHoursInDay)
+  const offsetStartHoursRange = computed(() => dayWidthResourcesProps.value.offsetStartHoursRange)
+
+  // -------- Effects --------
+  const { containerRef, scrollBoxRef, ...layoutProps } = useLayout({
+    startDate,
+    endDate,
+    sidebarWidth,
+    width,
+    height,
+    hourWidth,
+    revertScroll,
+    scrollX: _scrollX,
+    timezoneOffset,
+  })
+
+  const { scrollX, scrollY, layoutWidth, layoutHeight } = layoutProps
+
+  const { onScroll, onScrollToNow, onScrollTop, onScrollLeft, onScrollRight } = layoutProps
+
+  // -------- Variables --------
+  const channels = computed(() => getConvertedChannels(channelsEpgRef.value, itemHeight.value))
+
+  const programs = computed(() => getConvertedPrograms({
+    data: epgRef.value,
+    channels: channels.value,
+    startDate: formatTime(startDate.value),
+    endDate: formatTime(endDate.value),
+    itemHeight: itemHeight.value,
+    hourWidth: hourWidth.value,
+  }))
+
+  const theme = toRef(customTheme || defaultTheme)
+  // -------- Handlers --------
+  const isProgramVisible = (position: Position) => getItemVisibility(
+    position,
+    scrollY.value,
+    scrollX.value,
+    layoutHeight.value,
+    layoutWidth.value,
+    itemOverscan,
+  )
+
+  const isChannelVisible = (position: Pick<Position, 'top'>) =>
+    getSidebarItemVisibility(position, scrollY.value, layoutHeight.value, itemOverscan)
+
+  useProvideEpgStore({
+    theme,
+    sidebarWidth,
+    divideBy,
+    scrollX: _scrollX,
+
+    width,
+    height,
+    isSidebar,
+    isTimeline,
+    isLoading,
+    isLine,
+    containerRef,
+    programs,
+    channels,
+    startDate,
+    endDate,
+    scrollY,
+    dayWidth,
+    hourWidth,
+    numberOfHoursInDay,
+    offsetStartHoursRange,
+    itemHeight,
+    onScroll,
+    isBaseTimeFormat,
+    isProgramVisible,
+    isChannelVisible,
+    scrollBoxRef,
+    timezoneOffset,
+  })
+
+  return {
+    onScrollToNow,
+    onScrollTop,
+    onScrollLeft,
+    onScrollRight,
+    scrollY,
+    scrollX,
+  }
+}