dinocollab-core 1.0.0

package/src/lab/media-player.core1.tsx

@@ -0,0 +1,273 @@
+import React, { useRef, useState, useEffect, Fragment } from 'react'
+import { Box, IconButton, SvgIconOwnProps, Typography, keyframes, styled } from '@mui/material'
+import PauseIcon from '@mui/icons-material/Pause'
+import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+
+const MPCore1Classes = {
+  root: 'MPCore1-root',
+  control: 'MPCore1-control',
+  controlCompact: 'MPCore1-control-compact',
+  overlay: 'MPCore1-overlay',
+  playButton: 'MPCore1-play-button',
+  timer: 'MPCore1-timer',
+  progressBar: 'MPCore1-progress-bar',
+  loading: 'MPCore1-loading',
+  timeline: 'MPCore1-timeline',
+  bufferedSegments: 'MPCore1-buffered-segments'
+}
+
+const formatTime = (time: number): string => {
+  if (isNaN(time)) return '0:00'
+  const minutes = Math.floor(time / 60)
+  const seconds = Math.floor(time % 60)
+    .toString()
+    .padStart(2, '0')
+  return `${minutes}:${seconds}`
+}
+
+export interface MediaPlayerCore1Slots {
+  autoPlay?: boolean
+  muted?: boolean
+  iconPlayProps?: SvgIconOwnProps
+}
+
+interface IProps {
+  src: string
+  className?: string
+  slots?: MediaPlayerCore1Slots
+}
+
+const MediaPlayerCore1: React.FC<IProps> = (props) => {
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  const progressBarRef = useRef<HTMLDivElement>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+  const [bufferedSegments, setBufferedSegments] = useState<{ left: number; width: number }[]>([])
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const updateTime = () => {
+      setProgress((video.currentTime / video.duration) * 100)
+      setCurrentTime(video.currentTime)
+    }
+
+    const updateBuffered = () => {
+      const duration = video.duration
+      const segments = []
+      for (let i = 0; i < video.buffered.length; i++) {
+        const start = video.buffered.start(i)
+        const end = video.buffered.end(i)
+        segments.push({
+          left: (start / duration) * 100,
+          width: ((end - start) / duration) * 100
+        })
+      }
+      setBufferedSegments(segments)
+    }
+
+    video.addEventListener('play', () => setIsPlaying(true))
+    video.addEventListener('pause', () => setIsPlaying(false))
+
+    video.addEventListener('waiting', () => setIsLoading(true))
+    video.addEventListener('playing', () => setIsLoading(false))
+
+    video.addEventListener('timeupdate', updateTime)
+    video.addEventListener('progress', updateBuffered)
+    video.addEventListener('loadedmetadata', () => {
+      setDuration(video.duration)
+      updateBuffered()
+    })
+
+    return () => {
+      video.removeEventListener('timeupdate', updateTime)
+      video.removeEventListener('progress', updateBuffered)
+      videoRef.current = null
+    }
+  }, [])
+
+  const togglePlay = () => {
+    const video = videoRef.current
+    if (!video) return
+    if (video.paused) {
+      video.play()
+    } else {
+      video.pause()
+    }
+  }
+
+  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const video = videoRef.current
+    const player = progressBarRef.current
+    if (!video || !player) return
+    const rect = player.getBoundingClientRect()
+    const percent = (e.clientX - rect.left) / rect.width
+    video.currentTime = percent * video.duration
+  }
+
+  const getClasses = () => {
+    return [MPCore1Classes.root, props.className].filter((x) => !!x).join(' ')
+  }
+
+  const renderProgressBarContent = () => (
+    <Fragment>
+      {bufferedSegments.map((seg, idx) => (
+        <Box key={idx} className={MPCore1Classes.bufferedSegments} sx={{ left: `${seg.left}%`, width: `${seg.width}%` }} />
+      ))}
+      <Box className={MPCore1Classes.timeline} sx={{ width: `${progress}%` }} />
+      {isLoading && <Box className={MPCore1Classes.loading} />}
+    </Fragment>
+  )
+  return (
+    <Wrap className={getClasses()}>
+      <video ref={videoRef} width='100%' height='100%' preload='auto' src={props.src} autoPlay={props.slots?.autoPlay} muted={props.slots?.muted} />
+      <div className={MPCore1Classes.overlay} onClick={togglePlay} />
+      <div className={MPCore1Classes.control}>
+        <div className={MPCore1Classes.playButton}>
+          <IconButton size='small' onClick={togglePlay}>
+            {isPlaying ? <PauseIcon {...props.slots?.iconPlayProps} /> : <PlayArrowIcon {...props.slots?.iconPlayProps} />}
+          </IconButton>
+        </div>
+        <div ref={progressBarRef} onClick={handleSeek} className={MPCore1Classes.progressBar}>
+          {renderProgressBarContent()}
+        </div>
+        <Typography className={MPCore1Classes.timer} variant='body2' color='white'>
+          {formatTime(currentTime)} / {formatTime(duration)}
+        </Typography>
+      </div>
+      <div className={MPCore1Classes.controlCompact}>
+        <div className={MPCore1Classes.progressBar}>{renderProgressBarContent()}</div>
+      </div>
+    </Wrap>
+  )
+}
+
+export default MediaPlayerCore1
+
+const stripeAnimation = keyframes`
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 48px 0;
+  }
+`
+
+const Wrap = styled(Box)({
+  // '--mp-core1-color-main': '#ed4229',
+  // '--mp-core1-color-text': '#fff',
+  // '--mp-core1-icon-size': '34px',
+  width: '640px',
+  height: '360px',
+  position: 'relative',
+  [`.${MPCore1Classes.playButton}`]: {
+    flex: '0 0 auto',
+    '.MuiButtonBase-root': {
+      width: 'var(--mp-core1-icon-size, 34px)',
+      height: 'var(--mp-core1-icon-size, 34px)',
+      background: 'var(--mp-core1-color-main, #fff)',
+      color: 'var(--mp-core1-color-text, #000)'
+    }
+  },
+  [`.${MPCore1Classes.control}`]: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '6px 8px',
+    gap: '8px',
+    zIndex: 3,
+    transition: '0.3s',
+    transform: 'translateY(100%)'
+  },
+  [`.${MPCore1Classes.controlCompact}`]: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    padding: '3px',
+    transition: '0.3s',
+    zIndex: 2,
+    opacity: 0.5,
+    [`.${MPCore1Classes.progressBar}`]: {
+      height: 6
+    }
+  },
+  [`.${MPCore1Classes.overlay}`]: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    opacity: 0,
+    transition: '0.3s',
+    cursor: 'pointer',
+    background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 20%)'
+  },
+  [`.${MPCore1Classes.timer}`]: {
+    marginTop: '2px',
+    flex: '0 0 auto'
+  },
+  [`.${MPCore1Classes.progressBar}`]: {
+    flex: 1,
+    position: 'relative',
+    cursor: 'pointer',
+    height: 8,
+    marginTop: 1,
+    borderRadius: '4px',
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255,255,255,0.4)'
+  },
+  [`.${MPCore1Classes.loading}`]: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    backgroundImage: `repeating-linear-gradient(
+      30deg,
+      rgba(255,255,255,0.2) 0px,
+      rgba(255,255,255,0.2) 6px,
+      rgba(255,255,255,0.08) 6px,
+      rgba(255,255,255,0.08) 12px
+    )`,
+    filter: 'blur(0.5px)',
+    backgroundSize: '48px 48px',
+    animation: `${stripeAnimation} 4s linear infinite`,
+    pointerEvents: 'none',
+    overflow: 'hidden'
+  },
+  [`.${MPCore1Classes.bufferedSegments}`]: {
+    position: 'absolute',
+    top: 0,
+    height: '100%',
+    backgroundColor: 'rgba(255,255,255,0.4)',
+    pointerEvents: 'none'
+  },
+  [`.${MPCore1Classes.timeline}`]: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    background: 'var(--mp-core1-color-main, #fff)',
+    pointerEvents: 'none'
+  },
+  '&:hover': {
+    [`.${MPCore1Classes.overlay}`]: {
+      opacity: 1
+    },
+    [`.${MPCore1Classes.control}`]: {
+      transform: 'translateY(0)'
+    },
+    [`.${MPCore1Classes.controlCompact}`]: {
+      transform: 'translateY(100%)'
+    }
+  }
+})

