@opendesign-plus-test/components 0.0.1-rc.22 → 0.0.1-rc.221

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.css

@@ -0,0 +1,438 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-meeting-playback-video {
+  width: 100%;
+  height: 100%;
+  min-height: calc(var(--layout-content-min-height) - 104px);
+  background-color: var(--o-color-fill2);
+  position: relative;
+  border-radius: var(--meeting-card-radius);
+  overflow: hidden;
+}
+.o-meeting-playback-video .video-placeholder {
+  content: "";
+  width: 100%;
+  padding-top: 56.25%;
+}
+.o-meeting-playback-video .video-placeholder.loaded {
+  padding-top: 0;
+}
+.o-meeting-playback-video .video-placeholder.no-poster .video-js img {
+  display: none;
+}
+.o-meeting-playback-video .video-placeholder .poster-title {
+  display: none;
+}
+.o-meeting-playback-video .video-placeholder.init .poster-title {
+  display: block;
+  position: absolute;
+  top: 25%;
+  left: 10%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  font-size: 48px;
+  line-height: 64px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-video .video-placeholder.init .poster-title {
+    font-size: 40px;
+    line-height: 56px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-video .video-placeholder.init .poster-title {
+    font-size: 32px;
+    line-height: 44px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-video .video-placeholder.init .poster-title {
+    font-size: 32px;
+    line-height: 44px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-video .video-placeholder.init .poster-title {
+    font-size: 20px;
+    line-height: 28px;
+}
+}
+.o-meeting-playback-video video {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.video-js {
+  --right-size: 32px;
+  --right-icon-size: 32px;
+  --right-gap: 24px;
+}
+.video-js div.vjs-poster {
+  position: absolute;
+}
+.video-js div.vjs-poster picture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.video-js div.vjs-poster img {
+  object-fit: cover;
+  max-width: 100%;
+}
+.video-js div.vjs-poster::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--o-color-mask1);
+  z-index: 2;
+}
+.video-js .vjs-control-bar {
+  flex-wrap: wrap;
+  height: 64px;
+  z-index: 2;
+}
+.video-js .vjs-control-bar > button, .video-js .vjs-control-bar > div {
+  order: 2;
+}
+.video-js .vjs-control-bar .vjs-control {
+  height: 32px;
+}
+.video-js .vjs-control-bar .vjs-play-control {
+  width: 32px;
+  height: 32px;
+  margin-left: var(--o-gap-5);
+  margin-right: var(--o-gap-2);
+}
+.video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder::before {
+  font-size: 32px;
+  line-height: 32px;
+}
+.video-js .vjs-control-bar .vjs-skip-backward-5 {
+  width: 16px;
+  margin-left: var(--o-gap-2);
+}
+.video-js .vjs-control-bar .vjs-skip-backward-5 .vjs-icon-placeholder {
+  height: 16px;
+  width: 16px;
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='none'%20stroke='%23fff'%20stroke-linejoin='round'%20stroke-linecap='round'%20stroke-miterlimit='4'%20stroke-width='2.25'%20d='M4.065%2010.125l-2.565%201.875c0-5.805%204.695-10.5%2010.5-10.5%205.79%200%2010.5%204.695%2010.5%2010.5%200%205.79-4.71%2010.5-10.5%2010.5-2.715%200-5.175-1.035-7.035-2.715'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M11.685%2010.11c0.57%200%201.095%200.135%201.56%200.405%200.45%200.27%200.825%200.645%201.080%201.14%200.27%200.48%200.405%201.035%200.405%201.665%200%200.675-0.15%201.26-0.435%201.77-0.3%200.495-0.705%200.885-1.215%201.155s-1.080%200.405-1.68%200.405c-0.72%200-1.35-0.165-1.89-0.51-0.525-0.345-0.9-0.84-1.11-1.515l1.365-0.78c0.135%200.435%200.33%200.75%200.615%200.96%200.27%200.225%200.6%200.33%200.99%200.33%200.33%200%200.615-0.075%200.855-0.24%200.24-0.15%200.42-0.36%200.525-0.63%200.12-0.255%200.18-0.555%200.18-0.87%200-0.33-0.060-0.63-0.18-0.9-0.105-0.27-0.285-0.48-0.525-0.645s-0.54-0.24-0.885-0.24c-0.675%200-1.2%200.315-1.56%200.945l-1.185-0.585%200.66-5.385h5.010v1.455h-3.555l-0.315%202.37c0.18-0.105%200.375-0.18%200.6-0.225%200.21-0.045%200.435-0.075%200.69-0.075z'%3e%3c/path%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+}
+.video-js .vjs-control-bar .vjs-skip-backward-5 .vjs-icon-placeholder::before {
+  content: none;
+}
+.video-js .vjs-control-bar .vjs-skip-forward-5 {
+  width: 16px;
+  margin-left: var(--o-gap-2);
+}
+.video-js .vjs-control-bar .vjs-skip-forward-5 .vjs-icon-placeholder {
+  height: 16px;
+  width: 16px;
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='none'%20stroke='%23fff'%20stroke-linejoin='round'%20stroke-linecap='round'%20stroke-miterlimit='4'%20stroke-width='2.25'%20d='M19.92%2010.125l2.58%201.875c0-5.805-4.71-10.5-10.5-10.5-5.805%200-10.5%204.695-10.5%2010.5%200%205.79%204.695%2010.5%2010.5%2010.5%202.7%200%205.16-1.035%207.020-2.715'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M11.685%2010.11c0.57%200%201.095%200.135%201.56%200.405%200.45%200.27%200.825%200.645%201.080%201.14%200.27%200.48%200.405%201.035%200.405%201.665%200%200.675-0.15%201.26-0.435%201.77-0.3%200.495-0.705%200.885-1.215%201.155s-1.080%200.405-1.68%200.405c-0.72%200-1.35-0.165-1.89-0.51-0.525-0.345-0.9-0.84-1.11-1.515l1.365-0.78c0.135%200.435%200.33%200.75%200.615%200.96%200.27%200.225%200.6%200.33%200.99%200.33%200.33%200%200.615-0.075%200.855-0.24%200.24-0.15%200.42-0.36%200.525-0.63%200.12-0.255%200.18-0.555%200.18-0.87%200-0.33-0.060-0.63-0.18-0.9-0.105-0.27-0.285-0.48-0.525-0.645s-0.54-0.24-0.885-0.24c-0.675%200-1.2%200.315-1.56%200.945l-1.185-0.585%200.66-5.385h5.010v1.455h-3.555l-0.315%202.37c0.18-0.105%200.375-0.18%200.6-0.225%200.21-0.045%200.435-0.075%200.69-0.075z'%3e%3c/path%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-size: 16px;
+  background-position: center;
+}
+.video-js .vjs-control-bar .vjs-skip-forward-5 .vjs-icon-placeholder::before {
+  content: none;
+}
+.video-js .vjs-control-bar .vjs-time-control {
+  min-width: auto;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  font-size: 16px;
+  font-weight: 400;
+}
+.video-js .vjs-control-bar .vjs-time-control.vjs-current-time {
+  margin-left: var(--o-gap-4);
+}
+.video-js .vjs-control-bar .vjs-time-control.vjs-time-divider {
+  margin-left: var(--o-gap-1);
+  height: 32px;
+}
+.video-js .vjs-control-bar .vjs-time-control.vjs-duration {
+  margin-left: var(--o-gap-1);
+}
+.video-js .vjs-control-bar .vjs-playback-rate {
+  opacity: 0.8;
+  margin-left: auto;
+  min-width: var(--right-size);
+}
+.video-js .vjs-control-bar .vjs-playback-rate:hover {
+  opacity: 1;
+}
+.video-js .vjs-control-bar .vjs-playback-rate .vjs-playback-rate-value {
+  font-size: calc(var(--right-size) / 2);
+}
+.video-js .vjs-control-bar .vjs-playback-rate .vjs-menu .vjs-menu-content {
+  width: calc(100% + 5em);
+  max-height: 22em;
+  padding: 8px 16px;
+  border-radius: var(--meeting-cell-radius);
+  margin-left: -2.5em;
+  background-color: var(--o-color-info2);
+  box-shadow: 0 3px 9px 0 rgba(var(--o-kleinblue-10), 0.08);
+  backdrop-filter: blur(13.59);
+}
+.video-js .vjs-control-bar .vjs-playback-rate .vjs-menu li {
+  background-color: transparent;
+  justify-content: flex-start;
+  padding: 0;
+  font-size: 1.4em;
+  line-height: 1.7em;
+}
+.video-js .vjs-control-bar .vjs-playback-rate .vjs-menu li.vjs-selected {
+  color: #497af8;
+}
+.video-js .vjs-control-bar .vjs-playback-rate .vjs-menu li + li {
+  margin-top: 8px;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button {
+  cursor: pointer;
+  width: var(--right-size);
+  margin-left: var(--o-gap-5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.8;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button:hover {
+  opacity: 1;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-icon-placeholder {
+  width: var(--right-icon-size);
+  height: var(--right-icon-size);
+  background-position: center;
+  background-size: var(--right-icon-size);
+  background-repeat: no-repeat;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-content {
+  padding: 8px 16px;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: transparent;
+  height: 32px;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-item span {
+  order: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-item input {
+  order: 1;
+  margin-right: 12px;
+  border-radius: var(--meeting-input-radius);
+  cursor: inherit;
+  position: relative;
+  top: -1px;
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-item.vjs-selected {
+  color: var(--o-color-primary1);
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-item.vjs-selected input:checked {
+  background: var(--o-color-primary1);
+}
+.video-js .vjs-control-bar .vjs-subtitle-toggle-button .vjs-menu-item:hover {
+  color: var(--o-color-primary1);
+}
+.video-js .vjs-control-bar .vjs-subtitle-hidden .vjs-icon-placeholder {
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23fff'%20d='M6.585%2018h4.635c0.308%200%200.548-0.24%200.548-0.547s-0.24-0.547-0.548-0.547h-4.635c-0.082%200-0.158-0.008-0.232-0.030-0.053-0.008-0.105-0.030-0.158-0.053-0.060-0.023-0.105-0.045-0.158-0.082-0.060-0.038-0.113-0.083-0.165-0.135-0.053-0.045-0.097-0.105-0.135-0.165-0.030-0.045-0.060-0.098-0.083-0.15s-0.037-0.113-0.053-0.165c-0.015-0.075-0.022-0.15-0.022-0.232v-7.793c0-0.082%200.008-0.158%200.022-0.232%200.015-0.053%200.030-0.113%200.053-0.165s0.053-0.105%200.083-0.15c0.038-0.060%200.083-0.12%200.135-0.165%200.053-0.053%200.105-0.098%200.165-0.135%200.053-0.038%200.098-0.060%200.158-0.082%200.053-0.022%200.105-0.045%200.158-0.053%200.075-0.022%200.15-0.030%200.232-0.030h10.822c0.083%200%200.158%200.007%200.233%200.030%200.052%200.007%200.105%200.030%200.157%200.053%200.060%200.022%200.105%200.045%200.158%200.082%200.060%200.037%200.112%200.082%200.165%200.135%200.052%200.045%200.098%200.105%200.135%200.165%200.030%200.045%200.060%200.098%200.082%200.15s0.038%200.113%200.053%200.165c0.015%200.075%200.023%200.15%200.023%200.232v3.12c0%200.3%200.24%200.54%200.54%200.54%200.307%200%200.547-0.24%200.547-0.54v-3.12c0-0.15-0.023-0.308-0.053-0.45-0.030-0.128-0.067-0.248-0.112-0.368-0.053-0.12-0.112-0.233-0.18-0.345-0.082-0.112-0.172-0.225-0.27-0.322-0.098-0.105-0.21-0.195-0.322-0.27s-0.225-0.135-0.338-0.18c-0.12-0.053-0.247-0.090-0.367-0.12-0.15-0.030-0.3-0.045-0.45-0.045h-10.822c-0.15%200-0.3%200.015-0.45%200.045-0.12%200.030-0.247%200.067-0.367%200.12-0.113%200.045-0.225%200.105-0.338%200.18s-0.225%200.165-0.322%200.27c-0.098%200.098-0.188%200.21-0.262%200.322s-0.135%200.225-0.188%200.345c-0.045%200.12-0.083%200.24-0.113%200.368-0.030%200.142-0.045%200.3-0.045%200.45v7.793c0%200.15%200.015%200.307%200.045%200.45%200.030%200.128%200.067%200.247%200.113%200.367%200.053%200.12%200.112%200.232%200.188%200.345s0.165%200.225%200.262%200.323c0.098%200.105%200.21%200.195%200.322%200.27s0.225%200.135%200.338%200.18c0.12%200.053%200.248%200.090%200.367%200.12%200.15%200.030%200.3%200.053%200.45%200.053z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M11.647%2013.447l-0.749-0.434c-0.265%200.41-0.619%200.614-1.061%200.614-0.41%200-0.742-0.149-0.994-0.448-0.253-0.301-0.379-0.713-0.379-1.237%200-0.518%200.127-0.926%200.379-1.225%200.253-0.301%200.584-0.45%200.994-0.45%200.442%200%200.796%200.201%201.061%200.605l0.749-0.434c-0.171-0.354-0.413-0.62-0.726-0.795-0.311-0.177-0.669-0.266-1.073-0.266-0.442%200-0.847%200.104-1.214%200.312-0.365%200.208-0.656%200.506-0.872%200.895-0.214%200.389-0.322%200.841-0.322%201.359s0.107%200.971%200.322%201.359c0.216%200.387%200.506%200.686%200.872%200.895%200.367%200.208%200.771%200.312%201.214%200.312%200.404%200%200.762-0.089%201.073-0.266%200.313-0.177%200.555-0.442%200.726-0.795zM12.23%2012.848c-0.086-0.276-0.129-0.579-0.129-0.907%200-0.518%200.107-0.971%200.321-1.359%200.216-0.389%200.506-0.687%200.872-0.895%200.367-0.208%200.772-0.312%201.214-0.312%200.404%200%200.761%200.089%201.073%200.266%200.313%200.176%200.555%200.441%200.726%200.795l-0.749%200.434c-0.265-0.404-0.619-0.605-1.061-0.605-0.41%200-0.742%200.15-0.994%200.45-0.232%200.275-0.358%200.642-0.376%201.102-0.353%200.291-0.656%200.639-0.895%201.031z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M16.852%2012.075c-0.24-0.053-0.48-0.075-0.727-0.075-0.255%200-0.495%200.023-0.735%200.075-0.195%200.045-0.39%200.105-0.585%200.188-0.188%200.082-0.367%200.18-0.54%200.293-0.188%200.12-0.367%200.263-0.533%200.428s-0.307%200.345-0.427%200.533c-0.113%200.173-0.21%200.352-0.293%200.54-0.082%200.195-0.143%200.39-0.188%200.585-0.053%200.24-0.075%200.48-0.075%200.735%200%200.247%200.023%200.487%200.075%200.727%200.045%200.195%200.105%200.39%200.188%200.585%200.082%200.188%200.18%200.367%200.293%200.54%200.12%200.188%200.262%200.367%200.427%200.532%200.165%200.158%200.345%200.308%200.533%200.428%200.172%200.112%200.352%200.21%200.54%200.293s0.383%200.142%200.577%200.188c0.24%200.052%200.487%200.075%200.742%200.075%200.247%200%200.488-0.023%200.727-0.075%200.195-0.045%200.39-0.105%200.585-0.188%200.188-0.082%200.367-0.18%200.54-0.293%200.188-0.12%200.367-0.27%200.533-0.428%200.165-0.165%200.307-0.345%200.427-0.532%200.113-0.173%200.21-0.352%200.293-0.54%200.082-0.195%200.143-0.39%200.188-0.585%200.053-0.24%200.082-0.48%200.082-0.727%200-0.255-0.030-0.495-0.082-0.735-0.045-0.195-0.105-0.39-0.188-0.585-0.082-0.188-0.18-0.367-0.293-0.54-0.12-0.188-0.262-0.367-0.427-0.533s-0.345-0.308-0.533-0.428c-0.172-0.112-0.352-0.21-0.54-0.293-0.195-0.082-0.39-0.143-0.585-0.188zM16.125%2013.043c0.172%200%200.352%200.023%200.518%200.060%200.135%200.030%200.262%200.075%200.383%200.128%200.128%200.053%200.255%200.12%200.367%200.195%200.135%200.082%200.255%200.188%200.375%200.3%200.112%200.12%200.217%200.24%200.3%200.375%200.075%200.112%200.143%200.24%200.195%200.367%200.052%200.12%200.097%200.247%200.127%200.383%200.038%200.165%200.060%200.345%200.060%200.525%200%200.172-0.023%200.345-0.060%200.518-0.030%200.128-0.075%200.255-0.127%200.383s-0.12%200.255-0.195%200.367c-0.082%200.135-0.188%200.255-0.3%200.375-0.12%200.112-0.24%200.217-0.375%200.3-0.113%200.075-0.24%200.143-0.367%200.195-0.12%200.052-0.247%200.097-0.383%200.127-0.165%200.038-0.345%200.053-0.518%200.053-0.18%200-0.352-0.015-0.518-0.053-0.135-0.030-0.262-0.075-0.39-0.127s-0.255-0.12-0.367-0.195c-0.135-0.082-0.255-0.188-0.375-0.3-0.113-0.12-0.218-0.24-0.3-0.375-0.075-0.113-0.143-0.24-0.195-0.367s-0.098-0.255-0.128-0.383c-0.038-0.173-0.060-0.345-0.060-0.518%200-0.18%200.023-0.36%200.060-0.525%200.030-0.135%200.075-0.263%200.128-0.383%200.053-0.128%200.12-0.255%200.195-0.367%200.082-0.135%200.188-0.255%200.3-0.375%200.12-0.113%200.24-0.218%200.375-0.3%200.112-0.075%200.24-0.143%200.367-0.195%200.12-0.053%200.247-0.098%200.383-0.128%200.165-0.038%200.345-0.060%200.525-0.060z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M17.138%2015.855h-1.8c-0.3%200-0.525-0.225-0.525-0.518%200-0.3%200.225-0.525%200.525-0.525h1.8c0.292%200%200.517%200.225%200.517%200.525%200%200.293-0.225%200.518-0.517%200.518z'%3e%3c/path%3e%3c/svg%3e");
+}
+.video-js .vjs-control-bar .vjs-subtitle-showing .vjs-icon-placeholder {
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23fff'%20d='M17.857%206.045c-0.15-0.030-0.3-0.045-0.45-0.045h-10.823c-0.15%200-0.3%200.015-0.45%200.045-0.12%200.030-0.247%200.068-0.367%200.12-0.113%200.045-0.225%200.105-0.338%200.18s-0.225%200.165-0.322%200.27c-0.098%200.098-0.188%200.21-0.262%200.322s-0.135%200.225-0.188%200.345c-0.045%200.12-0.083%200.24-0.113%200.367-0.030%200.143-0.045%200.3-0.045%200.45v7.793c0%200.15%200.015%200.308%200.045%200.45%200.030%200.128%200.067%200.247%200.113%200.367%200.053%200.12%200.112%200.232%200.188%200.345s0.165%200.225%200.262%200.323c0.098%200.105%200.21%200.195%200.322%200.27s0.225%200.135%200.338%200.18c0.12%200.052%200.248%200.090%200.367%200.12%200.15%200.030%200.3%200.053%200.45%200.053h10.823c0.15%200%200.3-0.023%200.45-0.053%200.12-0.030%200.247-0.067%200.367-0.12%200.113-0.045%200.225-0.105%200.337-0.18s0.225-0.165%200.323-0.27c0.097-0.098%200.188-0.21%200.27-0.323%200.067-0.112%200.128-0.225%200.18-0.345%200.045-0.12%200.083-0.24%200.113-0.367%200.030-0.142%200.052-0.3%200.052-0.45v-7.793c0-0.15-0.023-0.308-0.052-0.45-0.030-0.127-0.067-0.247-0.113-0.367-0.052-0.12-0.112-0.232-0.18-0.345-0.082-0.113-0.173-0.225-0.27-0.322-0.098-0.105-0.21-0.195-0.323-0.27s-0.225-0.135-0.337-0.18c-0.12-0.053-0.247-0.090-0.367-0.12zM6.585%207.087h10.822c0.083%200%200.158%200.007%200.233%200.030%200.052%200.007%200.105%200.030%200.157%200.053%200.060%200.022%200.105%200.045%200.158%200.082%200.060%200.038%200.112%200.082%200.165%200.135%200.052%200.045%200.098%200.105%200.135%200.165%200.030%200.045%200.060%200.098%200.082%200.15s0.038%200.112%200.053%200.165c0.015%200.075%200.023%200.15%200.023%200.233v7.792c0%200.082-0.008%200.157-0.023%200.232-0.015%200.053-0.030%200.113-0.053%200.165s-0.052%200.105-0.082%200.15c-0.037%200.060-0.082%200.12-0.135%200.165-0.053%200.052-0.105%200.097-0.165%200.135-0.053%200.038-0.098%200.060-0.158%200.082-0.052%200.023-0.105%200.045-0.157%200.052-0.075%200.023-0.15%200.030-0.233%200.030h-10.822c-0.082%200-0.158-0.008-0.232-0.030-0.053-0.008-0.105-0.030-0.158-0.052-0.060-0.023-0.105-0.045-0.158-0.082-0.060-0.038-0.113-0.082-0.165-0.135-0.053-0.045-0.098-0.105-0.135-0.165-0.030-0.045-0.060-0.098-0.083-0.15s-0.037-0.112-0.053-0.165c-0.015-0.075-0.022-0.15-0.022-0.232v-7.793c0-0.082%200.007-0.158%200.022-0.232%200.015-0.053%200.030-0.113%200.053-0.165s0.053-0.105%200.083-0.15c0.037-0.060%200.083-0.12%200.135-0.165%200.053-0.053%200.105-0.098%200.165-0.135%200.053-0.038%200.098-0.060%200.158-0.082%200.053-0.022%200.105-0.045%200.158-0.053%200.075-0.022%200.15-0.030%200.232-0.030z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M11.7%2013.44l-0.75-0.435c-0.262%200.413-0.615%200.615-1.057%200.615-0.413%200-0.743-0.143-0.998-0.443-0.248-0.3-0.375-0.712-0.375-1.237%200-0.518%200.127-0.93%200.375-1.23%200.255-0.3%200.585-0.45%200.998-0.45%200.442%200%200.795%200.203%201.057%200.608l0.75-0.435c-0.172-0.353-0.412-0.623-0.727-0.795-0.308-0.18-0.668-0.262-1.073-0.262-0.442%200-0.84%200.098-1.207%200.307s-0.66%200.51-0.877%200.893c-0.21%200.39-0.315%200.848-0.315%201.365s0.105%200.967%200.315%201.357c0.217%200.39%200.51%200.683%200.877%200.893s0.765%200.315%201.207%200.315c0.405%200%200.765-0.090%201.073-0.27%200.315-0.173%200.555-0.443%200.727-0.795zM16.365%2013.44l-0.75-0.435c-0.27%200.413-0.622%200.615-1.065%200.615-0.412%200-0.742-0.143-0.99-0.443-0.255-0.3-0.383-0.712-0.383-1.237%200-0.518%200.128-0.93%200.383-1.23%200.247-0.3%200.578-0.45%200.99-0.45%200.443%200%200.795%200.203%201.065%200.608l0.75-0.435c-0.173-0.353-0.42-0.623-0.728-0.795-0.315-0.18-0.668-0.262-1.072-0.262-0.442%200-0.848%200.098-1.215%200.307s-0.66%200.51-0.87%200.893c-0.217%200.39-0.322%200.848-0.322%201.365s0.105%200.967%200.322%201.357c0.21%200.39%200.503%200.683%200.87%200.893s0.773%200.315%201.215%200.315c0.405%200%200.758-0.090%201.072-0.27%200.307-0.173%200.555-0.443%200.728-0.795z'%3e%3c/path%3e%3c/svg%3e");
+}
+.video-js .vjs-control-bar .vjs-volume-panel {
+  opacity: 0.8;
+  margin-left: var(--o-gap-5);
+  width: var(--right-size);
+  position: relative;
+}
+.video-js .vjs-control-bar .vjs-volume-panel:hover {
+  opacity: 1;
+}
+.video-js .vjs-control-bar .vjs-volume-panel .vjs-mute-control {
+  width: var(--right-size);
+}
+.video-js .vjs-control-bar .vjs-volume-panel .vjs-volume-control {
+  height: fit-content;
+  transform: translateX(4px);
+}
+.video-js .vjs-control-bar .vjs-volume-panel .vjs-icon-placeholder::before {
+  height: var(--right-size);
+  display: block;
+  font-size: calc(var(--right-size) / 2);
+}
+.video-js .vjs-control-bar .vjs-mute-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.video-js .vjs-control-bar .vjs-mute-control .vjs-icon-placeholder {
+  width: var(--right-icon-size);
+  height: var(--right-icon-size);
+  background-position: center;
+  background-size: var(--right-icon-size);
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23fff'%20d='M5.625%209.495h3.015c0.090%200%200.18-0.030%200.247-0.090l2.49-2.138c0.24-0.21%200.623-0.038%200.623%200.285v8.887c0%200.323-0.383%200.495-0.623%200.285l-2.49-2.153c-0.067-0.060-0.158-0.090-0.247-0.090h-3.015c-0.21%200-0.375-0.172-0.375-0.375v-4.237c0-0.203%200.165-0.375%200.375-0.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M13.883%206c2.933%200.315%205.168%202.902%205.168%206%200%203.090-2.235%205.678-5.168%205.992-0.412%200.045-0.78-0.255-0.825-0.667s0.255-0.78%200.668-0.825c2.152-0.232%203.825-2.168%203.825-4.5%200-2.34-1.672-4.275-3.825-4.508-0.413-0.045-0.712-0.412-0.668-0.825%200.038-0.383%200.36-0.668%200.735-0.668h0.090z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M13.050%209c1.688%200.15%203%201.433%203%203%200%201.507-1.23%202.76-2.835%202.977l-0.165%200.023v-6z'%3e%3c/path%3e%3c/svg%3e");
+}
+.video-js .vjs-control-bar .vjs-mute-control .vjs-icon-placeholder::before {
+  content: none;
+}
+.video-js .vjs-control-bar .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before, .video-js .vjs-control-bar .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder::before, .video-js .vjs-control-bar .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder::before {
+  line-height: 1.67;
+}
+.video-js .vjs-control-bar .vjs-volume-control {
+  border-radius: var(--meeting-cell-radius);
+  background-color: var(--o-color-info2);
+  box-shadow: 0 3px 9px 0 rgba(var(--o-kleinblue-10), 0.08);
+  backdrop-filter: blur(13.59);
+}
+.video-js .vjs-control-bar .vjs-fullscreen-control {
+  opacity: 0.8;
+  width: var(--right-size);
+  margin-left: var(--o-gap-5);
+  margin-right: var(--o-gap-5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.video-js .vjs-control-bar .vjs-fullscreen-control:hover {
+  opacity: 1;
+}
+.video-js .vjs-control-bar .vjs-fullscreen-control .vjs-icon-placeholder {
+  width: var(--right-icon-size);
+  height: var(--right-icon-size);
+  background-position: center;
+  background-size: var(--right-icon-size);
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23fff'%20d='M9.75%205.625v0.75c0%200.202-0.172%200.375-0.375%200.375h-2.25c-0.21%200-0.375%200.165-0.375%200.375v2.25c0%200.203-0.173%200.375-0.375%200.375h-0.75c-0.21%200-0.375-0.172-0.375-0.375v-3.75c0-0.21%200.165-0.375%200.375-0.375h3.75c0.203%200%200.375%200.165%200.375%200.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M9.75%2017.625v-0.75c0-0.21-0.172-0.375-0.375-0.375h-2.25c-0.21%200-0.375-0.172-0.375-0.375v-2.25c0-0.21-0.173-0.375-0.375-0.375h-0.75c-0.21%200-0.375%200.165-0.375%200.375v3.75c0%200.203%200.165%200.375%200.375%200.375h3.75c0.203%200%200.375-0.172%200.375-0.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M13.5%205.625v0.75c0%200.202%200.165%200.375%200.375%200.375h2.25c0.203%200%200.375%200.165%200.375%200.375v2.25c0%200.203%200.165%200.375%200.375%200.375h0.75c0.203%200%200.375-0.172%200.375-0.375v-3.75c0-0.21-0.172-0.375-0.375-0.375h-3.75c-0.21%200-0.375%200.165-0.375%200.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M13.5%2017.625v-0.75c0-0.21%200.165-0.375%200.375-0.375h2.25c0.203%200%200.375-0.172%200.375-0.375v-2.25c0-0.21%200.165-0.375%200.375-0.375h0.75c0.203%200%200.375%200.165%200.375%200.375v3.75c0%200.203-0.172%200.375-0.375%200.375h-3.75c-0.21%200-0.375-0.172-0.375-0.375z'%3e%3c/path%3e%3c/svg%3e");
+}
+.video-js .vjs-control-bar .vjs-fullscreen-control .vjs-icon-placeholder::before {
+  content: none;
+}
+.video-js .vjs-control-bar .vjs-icon-fullscreen-enter::before {
+  line-height: 1.67;
+}
+.video-js .vjs-control-bar .vjs-progress-control {
+  height: 16px;
+  order: 1;
+  padding: 0 8px;
+  width: 100%;
+  left: 0;
+}
+.video-js .vjs-control-bar .vjs-progress-control div {
+  border-radius: var(--meeting-cell-radius);
+}
+.video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder {
+  margin: 0;
+  background: rgba(var(--o-grey-1), 0.3);
+}
+.video-js .vjs-control-bar .vjs-progress-control .vjs-load-progress div {
+  background: rgba(var(--o-grey-1), 0.5);
+}
+.video-js .vjs-control-bar .vjs-progress-control .vjs-slider-bar::before {
+  cursor: pointer;
+}
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23fff'%20d='M5.25%209.375v-0.75c0-0.207%200.168-0.375%200.375-0.375h2.25c0.207%200%200.375-0.168%200.375-0.375v-2.25c0-0.207%200.168-0.375%200.375-0.375h0.75c0.207%200%200.375%200.168%200.375%200.375v3.75c0%200.207-0.168%200.375-0.375%200.375h-3.75c-0.207%200-0.375-0.168-0.375-0.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M5.25%2013.875v0.75c0%200.207%200.168%200.375%200.375%200.375h2.25c0.207%200%200.375%200.168%200.375%200.375v2.25c0%200.207%200.168%200.375%200.375%200.375h0.75c0.207%200%200.375-0.168%200.375-0.375v-3.75c0-0.207-0.168-0.375-0.375-0.375h-3.75c-0.207%200-0.375%200.168-0.375%200.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M18%209.375v-0.75c0-0.207-0.168-0.375-0.375-0.375h-2.25c-0.207%200-0.375-0.168-0.375-0.375v-2.25c0-0.207-0.168-0.375-0.375-0.375h-0.75c-0.207%200-0.375%200.168-0.375%200.375v3.75c0%200.207%200.168%200.375%200.375%200.375h3.75c0.207%200%200.375-0.168%200.375-0.375z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M18%2013.875v0.75c0%200.207-0.168%200.375-0.375%200.375h-2.25c-0.207%200-0.375%200.168-0.375%200.375v2.25c0%200.207-0.168%200.375-0.375%200.375h-0.75c-0.207%200-0.375-0.168-0.375-0.375v-3.75c0-0.207%200.168-0.375%200.375-0.375h3.75c0.207%200%200.375%200.168%200.375%200.375z'%3e%3c/path%3e%3c/svg%3e");
+}
+.video-js .vjs-text-track-display {
+  bottom: 64px !important;
+}
+.video-js .vjs-text-track-display .vjs-text-track-cue {
+  height: fit-content !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: auto 0 0 0 !important;
+}
+.video-js .vjs-text-track-display .vjs-text-track-cue div {
+  width: fit-content !important;
+  color: var(--o-color-info1-inverse) !important;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  border-radius: var(--meeting-cell-radius);
+  display: block !important;
+  padding: var(--o-gap-1) var(--o-gap-4);
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.video-js .vjs-text-track-display .vjs-text-track-cue div {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.video-js .vjs-text-track-display .vjs-text-track-cue div {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.video-js .vjs-text-track-display .vjs-text-track-cue div {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.video-js .vjs-text-track-display .vjs-text-track-cue div {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.video-js .vjs-paused .vjs-big-play-button {
+  display: block;
+}
+.video-js .vjs-error .vjs-big-play-button {
+  display: none;
+}
+.video-js .vjs-big-play-button {
+  width: 64px;
+  height: 64px;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin-left: 0;
+  margin-top: 0;
+  border-radius: 50%;
+  z-index: 2;
+  background-image: url("data:image/svg+xml,%3csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20fill='%23fff'%20opacity='0.196078'%20d='M24%2012c0%206.627-5.373%2012-12%2012s-12-5.373-12-12c0-6.627%205.373-12%2012-12s12%205.373%2012%2012z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M0%2012c0%206.627%205.372%2012%2012%2012s12-5.372%2012-12c0-6.627-5.372-12-12-12s-12%205.372-12%2012zM0.192%2012c0-6.523%205.284-11.807%2011.807-11.807%206.519%200%2011.807%205.284%2011.807%2011.807%200%206.519-5.288%2011.807-11.807%2011.807-6.523%200-11.807-5.288-11.807-11.807z'%3e%3c/path%3e%3cpath%20fill='%23fff'%20d='M16.579%2013.354l-5.838%203.225c-0.639%200.35-1.451%200.139-1.816-0.473-0.115-0.192-0.177-0.412-0.177-0.635v-6.446c0-0.704%200.597-1.278%201.332-1.278%200.231%200%200.458%200.058%200.662%200.169l5.838%203.225c0.639%200.35%200.858%201.131%200.493%201.743-0.119%200.196-0.289%200.358-0.493%200.47z'%3e%3c/path%3e%3c/svg%3e");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: 0.5px solid rgba(var(--o-white), 0.6);
+  background-color: rgba(var(--o-grey-1), 0.2);
+}
+.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
+  content: none;
+}
+@media (hover: hover) {
+.video-js:hover .vjs-big-play-button {
+    border: 0.5px solid rgba(var(--o-grey-1), 0.6);
+    background-color: rgba(var(--o-grey-1), 0.2);
+}
+}

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.vue.d.ts

@@ -0,0 +1,17 @@
+import { MeetingPlaybackVideoPropsT } from '..';
+declare const _default: import('vue').DefineComponent<MeetingPlaybackVideoPropsT, {
+    changeTime: (time: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    getDuration: (...args: any[]) => void;
+    getInstance: (...args: any[]) => void;
+    setTrackIdx: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<MeetingPlaybackVideoPropsT> & Readonly<{
+    onGetDuration?: ((...args: any[]) => any) | undefined;
+    onGetInstance?: ((...args: any[]) => any) | undefined;
+    onSetTrackIdx?: ((...args: any[]) => any) | undefined;
+}>, {
+    src: string;
+    captions: import('..').CaptionItemT[];
+    vtt: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;