@sigmaott/base-next 1.0.6

package/src/components/Epg/components/Channel.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { ChannelWithPosition } from '../helpers/types'
+import { useEpgStore } from '../store'
+
+defineProps<{
+  channel: ChannelWithPosition
+}>()
+const emit = defineEmits<{
+  (event: 'click', channel: ChannelWithPosition): void
+}>()
+
+const { theme } = useEpgStore()
+</script>
+
+<template>
+  <div
+    data-testid="sidebar-item" class="absolute flex items-center justify-center" :style="{
+      top: `${channel.position.top}px`,
+      height: `${channel.position.height}px`,
+      width: `100%`,
+      backgroundColor: `${theme.primary[900]}`,
+    }" @click="emit('click', channel)"
+  >
+    <slot name="channel" v-bind="{ channel, theme }">
+      <img :src="channel.logo" class="relative max-h-60px max-w-60px">
+    </slot>
+  </div>
+</template>

package/src/components/Epg/components/Channels.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { ChannelWithPosition } from '../helpers/types'
+import { useEpgStore } from '../store'
+import Channel from './Channel.vue'
+
+const emit = defineEmits<{
+  (event: 'click', channel: ChannelWithPosition): void
+}>()
+
+const { theme, channels, scrollY, sidebarWidth, isChannelVisible } = useEpgStore()
+
+const visibleChannels = computed(() => {
+  return channels.value.filter(item => isChannelVisible(item))
+})
+</script>
+
+<template>
+  <div
+    data-testid="sidebar" class="sticky float-left" :style="{
+      width: `${sidebarWidth}px`,
+      bottom: `${scrollY}px`,
+      left: 0,
+      zIndex: 100,
+      backgroundColor: `${theme.primary[900]}`,
+    }"
+  >
+    <Channel v-for="channel in visibleChannels" :key="channel.uuid" :channel="channel" @click="(c) => emit('click', c)">
+      <template #channel="slotData">
+        <slot name="channel" v-bind="slotData" />
+      </template>
+    </Channel>
+  </div>
+</template>

package/src/components/Epg/components/Layout.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { Program as ProgramType } from '../helpers'
+import { getProgramOptions, isFutureTime } from '../helpers'
+import type { ChannelWithPosition } from '../helpers/types'
+import { useEpgStore } from '../store'
+import Line from './Line.vue'
+import Timeline from './Timeline.vue'
+import Channels from './Channels.vue'
+import Program from './Program.vue'
+
+const emit = defineEmits<{
+  (event: 'channel-click', channel: ChannelWithPosition): void
+  (event: 'program-click', program: ProgramType): void
+  (event: 'program-container-click'): void
+}>()
+
+const {
+  theme,
+  programs,
+  channels,
+  endDate,
+  dayWidth,
+  sidebarWidth,
+  itemHeight,
+  onScroll,
+  isSidebar,
+  isTimeline,
+  isLine,
+  isProgramVisible,
+  scrollBoxRef,
+} = useEpgStore()
+
+const channelsLength = computed(() => channels.value.length)
+const contentHeight = computed(() => channelsLength.value * itemHeight.value)
+
+const isFuture = computed(() => isFutureTime(endDate.value))
+
+const visiblePrograms = computed(() => programs.value.filter((item) => {
+  return isProgramVisible(item.position)
+}))
+
+const programRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const scrollableDiv = scrollBoxRef.value!
+  scrollableDiv.addEventListener('wheel', (event) => {
+    event.preventDefault()
+    if (event.shiftKey) {
+      scrollableDiv.scrollLeft += event.deltaX
+    }
+    else {
+      scrollableDiv.scrollLeft += event.deltaX === 0
+        ? event.deltaY
+        : Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY
+    }
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="scrollBoxRef" class="scrollbox relative h-full w-full overflow-x-auto" :style="{
+      background: `${theme.primary['900']}`,
+    }" @scroll="onScroll"
+  >
+    <Line v-if="isLine && isFuture" :height="contentHeight" />
+    <Timeline v-if="isTimeline">
+      <template #timeline="slotData">
+        <slot name="timeline" v-bind="slotData" />
+      </template>
+
+      <template #timeline-last="slotData">
+        <slot name="timeline-last" v-bind="slotData" />
+      </template>
+    </Timeline>
+
+    <Channels v-if="isSidebar" @click="(channel) => emit('channel-click', channel)">
+      <template #channel="slotData">
+        <slot name="channel" v-bind="slotData" />
+      </template>
+    </Channels>
+
+    <div
+      ref="programRef" class="relative" :style="{
+        background: `${theme.primary['900']}`,
+        height: `${contentHeight}px`,
+        width: `${dayWidth}px`,
+        left: `${isSidebar ? sidebarWidth : 0}px`,
+      }" @click="() => emit('program-container-click')"
+    >
+      <Program
+        v-for="program in visiblePrograms" :key="program.data.id" :program="getProgramOptions(program)"
+        @click="(program) => emit('program-click', program)"
+      >
+        <template #program="slotData">
+          <slot name="program" v-bind="slotData" />
+        </template>
+      </Program>
+    </div>
+  </div>
+</template>
+
+<style>
+.scrollbox::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+.scrollbox::-webkit-scrollbar-thumb {
+  @apply bg-gray-500/50 dark:bg-gray-500 rounded-16px;
+}
+
+.scrollbox::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-600/50 dark:bg-gray-400;
+}
+
+.scrollbox::-webkit-scrollbar-track {
+  border: 22px none v-bind('theme.white');
+  border-radius: 0px;
+}
+</style>

