@elicecontents/content-ui 1.0.23 → 1.0.24-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/components/layout/Footer/LayoutFooterPaging.js +8 -2
  2. package/cjs/components/layout/Layout.js +9 -9
  3. package/cjs/components/video/VideoV2.js +249 -21
  4. package/cjs/icons/ArrowLeft.js +2 -1
  5. package/cjs/icons/ArrowRight.js +2 -1
  6. package/es/components/layout/Footer/LayoutFooterPaging.js +8 -2
  7. package/es/components/layout/Layout.js +9 -9
  8. package/es/components/video/VideoV2.js +249 -21
  9. package/es/icons/ArrowLeft.js +2 -1
  10. package/es/icons/ArrowRight.js +2 -1
  11. package/package.json +1 -1
package/cjs/components/layout/Footer/LayoutFooterPaging.js CHANGED
@@ -63,8 +63,14 @@ var LayoutFooterPaging = function LayoutFooterPaging(_ref3) {
63
63
  isTablet: isTablet,
64
64
  children: [jsxRuntime.jsx(StyledCurrentPage, {
65
65
  fontColor: theme.palette.primary.main,
66
- children: currentPage
67
- }), " ", "/ ", totalPage]
66
+ children: jsxRuntime.jsx("span", {
67
+ children: currentPage
68
+ })
69
+ }), " ", jsxRuntime.jsx("span", {
70
+ children: "/"
71
+ }), " ", jsxRuntime.jsx("span", {
72
+ children: totalPage
73
+ })]
68
74
  }), isTablet && jsxRuntime.jsx(PaginationButton.default, {
69
75
  right: true,
70
76
  onClick: onNext,
package/cjs/components/layout/Layout.js CHANGED
@@ -122,11 +122,11 @@ var Layout = function Layout(_ref) {
122
122
  var HeaderContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
123
123
  target: "efnp08i6"
124
124
  })("production" === "production" ? {
125
- name: "14ia2gs",
126
- styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
125
+ name: "gwvfyq",
126
+ styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
127
127
  } : {
128
- name: "14ia2gs",
129
- styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
128
+ name: "gwvfyq",
129
+ styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
130
130
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
131
131
  });
132
132
  var HeaderContainer = function HeaderContainer(_ref2) {
@@ -141,7 +141,7 @@ var HeaderTitle = LayoutHeaderTitle.default;
141
141
  var HeaderSubTitle = LayoutHeaderSubTitle.default;
142
142
  var ContentContainerInner = /*#__PURE__*/_styled__default.default(Stack, {
143
143
  target: "efnp08i5"
144
- })("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) {
144
+ })("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) {
145
145
  var theme = _ref3.theme;
146
146
  return theme.palette.primary.main;
147
147
  }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
@@ -211,22 +211,22 @@ var ContentContainer = function ContentContainer(_ref5) {
211
211
  };
212
212
  }, []);