package/src/lab/media-player.muted.tsx

@@ -0,0 +1,62 @@
+import React, { FC } from 'react'
+import { Box, Fade, Skeleton, styled } from '@mui/material'
+import { EMediaPlayerStatus, getAspectRatioStyled, MediaPlayerBaseProps, MediaPlayerBaseSlots, useStreamUrl } from './media-player.units'
+import MediaPlayerCore1, { MediaPlayerCore1Slots } from './media-player.core1'
+
+interface IProps extends MediaPlayerBaseProps {
+  slots?: MediaPlayerBaseSlots & {
+    core1Props?: MediaPlayerCore1Slots
+  }
+}
+
+const MediaPlayerMuted: FC<IProps> = (props) => {
+  const { status, streamUrl } = useStreamUrl(props.resourceId, props.fetchDataStream)
+
+  const renderLoading = () => {
+    if (props.slots?.loading) return props.slots.loading
+    const duration = props.slots?.loadingProps?.animationDuration ?? '1s'
+    return <Skeleton animation='wave' variant='rounded' sx={{ width: '100%', height: '100%', '&::after': { animationDuration: duration } }} />
+  }
+
+  return (
+    <WrapPlayer className={status === EMediaPlayerStatus.Loaded ? 'loaded' : ''} sx={getAspectRatioStyled(props.slots?.aspectRatio)}>
+      <WrapVideo>{streamUrl && <MediaPlayerCore1 className='player' src={streamUrl} slots={props.slots?.core1Props} />}</WrapVideo>
+      <Fade in={status === EMediaPlayerStatus.Loading || props.loading}>
+        <WrapVideo>{renderLoading()}</WrapVideo>
+      </Fade>
+      <Fade in={status === EMediaPlayerStatus.Error && !props.loading} unmountOnExit>
+        <WrapVideo>
+          <img src='images/video-error.webp' alt='video-error' style={{ width: '100%', height: '100%' }} />
+        </WrapVideo>
+      </Fade>
+    </WrapPlayer>
+  )
+}
+
+export default MediaPlayerMuted
+
+const WrapPlayer = styled(Box)({
+  '--mp-core1-color-main': '#ed4229',
+  '--mp-core1-color-text': '#fff',
+  '--mp-core1-icon-size': '34px',
+  position: 'relative',
+  paddingBottom: '56.25%',
+  borderRadius: '6px',
+  overflow: 'hidden',
+  '&.loaded': {
+    background: '#000'
+  }
+})
+
+const WrapVideo = styled(Box)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  zIndex: 2,
+  '.player': {
+    width: '100%',
+    height: '100%'
+  }
+})

