@elicecontents/content-ui 1.0.6 → 1.0.7

package/es/components/recorder/Recorder.js

@@ -0,0 +1,209 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Stack, useTheme, Typography, Box, Button } from '@mui/material';
+import ReadyRecord from '../../icons/ReadyRecord.js';
+import Recording from '../../icons/Recording.js';
+import EliceButton from '../button/Button.js';
+
+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 EliceRecorder = function EliceRecorder(_ref) {
+  var onAudioReady = _ref.onAudioReady,
+    onTransform = _ref.onTransform;
+  var theme = useTheme();
+  var _useState = useState("ready"),
+    _useState2 = _slicedToArray(_useState, 2),
+    recordingStep = _useState2[0],
+    setRecordingStep = _useState2[1];
+  var mediaRecorderRef = useRef(null);
+  var audioChunks = useRef([]);
+  var streamRef = useRef(null);
+  var audioContextRef = useRef(null);
+  var analyserRef = useRef(null);
+  var sourceRef = useRef(null);
+  var startRecording = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var audioStream;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            _context2.next = 3;
+            return navigator.mediaDevices.getUserMedia({
+              audio: true
+            });
+          case 3:
+            audioStream = _context2.sent;
+            streamRef.current = audioStream;
+            audioChunks.current = [];
+            mediaRecorderRef.current = new MediaRecorder(audioStream);
+            mediaRecorderRef.current.ondataavailable = function (event) {
+              if (event.data.size > 0) {
+                audioChunks.current.push(event.data);
+              }
+            };
+            mediaRecorderRef.current.onstop = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var audioBlob, file;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    audioBlob = new Blob(audioChunks.current, {
+                      type: "audio/wav"
+                    });
+                    file = new File([audioBlob], "recording-".concat(Date.now(), ".wav"), {
+                      type: "audio/wav"
+                    });
+                    onAudioReady(file);
+                  case 3:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            // ✅ 음성 분석용 AudioContext 연결
+            audioContextRef.current = new AudioContext();
+            analyserRef.current = audioContextRef.current.createAnalyser();
+            sourceRef.current = audioContextRef.current.createMediaStreamSource(audioStream);
+            sourceRef.current.connect(analyserRef.current);
+            mediaRecorderRef.current.start();
+            setRecordingStep("recording");
+            _context2.next = 20;
+            break;
+          case 17:
+            _context2.prev = 17;
+            _context2.t0 = _context2["catch"](0);
+            console.error("🎤 마이크 권한을 허용해주세요.", _context2.t0);
+          case 20:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 17]]);
+    }));
+    return function startRecording() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var stopRecording = function stopRecording() {
+    var _a, _b, _c;
+    (_a = mediaRecorderRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+    (_b = streamRef.current) === null || _b === void 0 ? void 0 : _b.getTracks().forEach(function (track) {
+      return track.stop();
+    });
+    (_c = audioContextRef.current) === null || _c === void 0 ? void 0 : _c.close();
+    audioContextRef.current = null;
+    setRecordingStep("waiting");
+  };
+  return jsxs(Stack, {
+    direction: "column",
+    minHeight: "70px",
+    bgcolor: theme.palette.grey[50],
+    padding: "12px 9px",
+    borderRadius: "18px",
+    alignItems: "center",
+    justifyContent: "center",
+    children: [jsx(SoundWaveVisualizer, {
+      analyser: analyserRef.current
+    }), jsxs(StyledRecorderContent, {
+      direction: "row",
+      children: [jsxs(StyledRecorderButton, {
+        step: recordingStep,
+        onClick: recordingStep === "ready" ? startRecording : stopRecording,
+        children: [recordingStep === "ready" || recordingStep === "waiting" ? jsx(ReadyRecord, {}) : jsx(Recording, {}), jsx(Typography, {
+          variant: "buttoninput",
+          children: recordingStep === "ready" ? "녹음 시작" : recordingStep === "recording" ? "녹음 중지" : "다시 녹음"
+        })]
+      }), jsx(EliceButton, {
+        disabled: recordingStep !== "waiting",
+        variant: recordingStep === "waiting" ? "outlined" : "contained",
+        onClick: onTransform,
+        children: "\uBCC0\uD658"
+      })]
+    })]
+  });
+};
+var SoundWaveVisualizer = function SoundWaveVisualizer(_ref4) {
+  var analyser = _ref4.analyser;
+  var theme = useTheme();
+  var TOTAL_BARS = 17;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filledBars = _useState4[0],
+    setFilledBars = _useState4[1];
+  useEffect(function () {
+    if (!analyser) return;
+    analyser.fftSize = 128; // ✅ FFT 크기 줄여 반응속도 개선
+    var dataArray = new Uint8Array(analyser.frequencyBinCount);
+    var prevVolume = 0;
+    var _updateVolume = function updateVolume() {
+      analyser.getByteFrequencyData(dataArray);
+      var averageVolume = dataArray.reduce(function (acc, val) {
+        return acc + val;
+      }, 0) / dataArray.length;
+      // ✅ 더 높은 민감도 설정 (3배 증폭)
+      var scaledVolume = Math.min(averageVolume * 3, 255);
+      // ✅ 더 높은 가중치를 현재 값에 적용 (빠르게 반응)
+      var smoothedVolume = prevVolume * 0.5 + scaledVolume * 0.5;
+      prevVolume = smoothedVolume;
+      // ✅ TOTAL_BARS에 맞게 변환
+      var newFilledBars = Math.floor(smoothedVolume / 255 * TOTAL_BARS);
+      setFilledBars(function (prev) {
+        return Math.round(prev * 0.6 + newFilledBars * 0.4);
+      }); // ✅ 더 빠르게 반응
+      requestAnimationFrame(_updateVolume);
+    };
+    _updateVolume();
+    return function () {
+      return setFilledBars(0);
+    };
+  }, [analyser]);
+  return jsx(Stack, {
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    bgcolor: "transparent",
+    children: jsx(Box, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      p: "6px 36px 7.5px 31px",
+      width: "100%",
+      gap: "11px",
+      bgcolor: theme.palette.grey[50],
+      children: Array(TOTAL_BARS).fill(0).map(function (_, idx) {
+        return jsx(WaveBar, {
+          isFilled: idx < filledBars,
+          theme: theme
+        }, idx);
+      })
+    })
+  });
+};
+var WaveBar = /*#__PURE__*/_styled(Box, {
+  target: "el6xa1g2"
+})("width:11px;height:34px;border-radius:11px;background-color:", function (_ref5) {
+  var isFilled = _ref5.isFilled,
+    theme = _ref5.theme;
+  return isFilled ? theme.palette.primary.main : theme.palette.grey[200];
+}, ";transition:background-color 0.1s ease-in-out;");
+var StyledRecorderButton = /*#__PURE__*/_styled(Button, {
+  target: "el6xa1g1"
+})("display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px;color:", function (_ref6) {
+  var step = _ref6.step;
+  return step === "ready" || step === "waiting" ? "#fff" : "#FF5D58";
+}, ";background:", function (_ref7) {
+  var step = _ref7.step;
+  return step === "ready" || step === "waiting" ? "#FF5D58" : "#FBE0E0";
+}, ";");
+var StyledRecorderContent = /*#__PURE__*/_styled(Stack, {
+  target: "el6xa1g0"
+})("production" === "production" ? {
+  name: "o9fzdr",
+  styles: "width:100%;display:flex;justify-content:center;align-items:center;gap:16px"
+} : {
+  name: "o9fzdr",
+  styles: "width:100%;display:flex;justify-content:center;align-items:center;gap:16px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+export { EliceRecorder as default };

package/es/components/recorder/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EliceRecorder } from './Recorder';
+export type { EliceRecorderProps } from './Recorder';

package/es/components/recorder/index.js

@@ -0,0 +1 @@
+export { default as EliceRecorder } from './Recorder.js';

package/es/components/video/VideoPlayer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface EliceVideoPlayerProps {
+    source: string;
+    autoPlay?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onProgress?: (seconds: number) => void;
+    tracks?: {
+        src: string;
+        kind: string;
+        srclang: string;
+        label: string;
+    }[];
+    sx?: React.CSSProperties;
+    height?: string;
+    pageKey?: string;
+    videoKey?: string;
+}
+declare const EliceVideoPlayer: ({ source, autoPlay, onPlay, onPause, onEnded, onProgress, tracks, sx, height, videoKey, }: EliceVideoPlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default EliceVideoPlayer;

package/es/components/video/VideoPlayer.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Stack } from '@mui/material';
+
+var EliceVideoPlayer = function EliceVideoPlayer(_ref) {
+  var source = _ref.source,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    onPlay = _ref.onPlay,
+    onPause = _ref.onPause,
+    onEnded = _ref.onEnded,
+    onProgress = _ref.onProgress,
+    tracks = _ref.tracks,
+    sx = _ref.sx,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    videoKey = _ref.videoKey;
+  var videoRef = useRef(null);
+  var lastTime = useRef(videoKey ? Number(localStorage.getItem(videoKey)) || 0 : 0);
+  useEffect(function () {
+    var video = videoRef.current;
+    if (!video) return;
+    video.currentTime = lastTime.current;
+    var handlePlay = function handlePlay() {
+      return onPlay === null || onPlay === void 0 ? void 0 : onPlay();
+    };
+    var handlePause = function handlePause() {
+      return onPause === null || onPause === void 0 ? void 0 : onPause();
+    };
+    var handleEnded = function handleEnded() {
+      return onEnded === null || onEnded === void 0 ? void 0 : onEnded();
+    };
+    var handleTimeUpdate = function handleTimeUpdate() {
+      var seconds = video.currentTime;
+      onProgress === null || onProgress === void 0 ? void 0 : onProgress(seconds);
+      if (videoKey) {
+        localStorage.setItem(videoKey, seconds.toString());
+      }
+    };
+    video.addEventListener('play', handlePlay);
+    video.addEventListener('pause', handlePause);
+    video.addEventListener('ended', handleEnded);
+    video.addEventListener('timeupdate', handleTimeUpdate);
+    return function () {
+      video.removeEventListener('play', handlePlay);
+      video.removeEventListener('pause', handlePause);
+      video.removeEventListener('ended', handleEnded);
+      video.removeEventListener('timeupdate', handleTimeUpdate);
+    };
+  }, [videoKey, onPlay, onPause, onEnded, onProgress]);
+  return jsx(Stack, {
+    width: "100%",
+    height: height,
+    borderRadius: "1rem",
+    overflow: "hidden",
+    border: "1px solid #e0e0e0",
+    sx: Object.assign({
+      video: {
+        width: '100%',
+        height: '100%',
+        borderRadius: '1rem',
+        objectFit: 'cover'
+      }
+    }, sx),
+    children: jsxs("video", {
+      ref: videoRef,
+      controls: true,
+      autoPlay: autoPlay,
+      width: "100%",
+      crossOrigin: "anonymous",
+      children: [jsx("source", {
+        src: source,
+        type: "video/mp4"
+      }), tracks === null || tracks === void 0 ? void 0 : tracks.map(function (track, i) {
+        return jsx("track", {
+          src: track.src,
+          kind: track.kind,
+          srcLang: track.srclang,
+          label: track.label
+        }, i);
+      }), "Your browser does not support the video tag."]
+    })
+  });
+};
+
+export { EliceVideoPlayer as default };

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

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

package/es/components/video/index.js

@@ -0,0 +1 @@
+export { default as EliceVideoPlayer } from './VideoPlayer.js';

package/es/icons/NumbersIcon.d.ts

@@ -4,6 +4,8 @@ interface NumbersIconProps {
     color?: string;
     textColor?: string;
     pathColor?: string;
+    customBackgroundPath?: string;
+    type?: 'default' | 'spark';
 }
-declare const NumbersIcon: ({ value, size, color, textColor, pathColor, }: NumbersIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumbersIcon: ({ value, size, type, color, textColor, pathColor, customBackgroundPath, }: NumbersIconProps) => import("react/jsx-runtime").JSX.Element;
 export default NumbersIcon;

package/es/icons/NumbersIcon.js

@@ -1,6 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTheme } from '@mui/material';
 
+var backgroundPaths = {
+  spark: "M60 42.4274C60 42.4274 46.7999 45.2863 42.4263 60C42.4263 60 31.0711 52.6884 17.5737 60C17.5737 60 14.7148 46.7999 0 42.4263C0 42.4263 7.31164 31.0711 0 17.5737C0 17.5737 13.2001 14.7148 17.5737 0C17.5737 0 28.9289 7.31164 42.4263 0C42.4263 0 45.2852 13.2001 60 17.5737C60 17.5737 52.6884 28.9289 60 42.4263V42.4274Z"
+  // 추가 배경이 있다면 여기에 계속 추가
+};
 // ✅ 숫자 및 문자별 `path` 값을 정적으로 저장
 var numberPaths = {
   "1": "M25.7758 31.16H21.3838V16.376L16.9678 19.064V14.84L22.1038 11.864H25.7758V31.16Z",
@@ -22,19 +26,35 @@ var NumbersIcon = function NumbersIcon(_ref) {
   var value = _ref.value,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 45 : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
     color = _ref.color,
     textColor = _ref.textColor,
     _ref$pathColor = _ref.pathColor,
-    pathColor = _ref$pathColor === void 0 ? "#fff" : _ref$pathColor;
+    pathColor = _ref$pathColor === void 0 ? "#fff" : _ref$pathColor,
+    customBackgroundPath = _ref.customBackgroundPath;
   var theme = useTheme();
   var path = numberPaths[value.toString()];
+  var fillColor = color || theme.palette.primary.main;
+  var textFill = textColor || theme.palette.text.primary;
+  var resolvedBackgroundPath = customBackgroundPath || (type !== "default" ? backgroundPaths[type] : undefined);
   return jsxs("svg", {
     width: size,
     height: size,
     viewBox: "0 0 45 45",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [jsx("circle", {
+    children: [resolvedBackgroundPath ? jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 60 60",
+      fill: "none",
+      children: jsx("path", {
+        d: resolvedBackgroundPath,
+        fill: fillColor
+      })
+    }) : jsx("circle", {
       cx: "22.5",
       cy: "22.5",
       r: "22.5",
@@ -48,7 +68,7 @@ var NumbersIcon = function NumbersIcon(_ref) {
       dominantBaseline: "middle",
       textAnchor: "middle",
       fontSize: size * 0.5,
-      fill: textColor || theme.palette.text.primary,
+      fill: textFill,
       fontFamily: "Arial, sans-serif",
       fontWeight: "bold",
       children: value

package/es/index.js

@@ -18,6 +18,9 @@ export { default as EliceSubButton } from './components/subtitle-button/Subtitle
 export { default as BaseInput } from './components/base-input/BaseInput.js';
 export { default as EliceModal } from './components/Modal/Modal.js';
 export { default as EliceRecorderChat } from './components/recorder-chat/RecorderChat.js';
+export { default as EliceVideoPlayer } from './components/video/VideoPlayer.js';
+export { default as EliceRecorder } from './components/recorder/Recorder.js';
+export { default as EliceAudioPlayer } from './components/audio/Audio.js';
 export { default as ArrowLeft } from './icons/ArrowLeft.js';
 export { default as ArrowRight } from './icons/ArrowRight.js';
 export { default as Close } from './icons/Close.js';

package/es/typography/typography.d.ts

@@ -41,6 +41,17 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
             fontSize: string;
         };
     };
+    subtitle3: {
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        "@media (max-width:1200px)": {
+            fontSize: string;
+        };
+        "@media (max-width:512px)": {
+            fontSize: string;
+        };
+    };
     body1: {
         fontSize: string;
         fontWeight: number;

package/es/typography/typography.js

@@ -60,6 +60,15 @@ var createAIDTTypography = function createAIDTTypography(fontFamily) {
       fontSize: '22px'
     }),
     subtitle2: _defineProperty(_defineProperty({
+      fontSize: '24px',
+      fontWeight: 700,
+      lineHeight: '160%'
+    }, "@media (max-width:1200px)", {
+      fontSize: '24px'
+    }), "@media (max-width:512px)", {
+      fontSize: '18px'
+    }),
+    subtitle3: _defineProperty(_defineProperty({
       fontSize: '20px',
       fontWeight: 700,
       lineHeight: '140%'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",