npm - @opendesign-plus-test/components - Versions diffs - 0.0.1-rc.64 → 0.0.1-rc.66 - Mend

@opendesign-plus-test/components 0.0.1-rc.64 → 0.0.1-rc.66

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 (502) hide show

package/dist/esm/components/meeting/components/OMeetingPlaybackVideo.css ADDED Viewed

@@ -0,0 +1,431 @@
+.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: 24px;
+  --right-gap: 24px;
+}
+.video-js div.vjs-poster {
+  position: absolute;
+}
+.video-js div.vjs-poster img {
+  object-fit: cover;
+}
+.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);
+}
+.video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder::before {
+  font-size: 24px;
+  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: 12px;
+    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/esm/components/meeting/components/OMeetingPlaybackVideo.vue.mjs ADDED Viewed

@@ -0,0 +1,168 @@
+import { defineComponent as R, ref as c, watch as w, onMounted as F, onUnmounted as V, openBlock as I, createElementBlock as S, createElementVNode as B, normalizeClass as N, toDisplayString as z, createCommentVNode as H, nextTick as A } from "vue";
+import h from "video.js";
+import "video.js/dist/video-js.css";
+import { transformTime as K } from "../utils.mjs";
+import O from "../../../assets/meeting/transparent.png.mjs";
+const U = { class: "o-meeting-playback-video" }, $ = {
+  key: 0,
+  class: "poster-title"
+}, X = /* @__PURE__ */ R({
+  __name: "OMeetingPlaybackVideo",
+  props: {
+    src: { default: "" },
+    vtt: { default: "" },
+    captions: { default: () => [] },
+    poster: {},
+    posterTitle: {},
+    instance: {},
+    trackIdx: {}
+  },
+  emits: ["getDuration", "getInstance", "setTrackIdx"],
+  setup(u, { expose: j, emit: E }) {
+    const o = u, d = c(), _ = c(), v = c(), p = E, D = c(!1), f = () => {
+      D.value = !1;
+    }, g = (t, a = !1) => {
+      var n, s;
+      const r = o.instance;
+      if (!r) return;
+      const e = (n = t.activeCues) == null ? void 0 : n[0];
+      if (d.value && clearInterval(d.value), e) {
+        e.text = ((s = e == null ? void 0 : e.text) == null ? void 0 : s.replace(/\[(SPEAKER_)\d+]: /g, "")) || "";
+        const l = e.text.split(`
+`), m = l.length, M = e.endTime - e.startTime, x = parseFloat((M / m).toFixed(3));
+        let i = 0;
+        if (a) {
+          const P = (r.currentTime() - e.startTime) / (e.endTime - e.startTime);
+          for (; (i + 1) / m < P; )
+            i++;
+        }
+        i < m ? e.text = l.length ? l[i] : e == null ? void 0 : e.text : e.text = l.length ? l[0] : e == null ? void 0 : e.text;
+        let y = x * 1e3;
+        const C = () => {
+          d.value = setInterval(() => {
+            t.mode = "hidden", i++, i > l.length - 1 ? clearInterval(d.value) : i === l.length - 1 ? (e.text = l[i], clearInterval(d.value), y = x * (m - i) * 1e3, C()) : e.text = l[i], t.mode = "showing";
+          }, y);
+        };
+        C();
+      }
+    }, L = c([]);
+    w(
+      () => L.value,
+      (t) => {
+        const a = o.instance;
+        if (a) {
+          const r = a.textTracks();
+          for (let e = 0; e < r.length; e++)
+            r[e].kind === "subtitles" && (g(r[e], !0), r[e].mode = t.length ? "showing" : "hidden");
+        }
+      },
+      {
+        deep: !0
+      }
+    );
+    const k = c(!1), b = c("init"), T = async () => {
+      if (!o.src) return;
+      const t = h("playerId", {
+        controls: !0,
+        autoplay: !1,
+        preload: "auto",
+        fluid: !0,
+        poster: o.poster || O,
+        // 控制栏
+        playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
+        controlBar: {
+          skipButtons: {
+            backward: 5,
+            forward: 5
+          },
+          children: {
+            playToggle: !0,
+            SkipBackward: {
+              backward: 5
+            },
+            skipForward: {
+              forward: 5
+            },
+            currentTimeDisplay: !0,
+            timeDivider: !0,
+            durationDisplay: !0,
+            progressControl: !0,
+            PlaybackRateMenuButton: !0,
+            volumePanel: {
+              inline: !1
+            },
+            FullscreenToggle: !0
+          }
+        }
+      });
+      p("getInstance", t), t.src(o.src), t.addRemoteTextTrack({
+        kind: "subtitles",
+        src: o.vtt,
+        srclang: "zh",
+        label: "中文",
+        default: !1
+      }), k.value = !0;
+      class a extends h.getComponent("Button") {
+        constructor(n, s) {
+          super(n, s), this.addClass("vjs-subtitle-toggle-button", "vjs-subtitle-hidden"), this.controlText("Toggle Subtitles");
+        }
+        buildCSSClass() {
+          return `vjs-subtitle-toggle-button ${super.buildCSSClass()}`;
+        }
+        handleClick() {
+          const n = this.player().textTracks();
+          for (let s = 0; s < n.length; s++)
+            n[s].kind === "subtitles" && (g(n[s], !0), n[s].mode = n[s].mode === "showing" ? "hidden" : "showing", n[s].mode === "showing" ? (this.removeClass("vjs-subtitle-hidden"), this.addClass("vjs-subtitle-showing")) : (this.removeClass("vjs-subtitle-showing"), this.addClass("vjs-subtitle-hidden")));
+        }
+      }
+      o.vtt && (h.registerComponent("SubtitleToggleButton", a), t.controlBar.children_.some((e) => e.name_ === "SubtitleToggleButton") || t.controlBar.addChild("SubtitleToggleButton", {}, 8)), (t == null ? void 0 : t.textTracks().tracks_).forEach((e) => {
+        e == null || e.addEventListener("cuechange", () => {
+          g(e);
+        });
+      }), t.on("play", () => {
+        b.value = "playing";
+      }), t.on("timeupdate", () => {
+        const e = t.currentTime() || 0, n = o.captions.findIndex((s) => K(s.start_time) > e);
+        p("setTrackIdx", n);
+      }), t.one("loadedmetadata", () => {
+        p("getDuration", t.duration());
+      }), A(() => {
+        const e = document.getElementsByClassName("o-meeting-playback-video")[0];
+        _.value = e.offsetHeight;
+      }), v.value = t;
+    };
+    return F(() => {
+      T(), document.addEventListener("click", f);
+    }), w(
+      () => o.src,
+      () => {
+        T();
+      }
+    ), V(() => {
+      var t;
+      (t = o == null ? void 0 : o.instance) == null || t.dispose(), document.removeEventListener("click", f);
+    }), j({
+      changeTime: (t) => {
+        var a;
+        (a = v.value) == null || a.currentTime(t);
+      }
+    }), (t, a) => (I(), S("div", U, [
+      B("div", {
+        class: N(["video-placeholder", {
+          loaded: k.value,
+          "no-poster": !u.poster,
+          [b.value]: !0
+        }])
+      }, [
+        a[0] || (a[0] = B("video", {
+          class: "video-js",
+          id: "playerId"
+        }, null, -1)),
+        u.posterTitle ? (I(), S("div", $, z(u.posterTitle), 1)) : H("", !0)
+      ], 2)
+    ]));
+  }
+});
+export {
+  X as default
+};

package/dist/esm/components/meeting/components/OMeetingPlaybackVideo.vue3.mjs ADDED Viewed

@@ -0,0 +1,5 @@
+import o from "./OMeetingPlaybackVideo.vue.mjs";
+import './OMeetingPlaybackVideo.css';
+export {
+  o as default
+};