@elicecontents/content-ui 1.0.21 → 1.0.22

package/cjs/components/button/Button.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { type ButtonProps } from '@mui/material';
+import { type ButtonProps, SxProps } from '@mui/material';
 export interface EliceButtonProps extends ButtonProps {
     children?: React.ReactNode;
     textColor?: string;
     bgColor?: string;
+    sx?: SxProps;
 }
 declare const EliceButton: React.ForwardRefExoticComponent<Omit<EliceButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default EliceButton;

package/cjs/components/button/Button.js

@@ -15,7 +15,8 @@ var EliceButton = React.forwardRef(function (_a, ref) {
     disabled = _a.disabled,
     textColor = _a.textColor,
     bgColor = _a.bgColor,
-    rest = tslib.__rest(_a, ["children", "variant", "disabled", "textColor", "bgColor"]);
+    sx = _a.sx,
+    rest = tslib.__rest(_a, ["children", "variant", "disabled", "textColor", "bgColor", "sx"]);
   var theme = material.useTheme();
   var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
     isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
@@ -25,7 +26,7 @@ var EliceButton = React.forwardRef(function (_a, ref) {
     ref: ref,
     variant: variant,
     disabled: disabled,
-    sx: {
+    sx: Object.assign({
       width: 'fit-content',
       height: isMiniTablet ? '42px' : '56px',
       borderRadius: isMiniTablet ? '12px' : '16px',
@@ -33,7 +34,7 @@ var EliceButton = React.forwardRef(function (_a, ref) {
       color: resolvedColor,
       backgroundColor: resolvedBgColor,
       fontFamily: 'inherit'
-    }
+    }, sx)
   }, rest, {
     children: jsxRuntime.jsx(material.Typography, {
       variant: "buttoninput",

package/cjs/components/index.js

@@ -21,6 +21,7 @@ var BaseInput = require('./base-input/BaseInput.js');
 var Modal = require('./Modal/Modal.js');
 var RecorderChat = require('./recorder-chat/RecorderChat.js');
 var VideoPlayer = require('./video/VideoPlayer.js');
+var VideoV2 = require('./video/VideoV2.js');
 var Recorder = require('./recorder/Recorder.js');
 var Audio = require('./audio/Audio.js');
 var SoundVisualizer = require('./sound-visualizer/SoundVisualizer.js');
@@ -51,6 +52,7 @@ exports.BaseInput = BaseInput.default;
 exports.EliceModal = Modal.default;
 exports.EliceRecorderChat = RecorderChat.default;
 exports.EliceVideoPlayer = VideoPlayer.default;
+exports.EliceVideoV2 = VideoV2.EliceVideoV2;
 exports.EliceRecorder = Recorder.default;
 exports.EliceAudioPlayer = Audio.default;
 exports.SoundVisualizer = SoundVisualizer.SoundVisualizer;

package/cjs/components/video/VideoV2.d.ts

@@ -0,0 +1,20 @@
+interface VideoV2Props {
+    source: {
+        src: string;
+        type?: string;
+    }[];
+    textTrack?: {
+        src: string;
+        lang: string;
+        label?: string;
+        default?: boolean;
+    }[];
+    options?: {
+        autoplay?: boolean;
+        controls?: boolean;
+        poster?: string;
+        playbackRates?: number[];
+    };
+}
+export declare function EliceVideoV2({ source, textTrack, options: _options, }: VideoV2Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/components/video/VideoV2.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@emotion/react');
+var material = require('@mui/material');
+var defu$1 = require('defu');
+var videojs = require('video.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var videojs__default = /*#__PURE__*/_interopDefaultCompat(videojs);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var DEFAULT_OPTIONS = {
+  autoplay: false,
+  controls: true,
+  poster: "",
+  playbackRates: [0.5, 1, 1.5]
+};
+var VideoWrapper = material.styled('div')(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: '100%',
+    height: 'auto',
+    boxShadow: theme.shadows[1],
+    '--theme-primary-color': theme.palette.primary.main,
+    '--theme-secondary-color': theme.palette.secondary.main
+  };
+});
+var defu = defu$1.createDefu(function (object, key, currentValue) {
+  if (Array.isArray(object[key])) {
+    object[key] = currentValue;
+    return true;
+  }
+});
+var _ref = "production" === "production" ? {
+  name: "59xsct",
+  styles: "@import url('https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css');{}.video-js.elice-video{font-size:var(--fluid-size);font-family:Pretendard,Arial,sans-serif;& .vjs-progress-control{position:absolute;bottom:2.55em;height:0.5em;left:0;width:100%;&>.vjs-slider{margin:0;&>.vjs-play-progress{background-color:var(--theme-primary-color);}}}& .vjs-big-play-button{width:2em;height:1.5em;margin-top:-0.75em;margin-left:-1em;background-color:transparent;&::before{width:100%;height:100%;content:'';background-color:var(--theme-secondary-color);opacity:0.4;border-radius:0.3em;position:absolute;top:0;left:0;}}& .vjs-volume-bar{margin:1.5em 0.45em 1.2em;}& .vjs-control.vjs-button{width:3em;padding:0 0.5em;&>*::before{font-size:calc(var(--fluid-size) * 1.5);line-height:calc(var(--fluid-size) * 3.25);}}& .vjs-playback-rate{& .vjs-menu{left:-0.5em;}& .vjs-playback-rate-value{font-size:calc(var(--fluid-size) * 0.8);line-height:calc(var(--fluid-size) * 3.25);}& .vjs-menu-item{font-size:calc(var(--fluid-size) * 1);line-height:calc(var(--fluid-size) * 1.4);}}& .vjs-menu.vjs-lock-showing .vjs-menu-item{margin-block:0;}& .vjs-time-control{font-size:calc(var(--fluid-size) * 0.8);line-height:calc(var(--fluid-size) * 3.25);}& .vjs-current-time,& .vjs-duration,& .vjs-time-divider{display:block;font-family:Pretendard,Arial,sans-serif;}& .vjs-time-divider{width:auto;min-width:0;padding:0;}& .vjs-remaining-time{display:none;}& .vjs-playback-rate{display:block;}& .vjs-volume-level{background-color:var(--theme-primary-color);color:var(--theme-primary-color);}& .vjs-load-progress{background-color:var(--theme-secondary-color);opacity:0.5;}& .vjs-playback-rate{margin-left:auto;}}"
+} : {
+  name: "59xsct",
+  styles: "@import url('https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css');{}.video-js.elice-video{font-size:var(--fluid-size);font-family:Pretendard,Arial,sans-serif;& .vjs-progress-control{position:absolute;bottom:2.55em;height:0.5em;left:0;width:100%;&>.vjs-slider{margin:0;&>.vjs-play-progress{background-color:var(--theme-primary-color);}}}& .vjs-big-play-button{width:2em;height:1.5em;margin-top:-0.75em;margin-left:-1em;background-color:transparent;&::before{width:100%;height:100%;content:'';background-color:var(--theme-secondary-color);opacity:0.4;border-radius:0.3em;position:absolute;top:0;left:0;}}& .vjs-volume-bar{margin:1.5em 0.45em 1.2em;}& .vjs-control.vjs-button{width:3em;padding:0 0.5em;&>*::before{font-size:calc(var(--fluid-size) * 1.5);line-height:calc(var(--fluid-size) * 3.25);}}& .vjs-playback-rate{& .vjs-menu{left:-0.5em;}& .vjs-playback-rate-value{font-size:calc(var(--fluid-size) * 0.8);line-height:calc(var(--fluid-size) * 3.25);}& .vjs-menu-item{font-size:calc(var(--fluid-size) * 1);line-height:calc(var(--fluid-size) * 1.4);}}& .vjs-menu.vjs-lock-showing .vjs-menu-item{margin-block:0;}& .vjs-time-control{font-size:calc(var(--fluid-size) * 0.8);line-height:calc(var(--fluid-size) * 3.25);}& .vjs-current-time,& .vjs-duration,& .vjs-time-divider{display:block;font-family:Pretendard,Arial,sans-serif;}& .vjs-time-divider{width:auto;min-width:0;padding:0;}& .vjs-remaining-time{display:none;}& .vjs-playback-rate{display:block;}& .vjs-volume-level{background-color:var(--theme-primary-color);color:var(--theme-primary-color);}& .vjs-load-progress{background-color:var(--theme-secondary-color);opacity:0.5;}& .vjs-playback-rate{margin-left:auto;}}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+function EliceVideoV2(_ref3) {
+  var source = _ref3.source,
+    textTrack = _ref3.textTrack,
+    _options = _ref3.options;
+  var options = defu(_options !== null && _options !== void 0 ? _options : {}, DEFAULT_OPTIONS);
+  var videoRef = React__default.default.useRef(null);
+  var playerRef = React__default.default.useRef(null);
+  React__default.default.useEffect(function () {
+    if (!videoRef.current) return;
+    var player = videojs__default.default(videoRef.current, Object.assign(Object.assign({}, options), {
+      disablePictureInPicture: true,
+      fluid: true
+    }));
+    playerRef.current = player;
+    return function () {
+      if (playerRef.current) {
+        playerRef.current.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, []);
+  return jsxRuntime.jsxs(VideoWrapper, {
+    children: [jsxRuntime.jsx(react.Global, {
+      styles: _ref
+    }), jsxRuntime.jsxs("video", {
+      ref: videoRef,
+      className: "video-js elice-video vjs-default-skin",
+      children: [source.map(function (srcInfo) {
+        return jsxRuntime.jsx("source", {
+          src: srcInfo.src,
+          type: srcInfo.type
+        }, srcInfo.src);
+      }), textTrack === null || textTrack === void 0 ? void 0 : textTrack.map(function (track) {
+        return jsxRuntime.jsx("track", {
+          src: track.src,
+          kind: "subtitles",
+          srcLang: track.lang,
+          label: track.label,
+          "default": track["default"]
+        }, track.src);
+      })]
+    })]
+  });
+}
+
+exports.EliceVideoV2 = EliceVideoV2;

package/cjs/components/video/index.d.ts

@@ -1,2 +1,3 @@
 export { default as EliceVideoPlayer } from './VideoPlayer';
+export { EliceVideoV2 } from './VideoV2';
 export type { EliceVideoPlayerProps } from './VideoPlayer';

package/cjs/components/video/index.js

@@ -1,7 +1,9 @@
 'use strict';
 
 var VideoPlayer = require('./VideoPlayer.js');
+var VideoV2 = require('./VideoV2.js');
 
 
 
 exports.EliceVideoPlayer = VideoPlayer.default;
+exports.EliceVideoV2 = VideoV2.EliceVideoV2;

package/cjs/index.js

@@ -22,6 +22,7 @@ var BaseInput = require('./components/base-input/BaseInput.js');
 var Modal = require('./components/Modal/Modal.js');
 var RecorderChat = require('./components/recorder-chat/RecorderChat.js');
 var VideoPlayer = require('./components/video/VideoPlayer.js');
+var VideoV2 = require('./components/video/VideoV2.js');
 var Recorder = require('./components/recorder/Recorder.js');
 var Audio = require('./components/audio/Audio.js');
 var SoundVisualizer = require('./components/sound-visualizer/SoundVisualizer.js');
@@ -85,6 +86,7 @@ exports.BaseInput = BaseInput.default;
 exports.EliceModal = Modal.default;
 exports.EliceRecorderChat = RecorderChat.default;
 exports.EliceVideoPlayer = VideoPlayer.default;
+exports.EliceVideoV2 = VideoV2.EliceVideoV2;
 exports.EliceRecorder = Recorder.default;
 exports.EliceAudioPlayer = Audio.default;
 exports.SoundVisualizer = SoundVisualizer.SoundVisualizer;

package/cjs/theme/createAIDTTheme.d.ts

@@ -1,3 +1,3 @@
 import type { CreateAIDTThemeProps } from '../types/theme.types';
-declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyFontFamily, }: CreateAIDTThemeProps) => import("@mui/material").Theme;
+declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyType, typographyFontFamily, }: CreateAIDTThemeProps) => import("@mui/material").Theme;
 export { createAIDTTheme };

package/cjs/theme/createAIDTTheme.js

@@ -17,6 +17,8 @@ var createAIDTTheme = function createAIDTTheme(_ref) {
     paletteSubject = _ref$paletteSubject === void 0 ? 'korean' : _ref$paletteSubject,
     _ref$paletteLevel = _ref.paletteLevel,
     paletteLevel = _ref$paletteLevel === void 0 ? 'elementary' : _ref$paletteLevel,
+    _ref$typographyType = _ref.typographyType,
+    typographyType = _ref$typographyType === void 0 ? 'Default' : _ref$typographyType,
     _ref$typographyFontFa = _ref.typographyFontFamily,
     typographyFontFamily = _ref$typographyFontFa === void 0 ? 'pretendard' : _ref$typographyFontFa;
   var themeColors = AIDTTheme.getThemeColors(palettePublisher, paletteSubject, paletteLevel);
@@ -38,7 +40,7 @@ var createAIDTTheme = function createAIDTTheme(_ref) {
       grey: gray.gray
     },
     breakpoints: breakpoints.AIDTBreakpoints,
-    typography: typography.createAIDTTypography(typographyFontFamily),
+    typography: typography.createAIDTTypography(typographyFontFamily, typographyType),
     components: {
       MuiCssBaseline: {
         styleOverrides: {

package/cjs/types/theme.types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
 import type { TypographyFontFamilyType } from '../typography';
+import { TYPOGRAPHY_STYLES_MAP } from '../typography/TypographyType';
 export interface TypographyVariantsExtension {
     pagination: React.CSSProperties;
     buttoninput: React.CSSProperties;
@@ -62,6 +63,7 @@ export interface CreateAIDTThemeProps {
     palettePublisher?: AIDTPalettePublisher;
     paletteSubject?: AIDTPaletteSubject;
     paletteLevel?: AIDTPaletteLevel;
+    typographyType?: keyof typeof TYPOGRAPHY_STYLES_MAP;
     typographyFontFamily: TypographyFontFamilyType;
 }
 export type CreateAIDTTheme = (props?: CreateAIDTThemeProps) => Theme;

package/cjs/typography/TypographyType.d.ts

@@ -0,0 +1,239 @@
+export declare const TYPOGRAPHY_STYLES_MAP: {
+    Default: {
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        body1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        buttoninput: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        pagination: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+    };
+    Fluid: {
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        body1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        buttoninput: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        pagination: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+    };
+    TypeG: {
+        h1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        h2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle1: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle2: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        subtitle3: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        buttoninput: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+        pagination: {
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            "@media (max-width:1200px)": {
+                fontSize: string;
+            };
+            "@media (max-width:768px)": {
+                fontSize: string;
+            };
+        };
+    };
+};