@elicecontents/content-ui 1.0.24 → 1.0.25-rc.0

package/cjs/components/chat/Chat.js

@@ -242,7 +242,7 @@ EliceChat.InputArea = function (_ref3) {
           placeholder: placeHolder,
           theme: theme,
           multiline: true,
-          onKeyDown: function onKeyDown(e) {
+          onKeyUpCapture: function onKeyUpCapture(e) {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
               if (value.trim()) {

package/cjs/components/layout/Layout.js

@@ -122,11 +122,11 @@ var Layout = function Layout(_ref) {
 var HeaderContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
   target: "efnp08i6"
 })("production" === "production" ? {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
 } : {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var HeaderContainer = function HeaderContainer(_ref2) {
@@ -141,7 +141,7 @@ var HeaderTitle = LayoutHeaderTitle.default;
 var HeaderSubTitle = LayoutHeaderSubTitle.default;
 var ContentContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
   target: "efnp08i5"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
   var theme = _ref3.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
@@ -211,22 +211,22 @@ var ContentContainer = function ContentContainer(_ref5) {
     };
   }, []);
   return jsxRuntime.jsxs(Stack, {
-    sx: {
+    sx: Object.assign({
       position: 'relative',
       width: '100%',
       height: '100%'
-    },
+    }, sx),
     children: [jsxRuntime.jsxs(ContentContainerInner, {
       ref: contentRef,
       theme: theme,
       flex: 1,
-      sx: Object.assign(Object.assign({}, sx), {
+      sx: {
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
         '&::-webkit-scrollbar': {
           display: 'none'
         }
-      }),
+      },
       children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
         children: jsxRuntime.jsx(ScrollMoreIcon.default, {
           size: 32,

package/cjs/components/video/VideoV2.js

@@ -86,10 +86,10 @@ var VideoWrapper = material.styled('div')(function (_ref2) {
         }
       },
       '& .vjs-big-play-button': {
-        width: '4em',
-        height: '3em',
-        marginTop: '-0.75em',
-        marginLeft: '-1em',
+        width: 'calc(var(--fluid-size) * 4)',
+        height: 'calc(var(--fluid-size) * 4)',
+        marginTop: 'calc(var(--fluid-size) * -2)',
+        marginLeft: 'calc(var(--fluid-size) * -2)',
         backgroundColor: 'transparent',
         '&:before': {
           width: '100%',
@@ -281,8 +281,8 @@ function EliceVideoV2(_ref3) {
       styles: _ref
     }), jsxRuntime.jsxs("video", {
       ref: function ref(r) {
-        videoRef.current = r;
         if (!videoRef.current) {
+          videoRef.current = r;
           requestAnimationFrame(function () {
             var player = videojs__default.default(r, defu(options, {
               disablePictureInPicture: true,
@@ -388,7 +388,7 @@ function EliceVideoV2(_ref3) {
           });
           return function () {
             var _a;
-            if (playerRef.current) {
+            if (!r && playerRef.current) {
               (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
               playerRef.current = null;
             }

package/es/components/chat/Chat.js

@@ -233,7 +233,7 @@ EliceChat.InputArea = function (_ref3) {
           placeholder: placeHolder,
           theme: theme,
           multiline: true,
-          onKeyDown: function onKeyDown(e) {
+          onKeyUpCapture: function onKeyUpCapture(e) {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
               if (value.trim()) {

package/es/components/index.js

@@ -1,4 +1,5 @@
 export { EliceLayout } from './layout/index.js';
+export { default as EliceTextarea } from './textarea/Textarea.js';
 export { default as EliceAIFeedback } from './AI-feedback/AIFeedback.js';
 export { default as EliceBadge } from './badge/Badge.js';
 export { default as EliceButton } from './button/Button.js';
@@ -10,7 +11,6 @@ export { default as EliceSelection } from './selection/Selection.js';
 export { default as EliceIconButton } from './icon-button/IconButton.js';
 export { default as EliceAnswerFeedback } from './answer-feedback/AnswerFeedback.js';
 export { default as EliceTable } from './table/Table.js';
-export { default as EliceTextarea } from './textarea/Textarea.js';
 export { default as EliceTooltip } from './tooltip/Tooltip.js';
 export { default as AIDTTypography } from './AIDTTypography/AIDTTypography.js';
 export { default as EliceImage } from './AdaptiveImage/AdaptiveImage.js';

package/es/components/layout/Layout.js

@@ -115,11 +115,11 @@ var Layout = function Layout(_ref) {
 var HeaderContainerInner = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i6"
 })("production" === "production" ? {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
 } : {
-  name: "14ia2gs",
-  styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
+  name: "gwvfyq",
+  styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var HeaderContainer = function HeaderContainer(_ref2) {
@@ -134,7 +134,7 @@ var HeaderTitle = LayoutHeaderTitle;
 var HeaderSubTitle = LayoutHeaderSubTitle;
 var ContentContainerInner = /*#__PURE__*/_styled(Stack, {
   target: "efnp08i5"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
+})("flex:1;width:100%;max-width:1200px;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref3) {
   var theme = _ref3.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
@@ -204,22 +204,22 @@ var ContentContainer = function ContentContainer(_ref5) {
     };
   }, []);
   return jsxs(Stack, {
-    sx: {
+    sx: Object.assign({
       position: 'relative',
       width: '100%',
       height: '100%'
-    },
+    }, sx),
     children: [jsxs(ContentContainerInner, {
       ref: contentRef,
       theme: theme,
       flex: 1,
-      sx: Object.assign(Object.assign({}, sx), {
+      sx: {
         scrollbarWidth: 'none',
         msOverflowStyle: 'none',
         '&::-webkit-scrollbar': {
           display: 'none'
         }
-      }),
+      },
       children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
         children: jsx(ScrollMoreIcon, {
           size: 32,

package/es/components/video/VideoV2.js

@@ -79,10 +79,10 @@ var VideoWrapper = styled('div')(function (_ref2) {
         }
       },
       '& .vjs-big-play-button': {
-        width: '4em',
-        height: '3em',
-        marginTop: '-0.75em',
-        marginLeft: '-1em',
+        width: 'calc(var(--fluid-size) * 4)',
+        height: 'calc(var(--fluid-size) * 4)',
+        marginTop: 'calc(var(--fluid-size) * -2)',
+        marginLeft: 'calc(var(--fluid-size) * -2)',
         backgroundColor: 'transparent',
         '&:before': {
           width: '100%',
@@ -274,8 +274,8 @@ function EliceVideoV2(_ref3) {
       styles: _ref
     }), jsxs("video", {
       ref: function ref(r) {
-        videoRef.current = r;
         if (!videoRef.current) {
+          videoRef.current = r;
           requestAnimationFrame(function () {
             var player = videojs(r, defu(options, {
               disablePictureInPicture: true,
@@ -381,7 +381,7 @@ function EliceVideoV2(_ref3) {
           });
           return function () {
             var _a;
-            if (playerRef.current) {
+            if (!r && playerRef.current) {
               (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
               playerRef.current = null;
             }

package/package.json

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