package/src/lab/media-player.units.ts

@@ -0,0 +1,80 @@
+import { ReactNode, useEffect, useState } from 'react'
+import { Breakpoint, SxProps, Theme } from '@mui/material'
+
+export interface IMediaStream {
+  code: number
+  token: string
+  StreamUrl: string
+}
+
+export interface MediaPlayerBaseProps {
+  resourceId: string
+  fetchDataStream: (resourceId: string, signal?: AbortSignal) => Promise<IMediaStream[]>
+  loading?: boolean
+}
+
+export type AspectRatioParams = number | Partial<Record<Breakpoint, number>>
+
+export interface MediaPlayerBaseSlots {
+  /**
+   * Aspect ratio (height / width), used to calculate height based on width.
+   * @default 56.25 (%)
+   */
+  aspectRatio?: AspectRatioParams
+  loading?: ReactNode
+  loadingProps?: {
+    disabled?: boolean
+    animationDuration?: string
+  }
+}
+
+export enum EMediaPlayerStatus {
+  Loading = 'Loading',
+  Loaded = 'Loaded',
+  Error = 'Error'
+}
+
+export const useStreamUrl = (resourceId: string | null, fetchDataStream: MediaPlayerBaseProps['fetchDataStream']) => {
+  const [status, setStatus] = useState(EMediaPlayerStatus.Loading)
+  const [streamUrl, setStreamUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    const abortController = new AbortController()
+    const func = async () => {
+      setStatus(EMediaPlayerStatus.Loading)
+      try {
+        if (!resourceId) return
+        const res = await fetchDataStream(resourceId, abortController.signal)
+        const url = res[0].StreamUrl
+        if (typeof url === 'string' && !!url) setStreamUrl(url)
+        setStatus(EMediaPlayerStatus.Loaded)
+      } catch {
+        setStatus(EMediaPlayerStatus.Error)
+      }
+    }
+    func()
+    return () => {
+      setStatus(EMediaPlayerStatus.Loading)
+      abortController.abort()
+    }
+  }, [resourceId, fetchDataStream])
+
+  return { status, streamUrl }
+}
+
+export const getAspectRatio = (value?: AspectRatioParams, defaultAspectRatio = '56.25%') => {
+  if (!value) return defaultAspectRatio
+  if (typeof value === 'number') return `${value}%`
+  if (typeof value === 'object') {
+    const result: Partial<Record<Breakpoint, string>> = {}
+    for (const key in value) {
+      result[key as Breakpoint] = `${value[key as Breakpoint]}%`
+    }
+    return result
+  }
+  return undefined
+}
+
+export const getAspectRatioStyled = (value?: AspectRatioParams): SxProps<Theme> => {
+  return { paddingBottom: getAspectRatio(value) }
+}

