@sigmaott/base-next 1.0.6

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

@@ -0,0 +1,5 @@
+export * from './interfaces'
+export * from './variables'
+export * from './common'
+export * from './time'
+export * from './epg'

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

@@ -0,0 +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
+    }
+  }
+}

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

@@ -0,0 +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)))
+}

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

@@ -0,0 +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

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

@@ -0,0 +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',
+}

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

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

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

@@ -0,0 +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,
+  }
+}

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

@@ -0,0 +1,187 @@
+import { isToday as isTodayFns, startOfToday } from 'date-fns'
+
+// Import types
+import type { DateTime } from '../helpers/types'
+
+import {
+  DEBOUNCE_WAIT,
+  DEBOUNCE_WAIT_MAX,
+  getPositionX,
+} from '../helpers'
+import { useEpgStore } from '../store'
+
+interface UseLayoutProps {
+  height?: number
+  width?: number
+  hourWidth: Ref<number>
+  sidebarWidth: Ref<number>
+  startDate: Ref<DateTime>
+  endDate: Ref<DateTime>
+  revertScroll?: MaybeRef<boolean>
+  scrollX: MaybeRef<number>
+  timezoneOffset: Ref<number>
+}
+
+export function useLayout({
+  height,
+  width,
+  startDate,
+  endDate,
+  hourWidth,
+  sidebarWidth,
+  revertScroll,
+  scrollX: _scrollX,
+  timezoneOffset,
+}: UseLayoutProps) {
+  const containerRef = ref() as Ref<HTMLDivElement>
+  const scrollBoxRef = ref() as Ref<HTMLDivElement>
+  const _revertScroll = toRef(revertScroll)
+
+  useEventListener(containerRef, 'mousewheel', (evt) => {
+    if (!_revertScroll.value)
+      return
+
+    const delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)))
+    const scrollSpeed = 60
+    containerRef.value.scrollLeft -= (delta * scrollSpeed)
+    evt.preventDefault()
+  })
+
+  // -------- State --------
+  const scrollY = ref(0)
+  const scrollX = toRef(_scrollX)
+  const scrollXSlient = refWithControl(0)
+  const layoutWidth = ref(width as number)
+  const layoutHeight = ref(height as number)
+  const isToday = computed(() => isTodayFns(new Date(startDate.value)))
+
+  // -------- Handlers --------
+
+  const handleOnScroll = (e: any) => {
+    const payload = { y: e.target.scrollTop, x: e.target.scrollLeft }
+    scrollY.value = payload.y
+    scrollX.value = payload.x
+
+    const clientWidth = (width
+      ?? containerRef.value?.clientWidth) as number
+
+    const centerHour = (clientWidth - sidebarWidth.value) / 2
+    scrollXSlient.silentSet((payload.x + centerHour) / hourWidth.value)
+  }
+
+  const handleOnScrollToNow = () => {
+    if (scrollBoxRef?.value && isToday.value) {
+      const clientWidth = (width ?? containerRef.value?.clientWidth) as number
+
+      const scrollPosition = getPositionX(
+        startOfToday(),
+        dayjs(new Date()).toDate(),
+        startDate.value,
+        endDate.value,
+        hourWidth.value,
+      )
+      const scrollNow = scrollPosition - clientWidth / 2 + sidebarWidth.value
+      scrollBoxRef.value?.scrollTo({ left: scrollNow, behavior: 'smooth' })
+    }
+  }
+
+  const handleZoom = () => {
+    const clientWidth = (width
+      ?? containerRef.value?.clientWidth) as number
+    const centerHour = (clientWidth - sidebarWidth.value) / 2
+    const diff = centerHour / hourWidth.value
+    const centerDate = scrollXSlient.untrackedGet() - diff
+
+    const startDateWithTime = new Date(startDate.value)
+    const centerDateNatural = Math.floor(centerDate)
+    const centerDateDecimal = centerDate - centerDateNatural
+
+    startDateWithTime.setHours(centerDateNatural)
+    startDateWithTime.setMinutes(Math.round(centerDateDecimal * 60))
+
+    const scrollPosition = getPositionX(
+      startOfToday(),
+      startDateWithTime,
+      startDate.value,
+      endDate.value,
+      hourWidth.value,
+    )
+    nextTick(() => {
+      scrollBoxRef.value?.scrollTo({ left: scrollPosition, behavior: 'smooth' })
+    })
+  }
+
+  watch(hourWidth, () => {
+    handleZoom()
+  })
+
+  const handleOnScrollTop = (value: number = hourWidth.value) => {
+    if (scrollBoxRef?.value) {
+      const top = scrollBoxRef.value.scrollTop + value
+      scrollBoxRef.value.scrollTop = top
+    }
+  }
+
+  const handleOnScrollRight = (value: number = hourWidth.value) => {
+    if (scrollBoxRef?.value) {
+      const right = scrollBoxRef.value.scrollLeft + value
+      scrollBoxRef.value.scrollLeft = right
+    }
+  }
+
+  const handleOnScrollLeft = (value: number = hourWidth.value) => {
+    if (scrollBoxRef?.value) {
+      const left = scrollBoxRef.value.scrollLeft - value
+      scrollBoxRef.value.scrollLeft = left
+    }
+  }
+
+  const handleResizeDebounced = useDebounceFn(
+    () => {
+      if (containerRef?.value && !width) {
+        const container = containerRef.value
+        const { clientWidth } = container
+        layoutWidth.value = clientWidth
+      }
+    },
+    DEBOUNCE_WAIT * 4,
+    { maxWait: DEBOUNCE_WAIT_MAX * 4 },
+  )
+
+  // -------- Efffects --------
+  watchEffect(() => {
+    if (containerRef?.value) {
+      const container = containerRef.value
+      if (!width) {
+        const { clientWidth } = container
+        layoutWidth.value = clientWidth
+      }
+      if (!height) {
+        const { clientHeight } = container
+        layoutHeight.value = clientHeight
+      }
+    }
+  })
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResizeDebounced)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResizeDebounced)
+  })
+
+  return {
+    containerRef,
+    scrollBoxRef,
+    scrollX,
+    scrollY,
+    layoutWidth,
+    layoutHeight,
+    onScroll: handleOnScroll,
+    onScrollToNow: handleOnScrollToNow,
+    onScrollTop: handleOnScrollTop,
+    onScrollLeft: handleOnScrollLeft,
+    onScrollRight: handleOnScrollRight,
+  }
+}

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