package/src/components/Epg/components/Line.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { isToday, startOfDay } from 'date-fns'
+import { dayjs } from 'element-plus'
+
+import { getPositionX } from '../helpers'
+import { useEpgStore } from '../store'
+
+defineProps<{
+  height: number
+}>()
+
+const { theme, startDate, endDate, hourWidth, sidebarWidth, isSidebar, timezoneOffset } = useEpgStore()
+
+function getX() {
+  return getPositionX(
+    startOfDay(new Date(startDate.value)),
+    dayjs(new Date()).toDate(),
+    startDate.value,
+    endDate.value,
+    hourWidth.value,
+  ) + (isSidebar.value
+    ? sidebarWidth.value
+    : 0)
+}
+
+const positionX = ref(getX())
+
+useIntervalFn(() => {
+  positionX.value = getX()
+}, 2000)
+</script>
+
+<template>
+  <div
+    v-if="isToday(new Date(startDate))" class="absolute z-1000 w-2px" :style="{
+      height: `${height + 40}px`,
+      left: `${positionX}px`,
+      background: `${theme.green['300']}`,
+    }"
+  />
+</template>

package/src/components/Epg/components/Loader.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { useEpgStore } from '../store'
+
+const { theme } = useEpgStore()
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 z-1000 flex items-center justify-center" :style="{
+      background: `${theme.loader.bg}`,
+      color: `${theme.white}`,
+    }"
+  >
+    <svg class="mr-3 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+      <path
+        class="opacity-75" fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    Loading...
+  </div>
+</template>