package/src/lab/table-grid/create.table-grid.tsx

@@ -0,0 +1,183 @@
+import React, { Component, ReactNode } from 'react'
+import { alpha, Box, CircularProgress, colors, Divider, Fade, Grid, styled, TablePagination, Typography } from '@mui/material'
+import { mergeObjects } from '../../utils'
+import { tableGridClasses } from './helpers'
+import { CreateTableGridItemActions } from './item-actions'
+import { CreateFilterBar, FilterState } from '../filter-bar'
+import { GlobalModal, PopoverGlobal } from '../../api-context'
+import { TableGridFilter, PaginationModel, TableGridParams, TableGridProps, TableGridInnerSlots } from './types'
+import ToolbarPannelDefault from './toolbar-pannel'
+
+function CreateTableGrid<T extends object>(params: TableGridParams<T>) {
+  const FilterBarInstance = CreateFilterBar<T>(params.filterBarConfig ?? { fields: {} })
+  const ItemActions = CreateTableGridItemActions<T>()
+
+  class TableGrid extends Component<TableGridProps<T>> {
+    defaultPagination: PaginationModel = { page: 0, pageSize: 10 }
+    private filterStateStore: TableGridFilter<T> = { pagination: this.defaultPagination }
+    get filterState(): TableGridFilter<T> {
+      return this.props.filter ?? this.filterStateStore
+    }
+
+    get slots(): TableGridInnerSlots<T> {
+      const obj = mergeObjects(params.slots, this.props.slots)
+      return {
+        ...obj,
+        TableGridItem: this.props.slots?.item ?? params.item ?? (() => <ItemDefault />),
+        ToolbarPannel: this.props.slots?.toolbar ?? params.slots?.toolbar ?? ToolbarPannelDefault
+      }
+    }
+
+    get mergeConfig() {
+      return {
+        size: params.size ?? { xs: 12, sm: 6, md: 4 }
+      }
+    }
+
+    setFilterState = (value: Partial<TableGridFilter<T>>) => {
+      try {
+        if (!!value.details) {
+          this.filterStateStore = { pagination: this.filterStateStore.pagination, ...value }
+        } else {
+          this.filterStateStore = mergeObjects<any>({}, this.filterState, value)
+        }
+        this.props.onFilterChange && this.props.onFilterChange(this.filterStateStore)
+        this.forceUpdate()
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    render() {
+      const { TableGridItem, ToolbarPannel, actionProps } = this.slots
+      const items = this.getItems()
+      return this.preRender(
+        <Wrap className={this.getRootClases()}>
+          <ToolbarPannel title={params.title} {...this.slots.toolbarProps} />
+          <FilterBarInstance value={this.filterState} onChange={this.handleFilterChange} />
+          <div className={tableGridClasses.content}>
+            <div className={[tableGridClasses.contentInner, tableGridClasses.contentPosition].join(' ')}>
+              <Grid container spacing={2} {...this.slots.gridContainer}>
+                {items.map((item, index) => (
+                  <Grid key={params.getSelecterId(item).toString() + index} item {...this.mergeConfig.size} {...this.slots.gridItem}>
+                    <div className={tableGridClasses.item}>
+                      <TableGridItem value={item} />
+                      <Box className={tableGridClasses.actions}>
+                        <ItemActions value={item} {...actionProps} />
+                      </Box>
+                    </div>
+                  </Grid>
+                ))}
+              </Grid>
+            </div>
+            <Fade in={this.filterState.loading} unmountOnExit>
+              <div className={[tableGridClasses.overlay, tableGridClasses.contentPosition].join(' ')}>
+                <CircularProgress size={36} />
+              </div>
+            </Fade>
+            <Fade in={items.length < 1 && !this.filterState.loading} unmountOnExit>
+              <div className={[tableGridClasses.noItems, tableGridClasses.contentPosition].join(' ')}>
+                <Typography variant='body2'>No items data</Typography>
+              </div>
+            </Fade>
+          </div>
+          <Divider />
+          <TablePagination
+            component='div'
+            count={this.props.data.totalItems ?? 0}
+            page={this.filterState.pagination.page}
+            onPageChange={this.handleChangePage}
+            rowsPerPage={this.filterState.pagination.pageSize}
+            onRowsPerPageChange={this.handleChangeRowsPerPage}
+            slotProps={{ select: { MenuProps: { disableScrollLock: true } } }}
+          />
+        </Wrap>
+      )
+    }
+
+    preRender = (children?: ReactNode) => (
+      <GlobalModal>
+        <PopoverGlobal.Provider />
+        {children}
+      </GlobalModal>
+    )
+
+    getRootClases = () => {
+      const classes = [tableGridClasses.root]
+      if (this.filterState.loading) classes.push(tableGridClasses.loading)
+      return classes.join(' ')
+    }
+
+    getItems = () => {
+      return this.props.data.items ?? []
+    }
+
+    handleFilterChange = (filterStateChange: FilterState<T>) => {
+      this.setFilterState(filterStateChange)
+    }
+
+    handleChangePage = (_: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, page: number) => {
+      // this.setState((prev) => ({ pagination: { ...prev.pagination, page } }))
+      this.setFilterState({ pagination: { page, pageSize: this.filterState.pagination.pageSize } })
+    }
+
+    handleChangeRowsPerPage: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {
+      // this.setState({ pagination: { page: 0, pageSize: parseInt(event.target.value, 10) } })
+      this.setFilterState({ pagination: { page: 0, pageSize: parseInt(event.target.value, 10) } })
+    }
+  }
+
+  return TableGrid
+}
+
+export default CreateTableGrid
+
+const Wrap = styled(Box)({
+  flex: 1,
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  [`.${tableGridClasses.content}`]: {
+    position: 'relative',
+    flex: 1
+  },
+  [`.${tableGridClasses.contentPosition}`]: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%'
+  },
+  [`.${tableGridClasses.contentInner}`]: {
+    overflowY: 'auto',
+    padding: '10px 5px'
+  },
+  [`.${tableGridClasses.overlay}`]: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: alpha(colors.common.white, 0.4),
+    zIndex: 10
+  },
+  [`.${tableGridClasses.noItems}`]: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  [`.${tableGridClasses.item}`]: {
+    position: 'relative'
+  },
+  [`.${tableGridClasses.actions}`]: {
+    position: 'absolute',
+    top: '5px',
+    right: '5px',
+    zIndex: 5,
+    display: 'inline-block'
+  }
+})
+
+const ItemDefault = styled(Box)({
+  width: '100%',
+  paddingBottom: '100%',
+  background: colors.grey[600]
+})