@@ -0,0 +1,63 @@
+import { format } from 'date-fns'
+
+// Import types
+import type { Ref } from 'vue'
+import type { ProgramItem } from '../helpers/types'
+
+// Import helpers
+import { PROGRAM_REFRESH, TIME_FORMAT, getLiveStatus, omit } from '../helpers'
+
+interface useProgramProps<T> {
+  program: Ref<T>
+  isBaseTimeFormat: Ref<boolean>
+  minWidth?: number
+}
+
+export function useProgram<T extends ProgramItem>({
+  program,
+  isBaseTimeFormat,
+  minWidth = 200,
+}: useProgramProps<T>) {
+  const { data, position } = program.value
+  const { width } = position
+
+  const { since, till } = data
+
+  const isLive = ref(getLiveStatus(since, till))
+
+  const formatTime = (
+    date: string | number | Date,
+    formatType: string = TIME_FORMAT.HOURS_MIN,
+  ) => format(new Date(date), formatType).replace(/\s/g, '')
+
+  const set12HoursTimeFormat = () => {
+    if (isBaseTimeFormat.value)
+      return TIME_FORMAT.BASE_HOURS_TIME
+    return TIME_FORMAT.HOURS_MIN
+  }
+
+  useIntervalFn(() => {
+    const status = getLiveStatus(since, till)
+    isLive.value = status
+  }, PROGRAM_REFRESH)
+
+  const isMinWidth = width > minWidth
+
+  return {
+    format12HoursTime: (date: string | number | Date) => formatTime(date, set12HoursTimeFormat()),
+    isLive,
+    isMinWidth,
+    styles: computed(() => {
+      const newPosition = omit(program.value.position, 'egdeEnd')
+      return {
+        width,
+        position: {
+          width: `${newPosition.width}px`,
+          height: `${newPosition.height}px`,
+          top: `${newPosition.top}px`,
+          left: `${newPosition.left}px`,
+        },
+      }
+    }),
+  }
+}

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

@@ -0,0 +1,35 @@
+import { format } from 'date-fns'
+
+import { TIME_FORMAT, generateArray } from '../helpers'
+
+export function useTimeline(
+  numberOfHoursInDay: Ref<number>,
+  isBaseTimeFormat: Ref<boolean>,
+  divideBy?: Ref<number | undefined>,
+) {
+  const times = computed(() => generateArray(numberOfHoursInDay.value))
+  const dividers = computed(() => generateArray(divideBy?.value || 4))
+
+  function formatTimelineTime(index: number) {
+    // 1 -> 01:00
+    // 1.5 -> 01:30
+    // 1.75 -> 01:45
+    // index can be float number now base on hour
+    // const time = index < 10 ? `0${index}` : index
+    const hour = Math.floor(index)
+    const hourTime = hour < 10 ? `0${hour}` : hour
+    const minute = Math.round((index - hour) * 60)
+    const minuteTime = minute < 10 ? `0${minute}` : minute
+
+    if (isBaseTimeFormat.value) {
+      const baseDate = format(new Date(), TIME_FORMAT.DATE)
+      const date = new Date(`${baseDate}T${hour}:00:00`)
+      const timeFormat = format(date, TIME_FORMAT.BASE_HOURS_TIME)
+      return timeFormat.toLowerCase().replace(/\s/g, '')
+    }
+
+    return `${hourTime}:${minuteTime}`
+  }
+
+  return { times, dividers, formatTimelineTime }
+}

package/src/components/Epg/index.ts

@@ -0,0 +1,4 @@
+export { default as Epg } from './Epg.vue'
+export { default as Layout } from './components/Layout.vue'
+export * from './helpers'
+export { useEpg } from './hooks/useEpg'