package/src/components/Epg/components/Program.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { ProgramItem } from '../helpers/types'
+import { useProgram } from '../hooks'
+import type { Program as ProgramType } from '../helpers/interfaces'
+import { useEpgStore } from '../store'
+
+const props = defineProps<{
+  program: ProgramItem
+}>()
+
+const emit = defineEmits<
+  (event: 'click', v: ProgramType) => void
+>()
+const { theme, isBaseTimeFormat } = useEpgStore()
+
+const data = computed(() => props.program.data)
+const program = useProgram({
+  program: toRef(props, 'program'),
+  isBaseTimeFormat,
+})
+
+const { styles, format12HoursTime, isLive, isMinWidth } = program
+</script>
+
+<template>
+  <div
+    data-testid="program-item" class="absolute overflow-hidden" :style="{
+      ...styles.position,
+      paddingRight: `${styles.width === 0 ? 0 : 2}px`,
+    }" @click="emit('click', data)"
+  >
+    <slot name="program" v-bind="{ ...program, theme }" :data="data">
+      <div
+        data-testid="program-content"
+        class="program-item relative z-1 h-full flex cursor-pointer overflow-hidden rounded-8px text-11px transition-all duration-400 ease-in-out"
+        :style="{
+          padding: `10px ${styles.width < 30 ? 4 : 20}px`,
+        }" :class="{
+          'is-live': isLive,
+        }"
+      >
+        <div class="w-full flex justify-start">
+          <img v-if="isLive && isMinWidth" class="mr-15px w-100px rounded-6px" :src="data.image" alt="Preview">
+          <div class="overflow-hidden">
+            <div
+              class="mb-5px mt-0 truncate text-left text-14px font-medium" :style="{
+                color: `${theme.grey['300']}`,
+              }"
+            >
+              {{ data.title }}
+            </div>
+            <div
+              class="block truncate text-left text-12.5px font-normal" :style="{
+                color: `${theme.text.grey['500']}`,
+              }" aria-label="program time"
+            >
+              {{ format12HoursTime(data.since) }} -{{ " " }}
+              {{ format12HoursTime(data.till) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style>
+.program-item {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.primary[600]'),
+    v-bind('theme.primary[600]')
+  );
+}
+
+.program-item:hover {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.gradient.blue[900]'),
+    v-bind('theme.gradient.blue[600]')
+  );
+}
+
+.program-item.is-live {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.gradient.blue[900]'),
+    v-bind('theme.gradient.blue[600]'),
+    v-bind('theme.gradient.blue[300]')
+  );
+}
+
+.program-item.is-hide {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.timeline.divider.bg'),
+    v-bind('theme.timeline.divider.bg')
+  );
+  opacity: 0.4;
+}
+</style>

package/src/components/Epg/components/SideBar.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { TIMELINE_HEIGHT } from '../helpers'
+import { useEpgStore } from '../store'
+
+const { theme, sidebarWidth } = useEpgStore()
+</script>
+
+<template>
+  <div
+    class="absolute left-0 top-0 z-900" :style="{
+      width: `${sidebarWidth}px`,
+      height: `${TIMELINE_HEIGHT}px`,
+      background: `${theme.primary[900]}`,
+    }"
+  >
+    <div />
+  </div>
+</template>