213
213
  return jsxRuntime.jsxs(Stack, {
214
- sx: {
214
+ sx: Object.assign({
215
215
  position: 'relative',
216
216
  width: '100%',
217
217
  height: '100%'
218
- },
218
+ }, sx),
219
219
  children: [jsxRuntime.jsxs(ContentContainerInner, {
220
220
  ref: contentRef,
221
221
  theme: theme,
222
222
  flex: 1,
223
- sx: Object.assign(Object.assign({}, sx), {
223
+ sx: {
224
224
  scrollbarWidth: 'none',
225
225
  msOverflowStyle: 'none',
226
226
  '&::-webkit-scrollbar': {
227
227
  display: 'none'
228
228
  }
229
- }),
229
+ },
230
230
  children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsxRuntime.jsx(ScrollMoreButton, {
231
231
  children: jsxRuntime.jsx(ScrollMoreIcon.default, {
232
232
  size: 32,
package/cjs/components/video/VideoV2.js CHANGED
@@ -17,7 +17,7 @@ var DEFAULT_OPTIONS = {
17
17
  autoplay: false,
18
18
  controls: true,
19
19
  poster: "",
20
- playbackRates: [0.5, 1, 1.5]
20
+ playbackRates: [0.5, 1, 1.5, 2.0]
21
21
  };
22
22
  var VideoWrapper = material.styled('div')(function (_ref2) {
23
23
  var theme = _ref2.theme;
@@ -26,7 +26,233 @@ var VideoWrapper = material.styled('div')(function (_ref2) {
26
26
  height: 'auto',
27
27
  boxShadow: theme.shadows[1],
28
28
  '--theme-primary-color': theme.palette.primary.main,
29
- '--theme-secondary-color': theme.palette.secondary.main
29
+ '--theme-secondary-color': theme.palette.secondary.main,
30
+ '& .video-js.elice-video': {
31
+ minWidth: '22.5rem',
32
+ fontSize: 'var(--fluid-size)',
33
+ fontFamily: 'Pretendard, Arial, sans-serif',
34
+ '& .vjs-control-bar': {
35
+ backgroundColor: 'rgba(0, 0, 0, 0.70)',
36
+ '@media (max-width: 768px)': {
37
+ height: '2.5em'
38
+ }
39
+ },
40
+ '& button.vjs-control, & button.vjs-menu-button': {
41
+ '& .vjs-icon-placeholder:before': {
42
+ content: '" "',
43
+ backgroundRepeat: 'no-repeat',
44
+ backgroundPosition: 'center'
45
+ }
46
+ },
47
+ '& .vjs-progress-control.vjs-control': {
48
+ '&>.vjs-slider': {
49
+ margin: 0,
50
+ '&>.vjs-play-progress': {
51
+ backgroundColor: 'var(--theme-primary-color)'
52
+ }
53
+ },
54
+ '@media (max-width: 768px)': {
55
+ position: 'absolute',
56
+ bottom: '2.3em',
57
+ height: '0.5em',
58
+ left: 0,
59
+ width: '100%'
60
+ }
61
+ },
62
+ '& .vjs-button': {
63
+ '&.vjs-paused .vjs-icon-placeholder:before': {
64
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15.3516 11.5234L26.6016 18.3984C27.1484 18.75 27.5 19.375 27.5 20C27.5 20.6641 27.1484 21.2891 26.6016 21.6016L15.3516 28.4766C14.7656 28.8281 14.0234 28.8672 13.4375 28.5156C12.8516 28.2031 12.5 27.5781 12.5 26.875V13.125C12.5 12.4609 12.8516 11.8359 13.4375 11.5234C14.0234 11.1719 14.7656 11.1719 15.3516 11.5234Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
65
+ },
66
+ '&.vjs-playing .vjs-icon-placeholder:before': {
67
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15.625 12.5H16.875C17.8906 12.5 18.75 13.3594 18.75 14.375V25.625C18.75 26.6797 17.8906 27.5 16.875 27.5H15.625C14.5703 27.5 13.75 26.6797 13.75 25.625V14.375C13.75 13.3594 14.5703 12.5 15.625 12.5ZM23.125 12.5H24.375C25.3906 12.5 26.25 13.3594 26.25 14.375V25.625C26.25 26.6797 25.3906 27.5 24.375 27.5H23.125C22.0703 27.5 21.25 26.6797 21.25 25.625V14.375C21.25 13.3594 22.0703 12.5 23.125 12.5Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
68
+ },
69
+ '&.vjs-mute-control[title^="Un"] .vjs-icon-placeholder:before': {
70
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20.5078 11.3672C20.9375 11.5625 21.25 12.0312 21.25 12.5V27.5C21.25 28.0078 20.9375 28.4375 20.5078 28.6719C20.0391 28.8672 19.5312 28.7891 19.1406 28.4375L13.8672 23.75H11.25C9.84375 23.75 8.75 22.6562 8.75 21.25V18.75C8.75 17.3828 9.84375 16.25 11.25 16.25H13.8672L19.1406 11.6016C19.5312 11.25 20.0391 11.1719 20.5078 11.3672ZM25.3516 16.5234L27.5 18.6719L29.6484 16.5234C30 16.1719 30.5859 16.1719 30.9375 16.5234C31.3281 16.9141 31.3281 17.5 30.9375 17.8516L28.7891 20L30.9375 22.1484C31.3281 22.5391 31.3281 23.125 30.9375 23.4766C30.5859 23.8672 30 23.8672 29.6484 23.4766L27.5 21.3281L25.3516 23.4766C24.9609 23.8672 24.375 23.8672 24.0234 23.4766C23.6328 23.125 23.6328 22.5391 24.0234 22.1484L26.1719 20L24.0234 17.8516C23.6328 17.5 23.6328 16.9141 24.0234 16.5234C24.375 16.1719 24.9609 16.1719 25.3516 16.5234Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
71
+ },
72
+ '&.vjs-mute-control .vjs-icon-placeholder:before': {
73
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M21.7578 11.3672C22.1875 11.5625 22.5 12.0312 22.5 12.5V27.5C22.5 28.0078 22.1875 28.4375 21.7578 28.6719C21.2891 28.8672 20.7812 28.7891 20.3906 28.4375L15.1172 23.75H12.5C11.0938 23.75 10 22.6562 10 21.25V18.75C10 17.3828 11.0938 16.25 12.5 16.25H15.1172L20.3906 11.6016C20.7812 11.25 21.2891 11.1719 21.7578 11.3672ZM28.4766 14.1797C30.1562 15.5859 31.25 17.6562 31.25 20C31.25 22.3828 30.1562 24.4531 28.4766 25.8203C28.0469 26.1719 27.4609 26.0938 27.1484 25.7031C26.7969 25.3125 26.875 24.7266 27.2656 24.375C28.5547 23.3594 29.375 21.7969 29.375 20C29.375 18.2422 28.5547 16.6797 27.2656 15.6641C26.875 15.3125 26.8359 14.7266 27.1484 14.3359C27.4609 13.9453 28.0469 13.8672 28.4766 14.1797ZM26.0938 17.1094C26.9531 17.8125 27.5 18.8281 27.5 20C27.5 21.2109 26.9531 22.2266 26.0938 22.9297C25.7031 23.2422 25.1172 23.2031 24.7656 22.7734C24.4531 22.3828 24.5312 21.7969 24.9219 21.4844C25.3516 21.1328 25.625 20.5859 25.625 20C25.625 19.4141 25.3516 18.9062 24.9219 18.5547C24.5312 18.2422 24.4531 17.6562 24.7656 17.2266C25.1172 16.8359 25.7031 16.7969 26.0938 17.1094Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
74
+ },
75
+ '&.vjs-subs-caps-button .vjs-icon-placeholder:before': {
76
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M8.75 13.75C8.75 12.3828 9.84375 11.25 11.25 11.25H28.75C30.1172 11.25 31.25 12.3828 31.25 13.75V26.25C31.25 27.6562 30.1172 28.75 28.75 28.75H11.25C9.84375 28.75 8.75 27.6562 8.75 26.25V13.75ZM16.5625 18.125C17.1094 18.125 17.6172 18.3984 17.9297 18.75C18.2812 19.1406 18.8672 19.1797 19.2578 18.8281C19.6484 18.5156 19.6875 17.8906 19.3359 17.5C18.6719 16.7578 17.6562 16.25 16.5625 16.25C14.4922 16.25 12.8125 17.9297 12.8125 20C12.8125 22.0703 14.4922 23.75 16.5625 23.75C17.6562 23.75 18.6719 23.2812 19.3359 22.5C19.6875 22.1484 19.6484 21.5234 19.2578 21.2109C18.8672 20.8594 18.2812 20.8984 17.9297 21.25C17.6172 21.6406 17.1094 21.875 16.5625 21.875C15.5078 21.875 14.6875 21.0547 14.6875 20C14.6875 18.9844 15.5078 18.125 16.5625 18.125ZM22.1875 20C22.1875 18.9844 23.0078 18.125 24.0625 18.125C24.6094 18.125 25.1172 18.3984 25.4297 18.75C25.7812 19.1406 26.3672 19.1797 26.7578 18.8281C27.1484 18.5156 27.1875 17.8906 26.8359 17.5C26.1719 16.7578 25.1562 16.25 24.0625 16.25C21.9922 16.25 20.3125 17.9297 20.3125 20C20.3125 22.0703 21.9922 23.75 24.0625 23.75C25.1562 23.75 26.1719 23.2812 26.8359 22.5C27.1875 22.1484 27.1484 21.5234 26.7578 21.2109C26.3672 20.8594 25.7812 20.8984 25.4297 21.25C25.1172 21.6406 24.6094 21.875 24.0625 21.875C23.0078 21.875 22.1875 21.0547 22.1875 20Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
77
+ },
78
+ '&.vjs-subs-caps-button:has(> .vjs-menu .vjs-menu-item:not(.vjs-subtitles-menu-item)[aria-checked="true"]) .vjs-icon-placeholder:before': {
79
+ opacity: 0.5
80
+ },
81
+ '&.vjs-fullscreen-control .vjs-icon-placeholder:before': {
82
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M12.5 11.25H16.25C16.9141 11.25 17.5 11.8359 17.5 12.5C17.5 13.2031 16.9141 13.75 16.25 13.75H13.75V16.25C13.75 16.9531 13.1641 17.5 12.5 17.5C11.7969 17.5 11.25 16.9531 11.25 16.25V12.5C11.25 11.8359 11.7969 11.25 12.5 11.25ZM13.75 23.75V26.25H16.25C16.9141 26.25 17.5 26.8359 17.5 27.5C17.5 28.2031 16.9141 28.75 16.25 28.75H12.5C11.7969 28.75 11.25 28.2031 11.25 27.5V23.75C11.25 23.0859 11.7969 22.5 12.5 22.5C13.1641 22.5 13.75 23.0859 13.75 23.75ZM23.75 11.25H27.5C28.1641 11.25 28.75 11.8359 28.75 12.5V16.25C28.75 16.9531 28.1641 17.5 27.5 17.5C26.7969 17.5 26.25 16.9531 26.25 16.25V13.75H23.75C23.0469 13.75 22.5 13.2031 22.5 12.5C22.5 11.8359 23.0469 11.25 23.75 11.25ZM28.75 23.75V27.5C28.75 28.2031 28.1641 28.75 27.5 28.75H23.75C23.0469 28.75 22.5 28.2031 22.5 27.5C22.5 26.8359 23.0469 26.25 23.75 26.25H26.25V23.75C26.25 23.0859 26.7969 22.5 27.5 22.5C28.1641 22.5 28.75 23.0859 28.75 23.75Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
83
+ },
84
+ '&.vjs-fullscreen-control[title^="Exit"] .vjs-icon-placeholder:before': {
85
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M17.5 12.5V16.25C17.5 16.9531 16.9141 17.5 16.25 17.5H12.5C11.7969 17.5 11.25 16.9531 11.25 16.25C11.25 15.5859 11.7969 15 12.5 15H15V12.5C15 11.8359 15.5469 11.25 16.25 11.25C16.9141 11.25 17.5 11.8359 17.5 12.5ZM12.5 22.5H16.25C16.9141 22.5 17.5 23.0859 17.5 23.75V27.5C17.5 28.2031 16.9141 28.75 16.25 28.75C15.5469 28.75 15 28.2031 15 27.5V25H12.5C11.7969 25 11.25 24.4531 11.25 23.75C11.25 23.0859 11.7969 22.5 12.5 22.5ZM25 12.5V15H27.5C28.1641 15 28.75 15.5859 28.75 16.25C28.75 16.9531 28.1641 17.5 27.5 17.5H23.75C23.0469 17.5 22.5 16.9531 22.5 16.25V12.5C22.5 11.8359 23.0469 11.25 23.75 11.25C24.4141 11.25 25 11.8359 25 12.5ZM23.75 22.5H27.5C28.1641 22.5 28.75 23.0859 28.75 23.75C28.75 24.4531 28.1641 25 27.5 25H25V27.5C25 28.2031 24.4141 28.75 23.75 28.75C23.0469 28.75 22.5 28.2031 22.5 27.5V23.75C22.5 23.0859 23.0469 22.5 23.75 22.5Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
86
+ }
87
+ },
88
+ '& .vjs-big-play-button': {
89
+ width: '4em',
90
+ height: '3em',
91
+ marginTop: '-0.75em',
92
+ marginLeft: '-1em',
93
+ backgroundColor: 'transparent',
94
+ '&:before': {
95
+ width: '100%',
96
+ height: '100%',
97
+ content: '""',
98
+ backgroundColor: 'var(--theme-secondary-color)',
99
+ opacity: 0.4,
100
+ borderRadius: '0.3em',
101
+ position: 'absolute',
102
+ top: 0,
103
+ left: 0
104
+ },
105
+ '& .vjs-icon-placeholder:before': {
106
+ fontSize: 'calc(var(--fluid-size) * 2)',
107
+ lineHeight: 'calc(var(--fluid-size) * 3)'
108
+ }
109
+ },
110
+ '& .vjs-volume-bar': {
111
+ margin: '1.35em 0 1.35em',
112
+ '@media (max-width: 768px)': {
113
+ margin: '1.1em 0 1.1em',
114
+ width: '3em'
115
+ }
116
+ },
117
+ '& .vjs-time-tooltip': {
118
+ fontSize: 'calc(var(--fluid-size) * 0.8)'
119
+ },
120
+ '& .vjs-control.vjs-button': {
121
+ width: '3em',
122
+ padding: '0 0.5em',
123
+ '&>*::before': {
124
+ fontSize: 'calc(var(--fluid-size) * 1.5)',
125
+ lineHeight: 'calc(var(--fluid-size) * 3)',
126
+ '@media (max-width: 768px)': {
127
+ lineHeight: 'calc(var(--fluid-size) * 2.5)'
128
+ }
129
+ },
130
+ '@media (max-width: 768px)': {
131
+ width: '2em',
132
+ padding: '0 0.2em'
133
+ }
134
+ },
135
+ '& .vjs-control': {
136
+ width: '3em'
137
+ },
138
+ '& .vjs-volume-panel.vjs-volume-panel-horizontal': {
139
+ width: '8em',
140
+ '@media (max-width: 768px)': {
141
+ width: '6em'
142
+ },
143
+ '& .vjs-control.vjs-volume-control': {
144
+ opacity: 1,
145
+ width: '5em',
146
+ '@media (max-width: 768px)': {
147
+ display: 'block',
148
+ width: 'fit-content',
149
+ marginRight: '1em',
150
+ height: '2.5em',
151
+ opacity: 1
152
+ }
153
+ }
154
+ },
155
+ '& .vjs-time-control': {
156
+ padding: '0 0.2em',
157
+ '&.vjs-current-time': {
158
+ marginLeft: '0.5em'
159
+ },
160
+ '&.vjs-duration': {
161
+ marginRight: '0.5em'
162
+ },
163
+ fontSize: 'calc(var(--fluid-size) * 0.8)',
164
+ lineHeight: 'calc(var(--fluid-size) * 3)',
165
+ '@media (max-width: 768px)': {
166
+ lineHeight: 'calc(var(--fluid-size) * 2.5)'
167
+ }
168
+ },
169
+ '& .vjs-playback-rate': {
170
+ display: 'block',
171
+ marginLeft: 'auto',
172
+ '& .vjs-menu': {
173
+ left: '-0.5em'
174
+ },
175
+ '& .vjs-playback-rate-value': {
176
+ fontSize: 'calc(var(--fluid-size) * 0.8)',
177
+ lineHeight: 'calc(var(--fluid-size) * 3)',
178
+ '@media (max-width: 768px)': {
179
+ lineHeight: 'calc(var(--fluid-size) * 2.5)'
180
+ }
181
+ },
182
+ '& .vjs-menu-item': {
183
+ fontSize: 'calc(var(--fluid-size) * 1)',
184
+ lineHeight: 'calc(var(--fluid-size) * 1.4)'
185
+ }
186
+ },
187
+ '& .vjs-menu.vjs-lock-showing .vjs-menu-item': {
188
+ marginBlock: 0
189
+ },
190
+ '& .vjs-current-time, & .vjs-duration, & .vjs-time-divider': {
191
+ display: 'block',
192
+ fontFamily: 'Pretendard, Arial, sans-serif'
193
+ },
194
+ '& .vjs-time-divider': {
195
+ width: 'auto',
196
+ minWidth: 0,
197
+ padding: 0
198
+ },
199
+ '& .vjs-remaining-time': {
200
+ display: 'none'
201
+ },
202
+ '& .vjs-volume-level': {
203
+ backgroundColor: 'var(--theme-primary-color)',
204
+ color: 'var(--theme-primary-color)'
205
+ },
206
+ '& .vjs-load-progress': {
207
+ backgroundColor: 'var(--theme-secondary-color)',
208
+ opacity: 0.5
209
+ },
210
+ '& .vjs-subs-caps-button .vjs-menu': {
211
+ width: '10em',
212
+ left: '-5em',
213
+ '& .vjs-texttrack-settings': {
214
+ order: 10
215
+ },
216
+ '@media (max-width: 768px)': {
217
+ left: '-2em',
218
+ width: '6em'
219
+ }
220
+ },
221
+ '& .vjs-menu-button .vjs-menu::before': {
222
+ content: '""',
223
+ position: 'absolute',
224
+ bottom: '1em',
225
+ left: 0,
226
+ width: '100%',
227
+ height: '0.3em'
228
+ },
229
+ '& .vjs-menu-content': {
230
+ marginBottom: '0.5em',
231
+ backgroundColor: 'rgba(0, 0, 0, 0.70)',
232
+ borderRadius: '0.6em',
233
+ padding: '0.4em',
234
+ display: 'flex',
235
+ flexDirection: 'column',
236
+ '& > .vjs-menu-item': {
237
+ margin: 0,
238
+ marginBlock: 0,
239
+ padding: '0.5em 1em',
240
+ borderRadius: '0.4em',
241
+ color: 'white',
242
+ fontSize: 'calc(var(--fluid-size) * 0.8)',
243
+ '@media (max-width: 768px)': {
244
+ padding: '0.4em',
245
+ fontSize: 'calc(var(--fluid-size) * 0.7)'
246
+ },
247
+ '&.vjs-selected': {
248
+ backgroundColor: 'rgba(255, 255, 255, 0.50)'
249
+ },
250
+ '&:hover': {
251
+ backgroundColor: 'rgba(255, 255, 255, 0.30)'
252
+ }
253
+ }
254
+ }
255
+ }
30
256
  };
31
257
  });
32
258
  var defu = defu$1.createDefu(function (object, key, currentValue) {
@@ -36,11 +262,11 @@ var defu = defu$1.createDefu(function (object, key, currentValue) {
36
262
  }
37
263
  });
38
264
  var _ref = "production" === "production" ? {
39
- name: "59xsct",
40
- 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;}}"
265
+ name: "5ojbdi",
266
+ styles: "@import url('https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css');{}"
41
267
  } : {
42
- name: "59xsct",
43
- 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;}}",
268
+ name: "5ojbdi",
269
+ styles: "@import url('https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css');{}",
44
270
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
45
271
  };
46
272
  function EliceVideoV2(_ref3) {
@@ -50,25 +276,27 @@ function EliceVideoV2(_ref3) {
50
276
  var options = defu(_options !== null && _options !== void 0 ? _options : {}, DEFAULT_OPTIONS);
51
277
  var videoRef = React__default.default.useRef(null);
52
278
  var playerRef = React__default.default.useRef(null);
53
- React__default.default.useEffect(function () {
54
- if (!videoRef.current) return;
55
- var player = videojs__default.default(videoRef.current, Object.assign(Object.assign({}, options), {
56
- disablePictureInPicture: true,
57
- fluid: true
58
- }));
59
- playerRef.current = player;
60
- return function () {
61
- if (playerRef.current) {
62
- playerRef.current.dispose();
63
- playerRef.current = null;
64
- }
65
- };
66
- }, []);
67
279
  return jsxRuntime.jsxs(VideoWrapper, {
68
280
  children: [jsxRuntime.jsx(react.Global, {
69
281
  styles: _ref
70
282
  }), jsxRuntime.jsxs("video", {
71
- ref: videoRef,
283
+ ref: function ref(r) {
284
+ videoRef.current = r;
285
+ requestAnimationFrame(function () {
286
+ var player = videojs__default.default(r, Object.assign(Object.assign({}, options), {
287
+ disablePictureInPicture: true,
288
+ fluid: true
289
+ }));
290
+ playerRef.current = player;
291
+ });
292
+ return function () {
293
+ var _a;
294
+ if (playerRef.current) {
295
+ (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
296
+ playerRef.current = null;
297
+ }
298
+ };
299
+ },
72
300
  className: "video-js elice-video vjs-default-skin",
73
301
  children: [source.map(function (srcInfo) {
74
302
  return jsxRuntime.jsx("source", {
package/cjs/icons/ArrowLeft.js CHANGED
@@ -16,7 +16,8 @@ var ArrowLeft = function ArrowLeft(_a) {
16
16
  height: size,
17
17
  viewBox: "0 0 36 36",
18
18
  fill: "none",
19
- xmlns: "http://www.w3.org/2000/svg"
19
+ xmlns: "http://www.w3.org/2000/svg",
20
+ "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uAC00\uAE30"
20
21
  }, other, {
21
22
  children: jsxRuntime.jsx("path", {
22
23
  d: "M22.1673 4.21094L24.2886 6.33226L12.621 17.9989L24.2886 29.6662L22.1673 31.7875L9.43934 19.0596C8.89861 18.5195 8.85702 17.6686 9.31456 17.0802L9.45 16.9264L22.1673 4.21094Z",
package/cjs/icons/ArrowRight.js CHANGED
@@ -16,7 +16,8 @@ var ArrowRight = function ArrowRight(_a) {
16
16
  height: size,
17
17
  viewBox: "0 0 36 36",
18
18
  fill: "none",
19
- xmlns: "http://www.w3.org/2000/svg"
19
+ xmlns: "http://www.w3.org/2000/svg",
20
+ "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uAC00\uAE30"
20
21
  }, other, {
21
22
  children: jsxRuntime.jsx("path", {
22
23
  d: "M13.8323 31.7875L11.7109 29.6662L23.3785 17.9995L11.7109 6.33226L13.8323 4.21094L26.5602 16.9389C27.1009 17.479 27.1425 18.3298 26.685 18.9183L26.5495 19.072L13.8323 31.7875Z",
package/es/components/layout/Footer/LayoutFooterPaging.js CHANGED
@@ -55,8 +55,14 @@ var LayoutFooterPaging = function LayoutFooterPaging(_ref3) {
55
55
  isTablet: isTablet,
56
56
  children: [jsx(StyledCurrentPage, {
57
57
  fontColor: theme.palette.primary.main,
58
- children: currentPage
59
- }), " ", "/ ", totalPage]
58
+ children: jsx("span", {
59
+ children: currentPage
60
+ })
61
+ }), " ", jsx("span", {
62
+ children: "/"
63
+ }), " ", jsx("span", {
64
+ children: totalPage
65
+ })]
60
66
  }), isTablet && jsx(PaginationButton, {
61
67
  right: true,
62
68
  onClick: onNext,
package/es/components/layout/Layout.js CHANGED
@@ -115,11 +115,11 @@ var Layout = function Layout(_ref) {
115
115
  var HeaderContainerInner = /*#__PURE__*/_styled(Stack, {
116
116
  target: "efnp08i6"
117
117
  })("production" === "production" ? {
118
- name: "14ia2gs",
119
- styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row"
118
+ name: "gwvfyq",
119
+ styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row"
120
120
  } : {
121
- name: "14ia2gs",
122
- styles: "height:74px;width:100%;justify-content:space-between;flex-direction:row",
121
+ name: "gwvfyq",
122
+ styles: "height:74px;width:100%;max-width:1200px;justify-content:space-between;flex-direction:row",
123
123
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
124
124
  });
125
125
  var HeaderContainer = function HeaderContainer(_ref2) {
@@ -134,7 +134,7 @@ var HeaderTitle = LayoutHeaderTitle;
134
134
  var HeaderSubTitle = LayoutHeaderSubTitle;
135
135
  var ContentContainerInner = /*#__PURE__*/_styled(Stack, {
136
136
  target: "efnp08i5"
137
- })("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) {
137
+ })("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) {
138
138
  var theme = _ref3.theme;
139
139
  return theme.palette.primary.main;
140
140
  }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref4) {
@@ -204,22 +204,22 @@ var ContentContainer = function ContentContainer(_ref5) {
204
204
  };
205
205
  }, []);
206
206
  return jsxs(Stack, {
207
- sx: {
207
+ sx: Object.assign({
208
208
  position: 'relative',
209
209
  width: '100%',
210
210
  height: '100%'
211
- },
211
+ }, sx),
212
212
  children: [jsxs(ContentContainerInner, {
213
213
  ref: contentRef,
214
214
  theme: theme,
215
215
  flex: 1,
216
- sx: Object.assign(Object.assign({}, sx), {
216
+ sx: {
217
217
  scrollbarWidth: 'none',
218
218
  msOverflowStyle: 'none',
219
219
  '&::-webkit-scrollbar': {
220
220
  display: 'none'
221
221
  }
222
- }),
222
+ },
223
223
  children: [children, enableScrollTracking && hasScroll && !isScrollActive && jsx(ScrollMoreButton, {
224
224
  children: jsx(ScrollMoreIcon, {
225
225
  size: 32,
package/es/components/video/VideoV2.js CHANGED
@@ -10,7 +10,7 @@ var DEFAULT_OPTIONS = {
10
10
  autoplay: false,
11
11
  controls: true,
12
12
  poster: "",
13
- playbackRates: [0.5, 1, 1.5]
13
+ playbackRates: [0.5, 1, 1.5, 2.0]
14
14
  };
15
15
  var VideoWrapper = styled('div')(function (_ref2) {
16
16
  var theme = _ref2.theme;
@@ -19,7 +19,233 @@ var VideoWrapper = styled('div')(function (_ref2) {
19
19
  height: 'auto',
20
20
  boxShadow: theme.shadows[1],
21
21
  '--theme-primary-color': theme.palette.primary.main,
22
- '--theme-secondary-color': theme.palette.secondary.main
22
+ '--theme-secondary-color': theme.palette.secondary.main,
23
+ '& .video-js.elice-video': {
24
+ minWidth: '22.5rem',
25
+ fontSize: 'var(--fluid-size)',
26
+ fontFamily: 'Pretendard, Arial, sans-serif',
27
+ '& .vjs-control-bar': {
28
+ backgroundColor: 'rgba(0, 0, 0, 0.70)',
29
+ '@media (max-width: 768px)': {
30
+ height: '2.5em'
31
+ }
32
+ },
33
+ '& button.vjs-control, & button.vjs-menu-button': {
34
+ '& .vjs-icon-placeholder:before': {
35
+ content: '" "',
36
+ backgroundRepeat: 'no-repeat',
37
+ backgroundPosition: 'center'
38
+ }
39
+ },
40
+ '& .vjs-progress-control.vjs-control': {
41
+ '&>.vjs-slider': {
42
+ margin: 0,
43
+ '&>.vjs-play-progress': {
44
+ backgroundColor: 'var(--theme-primary-color)'
45
+ }
46
+ },
47
+ '@media (max-width: 768px)': {
48
+ position: 'absolute',
49
+ bottom: '2.3em',
50
+ height: '0.5em',
51
+ left: 0,
52
+ width: '100%'
53
+ }
54
+ },
55
+ '& .vjs-button': {
56
+ '&.vjs-paused .vjs-icon-placeholder:before': {
57
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15.3516 11.5234L26.6016 18.3984C27.1484 18.75 27.5 19.375 27.5 20C27.5 20.6641 27.1484 21.2891 26.6016 21.6016L15.3516 28.4766C14.7656 28.8281 14.0234 28.8672 13.4375 28.5156C12.8516 28.2031 12.5 27.5781 12.5 26.875V13.125C12.5 12.4609 12.8516 11.8359 13.4375 11.5234C14.0234 11.1719 14.7656 11.1719 15.3516 11.5234Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
58
+ },
59
+ '&.vjs-playing .vjs-icon-placeholder:before': {
60
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M15.625 12.5H16.875C17.8906 12.5 18.75 13.3594 18.75 14.375V25.625C18.75 26.6797 17.8906 27.5 16.875 27.5H15.625C14.5703 27.5 13.75 26.6797 13.75 25.625V14.375C13.75 13.3594 14.5703 12.5 15.625 12.5ZM23.125 12.5H24.375C25.3906 12.5 26.25 13.3594 26.25 14.375V25.625C26.25 26.6797 25.3906 27.5 24.375 27.5H23.125C22.0703 27.5 21.25 26.6797 21.25 25.625V14.375C21.25 13.3594 22.0703 12.5 23.125 12.5Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
61
+ },
62
+ '&.vjs-mute-control[title^="Un"] .vjs-icon-placeholder:before': {
63
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20.5078 11.3672C20.9375 11.5625 21.25 12.0312 21.25 12.5V27.5C21.25 28.0078 20.9375 28.4375 20.5078 28.6719C20.0391 28.8672 19.5312 28.7891 19.1406 28.4375L13.8672 23.75H11.25C9.84375 23.75 8.75 22.6562 8.75 21.25V18.75C8.75 17.3828 9.84375 16.25 11.25 16.25H13.8672L19.1406 11.6016C19.5312 11.25 20.0391 11.1719 20.5078 11.3672ZM25.3516 16.5234L27.5 18.6719L29.6484 16.5234C30 16.1719 30.5859 16.1719 30.9375 16.5234C31.3281 16.9141 31.3281 17.5 30.9375 17.8516L28.7891 20L30.9375 22.1484C31.3281 22.5391 31.3281 23.125 30.9375 23.4766C30.5859 23.8672 30 23.8672 29.6484 23.4766L27.5 21.3281L25.3516 23.4766C24.9609 23.8672 24.375 23.8672 24.0234 23.4766C23.6328 23.125 23.6328 22.5391 24.0234 22.1484L26.1719 20L24.0234 17.8516C23.6328 17.5 23.6328 16.9141 24.0234 16.5234C24.375 16.1719 24.9609 16.1719 25.3516 16.5234Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
64
+ },
65
+ '&.vjs-mute-control .vjs-icon-placeholder:before': {
66
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M21.7578 11.3672C22.1875 11.5625 22.5 12.0312 22.5 12.5V27.5C22.5 28.0078 22.1875 28.4375 21.7578 28.6719C21.2891 28.8672 20.7812 28.7891 20.3906 28.4375L15.1172 23.75H12.5C11.0938 23.75 10 22.6562 10 21.25V18.75C10 17.3828 11.0938 16.25 12.5 16.25H15.1172L20.3906 11.6016C20.7812 11.25 21.2891 11.1719 21.7578 11.3672ZM28.4766 14.1797C30.1562 15.5859 31.25 17.6562 31.25 20C31.25 22.3828 30.1562 24.4531 28.4766 25.8203C28.0469 26.1719 27.4609 26.0938 27.1484 25.7031C26.7969 25.3125 26.875 24.7266 27.2656 24.375C28.5547 23.3594 29.375 21.7969 29.375 20C29.375 18.2422 28.5547 16.6797 27.2656 15.6641C26.875 15.3125 26.8359 14.7266 27.1484 14.3359C27.4609 13.9453 28.0469 13.8672 28.4766 14.1797ZM26.0938 17.1094C26.9531 17.8125 27.5 18.8281 27.5 20C27.5 21.2109 26.9531 22.2266 26.0938 22.9297C25.7031 23.2422 25.1172 23.2031 24.7656 22.7734C24.4531 22.3828 24.5312 21.7969 24.9219 21.4844C25.3516 21.1328 25.625 20.5859 25.625 20C25.625 19.4141 25.3516 18.9062 24.9219 18.5547C24.5312 18.2422 24.4531 17.6562 24.7656 17.2266C25.1172 16.8359 25.7031 16.7969 26.0938 17.1094Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
67
+ },
68
+ '&.vjs-subs-caps-button .vjs-icon-placeholder:before': {
69
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M8.75 13.75C8.75 12.3828 9.84375 11.25 11.25 11.25H28.75C30.1172 11.25 31.25 12.3828 31.25 13.75V26.25C31.25 27.6562 30.1172 28.75 28.75 28.75H11.25C9.84375 28.75 8.75 27.6562 8.75 26.25V13.75ZM16.5625 18.125C17.1094 18.125 17.6172 18.3984 17.9297 18.75C18.2812 19.1406 18.8672 19.1797 19.2578 18.8281C19.6484 18.5156 19.6875 17.8906 19.3359 17.5C18.6719 16.7578 17.6562 16.25 16.5625 16.25C14.4922 16.25 12.8125 17.9297 12.8125 20C12.8125 22.0703 14.4922 23.75 16.5625 23.75C17.6562 23.75 18.6719 23.2812 19.3359 22.5C19.6875 22.1484 19.6484 21.5234 19.2578 21.2109C18.8672 20.8594 18.2812 20.8984 17.9297 21.25C17.6172 21.6406 17.1094 21.875 16.5625 21.875C15.5078 21.875 14.6875 21.0547 14.6875 20C14.6875 18.9844 15.5078 18.125 16.5625 18.125ZM22.1875 20C22.1875 18.9844 23.0078 18.125 24.0625 18.125C24.6094 18.125 25.1172 18.3984 25.4297 18.75C25.7812 19.1406 26.3672 19.1797 26.7578 18.8281C27.1484 18.5156 27.1875 17.8906 26.8359 17.5C26.1719 16.7578 25.1562 16.25 24.0625 16.25C21.9922 16.25 20.3125 17.9297 20.3125 20C20.3125 22.0703 21.9922 23.75 24.0625 23.75C25.1562 23.75 26.1719 23.2812 26.8359 22.5C27.1875 22.1484 27.1484 21.5234 26.7578 21.2109C26.3672 20.8594 25.7812 20.8984 25.4297 21.25C25.1172 21.6406 24.6094 21.875 24.0625 21.875C23.0078 21.875 22.1875 21.0547 22.1875 20Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
70
+ },
71
+ '&.vjs-subs-caps-button:has(> .vjs-menu .vjs-menu-item:not(.vjs-subtitles-menu-item)[aria-checked="true"]) .vjs-icon-placeholder:before': {
72
+ opacity: 0.5
73
+ },
74
+ '&.vjs-fullscreen-control .vjs-icon-placeholder:before': {
75
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M12.5 11.25H16.25C16.9141 11.25 17.5 11.8359 17.5 12.5C17.5 13.2031 16.9141 13.75 16.25 13.75H13.75V16.25C13.75 16.9531 13.1641 17.5 12.5 17.5C11.7969 17.5 11.25 16.9531 11.25 16.25V12.5C11.25 11.8359 11.7969 11.25 12.5 11.25ZM13.75 23.75V26.25H16.25C16.9141 26.25 17.5 26.8359 17.5 27.5C17.5 28.2031 16.9141 28.75 16.25 28.75H12.5C11.7969 28.75 11.25 28.2031 11.25 27.5V23.75C11.25 23.0859 11.7969 22.5 12.5 22.5C13.1641 22.5 13.75 23.0859 13.75 23.75ZM23.75 11.25H27.5C28.1641 11.25 28.75 11.8359 28.75 12.5V16.25C28.75 16.9531 28.1641 17.5 27.5 17.5C26.7969 17.5 26.25 16.9531 26.25 16.25V13.75H23.75C23.0469 13.75 22.5 13.2031 22.5 12.5C22.5 11.8359 23.0469 11.25 23.75 11.25ZM28.75 23.75V27.5C28.75 28.2031 28.1641 28.75 27.5 28.75H23.75C23.0469 28.75 22.5 28.2031 22.5 27.5C22.5 26.8359 23.0469 26.25 23.75 26.25H26.25V23.75C26.25 23.0859 26.7969 22.5 27.5 22.5C28.1641 22.5 28.75 23.0859 28.75 23.75Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
76
+ },
77
+ '&.vjs-fullscreen-control[title^="Exit"] .vjs-icon-placeholder:before': {
78
+ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 40 40\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M17.5 12.5V16.25C17.5 16.9531 16.9141 17.5 16.25 17.5H12.5C11.7969 17.5 11.25 16.9531 11.25 16.25C11.25 15.5859 11.7969 15 12.5 15H15V12.5C15 11.8359 15.5469 11.25 16.25 11.25C16.9141 11.25 17.5 11.8359 17.5 12.5ZM12.5 22.5H16.25C16.9141 22.5 17.5 23.0859 17.5 23.75V27.5C17.5 28.2031 16.9141 28.75 16.25 28.75C15.5469 28.75 15 28.2031 15 27.5V25H12.5C11.7969 25 11.25 24.4531 11.25 23.75C11.25 23.0859 11.7969 22.5 12.5 22.5ZM25 12.5V15H27.5C28.1641 15 28.75 15.5859 28.75 16.25C28.75 16.9531 28.1641 17.5 27.5 17.5H23.75C23.0469 17.5 22.5 16.9531 22.5 16.25V12.5C22.5 11.8359 23.0469 11.25 23.75 11.25C24.4141 11.25 25 11.8359 25 12.5ZM23.75 22.5H27.5C28.1641 22.5 28.75 23.0859 28.75 23.75C28.75 24.4531 28.1641 25 27.5 25H25V27.5C25 28.2031 24.4141 28.75 23.75 28.75C23.0469 28.75 22.5 28.2031 22.5 27.5V23.75C22.5 23.0859 23.0469 22.5 23.75 22.5Z\' fill=\'white\'/%3E%3C/svg%3E%0A")'
79
+ }
80
+ },
81
+ '& .vjs-big-play-button': {
82
+ width: '4em',
83
+ height: '3em',
84
+ marginTop: '-0.75em',
85
+ marginLeft: '-1em',
86
+ backgroundColor: 'transparent',
87
+ '&:before': {
88
+ width: '100%',
89
+ height: '100%',
90
+ content: '""',
91
+ backgroundColor: 'var(--theme-secondary-color)',
92
+ opacity: 0.4,
93
+ borderRadius: '0.3em',
94
+ position: 'absolute',
95
+ top: 0,
96
+ left: 0
97
+ },
98
+ '& .vjs-icon-placeholder:before': {
99
+ fontSize: 'calc(var(--fluid-size) * 2)',
100
+ lineHeight: 'calc(var(--fluid-size) * 3)'
101
+ }
102
+ },
103
+ '& .vjs-volume-bar': {
104
+ margin: '1.35em 0 1.35em',
105
+ '@media (max-width: 768px)': {
106
+ margin: '1.1em 0 1.1em',
107
+ width: '3em'
108
+ }
109
+ },
110
+ '& .vjs-time-tooltip': {
111
+ fontSize: 'calc(var(--fluid-size) * 0.8)'
112
+ },
113
+ '& .vjs-control.vjs-button': {
114
+ width: '3em',
115
+ padding: '0 0.5em',
116
+ '&>*::before': {
117
+ fontSize: 'calc(var(--fluid-size) * 1.5)',
118
+ lineHeight: 'calc(var(--fluid-size) * 3)',
119
+ '@media (max-width: 768px)': {
120
+ lineHeight: 'calc(var(--fluid-size) * 2.5)'
121
+ }
122
+ },
123
+ '@media (max-width: 768px)': {
124
+ width: '2em',
125
+ padding: '0 0.2em'
126
+ }
127
+ },
128
+ '& .vjs-control': {
129
+ width: '3em'
130
+ },
131
+ '& .vjs-volume-panel.vjs-volume-panel-horizontal': {
132
+ width: '8em',
133
+ '@media (max-width: 768px)': {
134
+ width: '6em'
135
+ },
136
+ '& .vjs-control.vjs-volume-control': {
137
+ opacity: 1,
138
+ width: '5em',
139
+ '@media (max-width: 768px)': {
140
+ display: 'block',
141
+ width: 'fit-content',
142
+ marginRight: '1em',
143
+ height: '2.5em',
144
+ opacity: 1
145
+ }
146
+ }
147
+ },
148
+ '& .vjs-time-control': {
149
+ padding: '0 0.2em',
150
+ '&.vjs-current-time': {
151
+ marginLeft: '0.5em'
152
+ },
153
+ '&.vjs-duration': {
154
+ marginRight: '0.5em'
155
+ },
156
+ fontSize: 'calc(var(--fluid-size) * 0.8)',
157
+ lineHeight: 'calc(var(--fluid-size) * 3)',
158
+ '@media (max-width: 768px)': {
159
+ lineHeight: 'calc(var(--fluid-size) * 2.5)'
160
+ }
161
+ },
162
+ '& .vjs-playback-rate': {
163
+ display: 'block',
164
+ marginLeft: 'auto',
165
+ '& .vjs-menu': {
166
+ left: '-0.5em'
167
+ },
168
+ '& .vjs-playback-rate-value': {
169
+ fontSize: 'calc(var(--fluid-size) * 0.8)',
170
+ lineHeight: 'calc(var(--fluid-size) * 3)',
171
+ '@media (max-width: 768px)': {
172
+ lineHeight: 'calc(var(--fluid-size) * 2.5)'
173
+ }
174
+ },
175
+ '& .vjs-menu-item': {
176
+ fontSize: 'calc(var(--fluid-size) * 1)',
177
+ lineHeight: 'calc(var(--fluid-size) * 1.4)'
178
+ }
179
+ },
180
+ '& .vjs-menu.vjs-lock-showing .vjs-menu-item': {
181
+ marginBlock: 0
182
+ },
183
+ '& .vjs-current-time, & .vjs-duration, & .vjs-time-divider': {
184
+ display: 'block',
185
+ fontFamily: 'Pretendard, Arial, sans-serif'
186
+ },
187
+ '& .vjs-time-divider': {
188
+ width: 'auto',
189
+ minWidth: 0,
190
+ padding: 0
191
+ },
192
+ '& .vjs-remaining-time': {
193
+ display: 'none'
194
+ },
195
+ '& .vjs-volume-level': {
196
+ backgroundColor: 'var(--theme-primary-color)',
197
+ color: 'var(--theme-primary-color)'
198
+ },
199
+ '& .vjs-load-progress': {
200
+ backgroundColor: 'var(--theme-secondary-color)',
201
+ opacity: 0.5
202
+ },
203
+ '& .vjs-subs-caps-button .vjs-menu': {
204
+ width: '10em',
205
+ left: '-5em',
206
+ '& .vjs-texttrack-settings': {
207
+ order: 10
208
+ },
209
+ '@media (max-width: 768px)': {
210
+ left: '-2em',
211
+ width: '6em'
212
+ }
213
+ },
214
+ '& .vjs-menu-button .vjs-menu::before': {
215
+ content: '""',
216
+ position: 'absolute',
217
+ bottom: '1em',
218
+ left: 0,
219
+ width: '100%',
220
+ height: '0.3em'
221
+ },
222
+ '& .vjs-menu-content': {
223
+ marginBottom: '0.5em',
224
+ backgroundColor: 'rgba(0, 0, 0, 0.70)',
225
+ borderRadius: '0.6em',
226
+ padding: '0.4em',
227
+ display: 'flex',
228
+ flexDirection: 'column',
229
+ '& > .vjs-menu-item': {
230
+ margin: 0,
231
+ marginBlock: 0,
232
+ padding: '0.5em 1em',
233
+ borderRadius: '0.4em',
234
+ color: 'white',
235
+ fontSize: 'calc(var(--fluid-size) * 0.8)',
236
+ '@media (max-width: 768px)': {
237
+ padding: '0.4em',
238
+ fontSize: 'calc(var(--fluid-size) * 0.7)'
239
+ },
240
+ '&.vjs-selected': {
241
+ backgroundColor: 'rgba(255, 255, 255, 0.50)'
242
+ },
243
+ '&:hover': {
244
+ backgroundColor: 'rgba(255, 255, 255, 0.30)'
245
+ }
246
+ }
247
+ }
248
+ }
23
249
  };
24
250
  });
25
251
  var defu = createDefu(function (object, key, currentValue) {
@@ -29,11 +255,11 @@ var defu = createDefu(function (object, key, currentValue) {
29
255
  }
30
256
  });
31
257
  var _ref = "production" === "production" ? {
32
- name: "59xsct",
33
- 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;}}"
258
+ name: "5ojbdi",
259
+ styles: "@import url('https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css');{}"
34
260
  } : {
35
- name: "59xsct",
36
- 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;}}",
261
+ name: "5ojbdi",
262
+ styles: "@import url('https://cdn.jsdelivr.net/npm/video.js@8.22.0/dist/video-js.min.css');{}",
37
263
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
38
264
  };
39
265
  function EliceVideoV2(_ref3) {
@@ -43,25 +269,27 @@ function EliceVideoV2(_ref3) {
43
269
  var options = defu(_options !== null && _options !== void 0 ? _options : {}, DEFAULT_OPTIONS);
44
270
  var videoRef = React.useRef(null);
45
271
  var playerRef = React.useRef(null);
46
- React.useEffect(function () {
47
- if (!videoRef.current) return;
48
- var player = videojs(videoRef.current, Object.assign(Object.assign({}, options), {
49
- disablePictureInPicture: true,
50
- fluid: true
51
- }));
52
- playerRef.current = player;
53
- return function () {
54
- if (playerRef.current) {
55
- playerRef.current.dispose();
56
- playerRef.current = null;
57
- }
58
- };
59
- }, []);
60
272
  return jsxs(VideoWrapper, {
61
273
  children: [jsx(Global, {
62
274
  styles: _ref
63
275
  }), jsxs("video", {
64
- ref: videoRef,
276
+ ref: function ref(r) {
277
+ videoRef.current = r;
278
+ requestAnimationFrame(function () {
279
+ var player = videojs(r, Object.assign(Object.assign({}, options), {
280
+ disablePictureInPicture: true,
281
+ fluid: true
282
+ }));
283
+ playerRef.current = player;
284
+ });
285
+ return function () {
286
+ var _a;
287
+ if (playerRef.current) {
288
+ (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
289
+ playerRef.current = null;
290
+ }
291
+ };
292
+ },
65
293
  className: "video-js elice-video vjs-default-skin",
66
294
  children: [source.map(function (srcInfo) {
67
295
  return jsx("source", {
package/es/icons/ArrowLeft.js CHANGED
@@ -12,7 +12,8 @@ var ArrowLeft = function ArrowLeft(_a) {
12
12
  height: size,
13
13
  viewBox: "0 0 36 36",
14
14
  fill: "none",
15
- xmlns: "http://www.w3.org/2000/svg"
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uAC00\uAE30"
16
17
  }, other, {
17
18
  children: jsx("path", {
18
19
  d: "M22.1673 4.21094L24.2886 6.33226L12.621 17.9989L24.2886 29.6662L22.1673 31.7875L9.43934 19.0596C8.89861 18.5195 8.85702 17.6686 9.31456 17.0802L9.45 16.9264L22.1673 4.21094Z",
package/es/icons/ArrowRight.js CHANGED
@@ -12,7 +12,8 @@ var ArrowRight = function ArrowRight(_a) {
12
12
  height: size,
13
13
  viewBox: "0 0 36 36",
14
14
  fill: "none",
15
- xmlns: "http://www.w3.org/2000/svg"
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ "aria-label": "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C \uAC00\uAE30"
16
17
  }, other, {
17
18
  children: jsx("path", {
18
19
  d: "M13.8323 31.7875L11.7109 29.6662L23.3785 17.9995L11.7109 6.33226L13.8323 4.21094L26.5602 16.9389C27.1009 17.479 27.1425 18.3298 26.685 18.9183L26.5495 19.072L13.8323 31.7875Z",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elicecontents/content-ui",
3
- "version": "1.0.23",
3
+ "version": "1.0.24-rc.2",
4
4
  "description": "A set of UI components for creating content of Elice",
5
5
  "author": "Elice <contact@elice.io>",
6
6
  "license": "UNLICENSED",