package/src/lab/table-grid/demo.tsx

@@ -0,0 +1,53 @@
+import React, { FC } from 'react'
+import CreateTableGrid from './create.table-grid'
+import { Box, Container, Typography } from '@mui/material'
+import { ESearchMatch } from '../filter-bar'
+
+// interface IData {
+//   Id: string
+//   Title: string
+//   Description?: string
+// }
+
+// const getData = () => {
+//   const list: IData[] = []
+//   for (let index = 0; index < 50; index++) {
+//     list.push({
+//       Id: crypto.randomUUID(),
+//       Title: 'Title - ' + index,
+//       Description: 'Description - ' + index
+//     })
+//   }
+//   return list
+// }
+
+// const TableGridInstance = CreateTableGrid<IData>({
+//   getSelecterId: (x) => x.Id,
+//   filterBarConfig: {
+//     fields: {
+//       Id: { searchMatches: { rule: ESearchMatch.AlwaysVisible } },
+//       Title: { searchMatches: { rule: ESearchMatch.AlwaysVisible } },
+//       Description: { searchMatches: { rule: ESearchMatch.AlwaysVisible } }
+//     }
+//   },
+//   item: (p) => {
+//     return (
+//       <Box sx={{ padding: '12px' }}>
+//         <Typography>Media Group Item</Typography>
+//         <Typography variant='body2'>{p.value.Id}</Typography>
+//         <Typography variant='body2'>{p.value.Title}</Typography>
+//       </Box>
+//     )
+//   }
+// })
+
+const TableGridDemo: FC = () => {
+  return (
+    <Container maxWidth='xl'>
+      <Typography>TableGridDemo</Typography>
+      {/* <TableGridInstance value={getData()} /> */}
+    </Container>
+  )
+}
+
+export default TableGridDemo

package/src/lab/table-grid/dino.tsx

@@ -0,0 +1,8 @@
+import CreateLayoutGrid from './create.table-grid'
+
+class DinoTableGridBase {
+  createTable = CreateLayoutGrid
+}
+
+const DinoTableGrid = new DinoTableGridBase()
+export default DinoTableGrid

package/src/lab/table-grid/helpers.tsx

@@ -0,0 +1,11 @@
+export const tableGridClasses = {
+  root: 'TableGrid-root',
+  content: 'TableGrid-content',
+  contentPosition: 'TableGrid-contentPosition',
+  contentInner: 'TableGrid-contentInner',
+  loading: 'TableGrid-loading',
+  overlay: 'TableGrid-overlay',
+  item: 'TableGrid-item',
+  actions: 'TableGrid-actions',
+  noItems: 'TableGrid-noItems'
+}

package/src/lab/table-grid/index.ts

@@ -0,0 +1,3 @@
+export { default as DinoTableGrid } from './dino'
+
+export * from './types'