package/src/components/Epg/components/Timeline.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { ITEM_HEIGHT } from '../helpers'
+import { useTimeline } from '../hooks'
+import { useEpgStore } from '../store'
+
+const {
+  theme, divideBy, numberOfHoursInDay, isBaseTimeFormat, offsetStartHoursRange,
+  sidebarWidth, hourWidth, dayWidth, isSidebar,
+} = useEpgStore()
+
+const timeline = useTimeline(numberOfHoursInDay, isBaseTimeFormat, divideBy)
+
+const { times, dividers, formatTimelineTime } = timeline
+</script>
+
+<template>
+  <div
+    class="sticky top-0 z-100 flex" :style="{
+      left: `${isSidebar ? sidebarWidth : 0}px`,
+      height: `${TIMELINE_HEIGHT}px`,
+      width: `${dayWidth}px`,
+      background: `${theme.primary['900']}`,
+    }"
+  >
+    <template v-for="(_, index) in times" :key="index">
+      <slot name="timeline" v-bind="{ index, dividers, formatTimelineTime, offsetStartHoursRange, hourWidth, theme }">
+        <div class="relative text-14px" :style="{ width: `${hourWidth}px` }">
+          <div
+            class="absolute top-0 font-bold" :style="{
+              color: `${theme.text.grey[300]}`,
+              left: `${index === 0 ? 0 : -18}px`,
+            }"
+          >
+            {{ formatTimelineTime(index + offsetStartHoursRange) }}
+          </div>
+
+          <div class="grid grid-cols-4 h-full w-full items-end pb-6px">
+            <div
+              v-for="(__, i) in dividers" :key="i" :style="{
+                background: `${theme.timeline.divider.bg}`,
+                height: `10px`,
+                width: '2px',
+                marginRight: `${hourWidth}px`,
+              }"
+            />
+          </div>
+        </div>
+      </slot>
+    </template>
+    <slot name="timeline-last" v-bind="{ theme, formatTimelineTime, times, offsetStartHoursRange }">
+      <div class="relative text-14px">
+        <div
+          class="absolute top-0 -translate-x-100%" :style="{
+            color: `${theme.text.grey[300]}`,
+            left: `${0}px`,
+          }"
+        >
+          {{ formatTimelineTime(times.length + offsetStartHoursRange) }}
+        </div>
+        <div class="grid grid-cols-4 h-full w-full items-end pb-0px">
+          <div
+            :style="{
+              background: `${theme.timeline.divider.bg}`,
+              height: `10px`,
+              width: `1px`,
+            }"
+          />
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,68 @@
+import { differenceInHours, startOfDay } from 'date-fns'
+import { HOURS_IN_DAY } from './variables'
+
+type DateTime = string | number | Date
+
+interface OmitObjectType { [key: string]: any }
+export function omit(obj: OmitObjectType, ...props: string[]) {
+  const result = { ...obj }
+
+  for (const property of props)
+    delete result[property]
+
+  return result
+}
+
+export const generateArray = (num: number) => new Array(num).fill('')
+
+interface ProgramOptions {
+  position: { width: number; height: number; top: number; left: number }
+}
+export function getProgramOptions<T extends ProgramOptions>(program: T) {
+  const { width, height, top, left } = program.position
+  return {
+    ...program,
+    position: { width, height, top, left },
+  }
+}
+
+export const getHourWidth = (dayWidth: number) => dayWidth / HOURS_IN_DAY
+
+export const getDate = (date: DateTime) => new Date(date)
+
+const abs = (num: number) => Math.abs(num)
+interface DayWidth {
+  dayWidth: number
+  startDate: DateTime
+  endDate: DateTime
+}
+export function getDayWidthResources({
+  dayWidth,
+  startDate,
+  endDate,
+}: DayWidth) {
+  const startDateTime = getDate(startDate)
+  const endDateTime = getDate(endDate)
+
+  if (endDateTime < startDateTime) {
+    console.error(
+      `Invalid endDate property. Value of endDate must be greater than startDate. Props: startDateTime: ${startDateTime}, endDateTime: ${endDateTime}`,
+    )
+  }
+
+  const offsetStartHoursRange = differenceInHours(
+    startDateTime,
+    startOfDay(startDateTime),
+  )
+
+  const numberOfHoursInDay = differenceInHours(endDateTime, startDateTime)
+  const hourWidth = Math.floor(dayWidth / numberOfHoursInDay)
+  const newDayWidth = hourWidth * numberOfHoursInDay
+
+  return {
+    hourWidth: abs(hourWidth),
+    dayWidth: abs(newDayWidth),
+    numberOfHoursInDay: abs(numberOfHoursInDay),
+    offsetStartHoursRange: abs(offsetStartHoursRange),
+  }
+}

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

