dinocollab-core 1.0.0 → 1.0.2

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

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

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

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

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

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

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

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

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

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