@@ -0,0 +1,192 @@
+import { differenceInSeconds, getTime } from 'date-fns'
+import type { Channel, Program } from './interfaces'
+import type { DateTime, Position, ProgramWithPosition } from './types'
+import { HOUR_IN_MINUTES } from './variables'
+import {
+  formatTime,
+  isYesterday as isYesterdayTime,
+} from './time'
+import { getDate } from './common'
+
+function getItemDiffWidth(diff: number, hourWidth: number) {
+  return (diff * hourWidth) / (HOUR_IN_MINUTES * 60)
+}
+
+export function getPositionX(since: DateTime,
+  till: DateTime,
+  startDate: DateTime,
+  endDate: DateTime,
+  hourWidth: number) {
+  const isTomorrow = getTime(getDate(till)) > getTime(getDate(endDate))
+  const isYesterday = getTime(getDate(since)) < getTime(getDate(startDate))
+
+  // When time range is set to 1 hour and program time is greater than 1 hour
+  if (isYesterday && isTomorrow) {
+    const diffTime = differenceInSeconds(
+      getDate(endDate),
+      getDate(startDate),
+    )
+    return getItemDiffWidth(diffTime, hourWidth)
+  }
+
+  if (isYesterday) {
+    const diffTime = differenceInSeconds(
+      getDate(till),
+      getDate(startDate),
+    )
+    return getItemDiffWidth(diffTime, hourWidth)
+  }
+
+  if (isTomorrow) {
+    const diffTime = differenceInSeconds(
+      getDate(endDate),
+      getDate(since),
+    )
+
+    if (diffTime < 0)
+      return 0
+    return getItemDiffWidth(diffTime, hourWidth)
+  }
+
+  const diffTime = differenceInSeconds(
+    getDate(till),
+    getDate(since),
+  )
+
+  return getItemDiffWidth(diffTime, hourWidth)
+}
+
+// -------- Channel position in the Epg --------
+export function getChannelPosition(channelIndex: number,
+  itemHeight: number) {
+  const top = itemHeight * channelIndex
+  const position = {
+    top,
+    height: itemHeight,
+  }
+  return position
+}
+// -------- Program position in the Epg --------
+export function getProgramPosition(program: Program,
+  channelIndex: number,
+  itemHeight: number,
+  hourWidth: number,
+  startDate: DateTime,
+  endDate: DateTime) {
+  const item = {
+    ...program,
+    since: formatTime(program.since),
+    till: formatTime(program.till),
+  }
+  const isYesterday = isYesterdayTime(item.since, startDate)
+
+  let width = getPositionX(
+    item.since,
+    item.till,
+    startDate,
+    endDate,
+    hourWidth,
+  )
+  const top = itemHeight * channelIndex
+  let left = getPositionX(startDate, item.since, startDate, endDate, hourWidth)
+  const edgeEnd = getPositionX(
+    startDate,
+    item.till,
+    startDate,
+    endDate,
+    hourWidth,
+  )
+
+  if (isYesterday)
+    left = 0
+  // If item has negative top position, it means that it is not visible in this day
+  if (top < 0)
+    width = 0
+
+  const position = {
+    width,
+    height: itemHeight,
+    top,
+    left,
+    edgeEnd,
+  }
+  return { position, data: item }
+}
+
+// -------- Converted programs with position data --------
+interface ConvertedPrograms {
+  data: Program[]
+  channels: Channel[]
+  startDate: DateTime
+  endDate: DateTime
+  itemHeight: number
+  hourWidth: number
+}
+export function getConvertedPrograms({
+  data,
+  channels,
+  startDate,
+  endDate,
+  itemHeight,
+  hourWidth,
+}: ConvertedPrograms) {
+  return data.map((next) => {
+    const channelIndex = channels.findIndex(
+      ({ uuid }) => uuid === next.channelUuid,
+    )
+    return getProgramPosition(
+      next,
+      channelIndex,
+      itemHeight,
+      hourWidth,
+      startDate,
+      endDate,
+    )
+  }, [] as ProgramWithPosition[])
+}
+
+// -------- Converted channels with position data --------
+export function getConvertedChannels(channels: Channel[], itemHeight: number) {
+  return channels.map((channel, index) => ({
+    ...channel,
+    position: getChannelPosition(index, itemHeight),
+  }))
+}
+
+// -------- Dynamic virtual program visibility in the EPG --------
+export function getItemVisibility(position: Position,
+  scrollY: number,
+  scrollX: number,
+  containerHeight: number,
+  containerWidth: number,
+  itemOverscan: number) {
+  if (position.width <= 0)
+    return false
+
+  if (scrollY > position.top + itemOverscan * 3)
+    return false
+
+  if (scrollY + containerHeight <= position.top)
+    return false
+
+  if (
+    scrollX + containerWidth >= position.left
+    // && scrollX <= position.edgeEnd
+  )
+    return true
+
+  return false
+}
+
+export function getSidebarItemVisibility(position: Pick<Position, 'top'>,
+  scrollY: number,
+  containerHeight: number,
+  itemOverscan: number) {
+  if (scrollY > position.top + itemOverscan * 3)
+    return false
+
+  if (scrollY + containerHeight <= position.top)
+    return false
+
+  return true
+}