@stream-io/video-styling 1.9.1 → 1.11.0

package/embedded.scss

@@ -0,0 +1,2 @@
+@use 'index';
+@use 'src/Embedded';

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@stream-io/video-styling",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "license": "See license in LICENSE",
   "scripts": {
     "clean": "rimraf dist",
-    "start": "sass --watch index.scss ./dist/css/styles.css",
-    "build": "sass --embed-sources index.scss ./dist/css/styles.css"
+    "start": "sass --watch index.scss:./dist/css/styles.css embedded.scss:./dist/css/embedded.css",
+    "build": "sass --embed-sources index.scss:./dist/css/styles.css embedded.scss:./dist/css/embedded.css"
   },
   "repository": {
     "type": "git",

package/src/CallLayout/LivestreamLayout-layout.scss

@@ -70,6 +70,22 @@
       padding: 0 20px;
     }
 
+    .str-video__livestream-layout__overlay__bar-left,
+    .str-video__livestream-layout__overlay__bar-center,
+    .str-video__livestream-layout__overlay__bar-right {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .str-video__livestream-layout__overlay__bar-center {
+      justify-content: center;
+    }
+
+    .str-video__livestream-layout__overlay__bar-right {
+      justify-content: flex-end;
+    }
+
     .str-video__livestream-layout__live-badge {
       padding: 4px 8px;
       border-radius: var(--str-video__border-radius-xxs);
@@ -88,7 +104,6 @@
     }
 
     .str-video__livestream-layout__speaker-name {
-      flex: 1;
       font-size: 13px;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -96,7 +111,6 @@
     }
 
     .str-video__livestream-layout__duration {
-      flex: 1;
       text-align: center;
     }
 

package/src/CallLayout/PipLayout-layout.scss

@@ -21,3 +21,118 @@
     height: 1rem;
   }
 }
+
+.str-video__pip-layout--grid {
+  flex-wrap: nowrap;
+}
+
+.str-video__pip-layout__grid-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.str-video__pip-layout__pagination-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  padding: var(--str-video__spacing-xxs);
+  min-width: auto;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+
+  &:hover:not(:disabled) {
+    opacity: 1;
+  }
+
+  .str-video__icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &--left {
+    left: 0;
+  }
+
+  &--right {
+    right: 0;
+  }
+}
+
+.str-video__pip-layout__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--pip-cols), 1fr);
+  gap: var(--str-video__spacing-xxs);
+  width: 100%;
+  max-height: 100%;
+  flex: 1 1 auto;
+
+  .str-video__participant-view {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+
+    &--speaking {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: 2px solid var(--str-video__primary-color);
+        border-radius: var(--str-video__border-radius-sm);
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+
+    .str-video__notification {
+      display: none;
+    }
+  }
+
+  @mixin pip-avatar-size($size, $font-size) {
+    .str-video__video-placeholder__avatar,
+    .str-video__video-placeholder__initials-fallback {
+      width: $size;
+      height: $size;
+      font-size: $font-size;
+    }
+  }
+
+  @include pip-avatar-size(32px, var(--str-video__font-size-sm));
+
+  &.str-video__pip-layout__grid--single {
+    --pip-cols: 1;
+    @include pip-avatar-size(80px, var(--str-video__font-size-xxl));
+  }
+
+  &.str-video__pip-layout__grid--small {
+    --pip-cols: 2;
+    @include pip-avatar-size(60px, var(--str-video__font-size-xl));
+  }
+
+  &.str-video__pip-layout__grid--medium {
+    --pip-cols: 3;
+    @include pip-avatar-size(45px, var(--str-video__font-size-md));
+  }
+
+  &.str-video__pip-layout__grid--large {
+    --pip-cols: 4;
+    @include pip-avatar-size(35px, var(--str-video__font-size-sm));
+  }
+
+  &.str-video__pip-layout__grid--overflow {
+    --pip-cols: 5;
+    overflow-y: auto;
+    @include pip-avatar-size(25px, var(--str-video__font-size-xs));
+  }
+}

package/src/Embedded/_base.scss

@@ -0,0 +1,9 @@
+.str-video.str-video__embedded {
+  background-color: var(--str-video__base-color4);
+  color: var(--str-video__text-color1);
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  container-type: size;
+}

package/src/Embedded/call/CallLayout-layout.scss

@@ -0,0 +1,113 @@
+.str-video__embedded-call {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  height: 100%;
+  padding: var(--str-video__spacing-sm);
+  overflow: auto hidden;
+
+  .str-video__permission-requests {
+    width: 100%;
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.str-video__embedded-call-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-xxl);
+}
+
+.str-video__embedded-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-md);
+  position: relative;
+}
+
+.str-video__embedded-layout__stage {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.str-video__embedded-notifications {
+  position: absolute;
+  bottom: 60px;
+  left: var(--str-video__spacing-lg);
+  right: 0;
+  z-index: 3;
+}
+
+.str-video__embedded-sidebar {
+  position: absolute;
+  border-radius: var(--str-video__border-radius-md);
+  height: calc(100% - 60px);
+
+  &.str-video__embedded-sidebar--open {
+    z-index: 2;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .str-video__participant-list {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.str-video__embedded-participants {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-lg);
+  margin: var(--str-video__spacing-lg) 0;
+}
+
+@container (min-width: 700px) {
+  .str-video__embedded-call-header {
+    display: none;
+  }
+
+  .str-video__embedded-sidebar {
+    position: relative;
+    width: 0;
+    height: auto;
+    overflow: hidden;
+    transition: width 0.3s;
+    z-index: 1;
+
+    &.str-video__embedded-sidebar--open {
+      width: 350px;
+    }
+  }
+
+  .str-video__embedded-participants {
+    max-width: 350px;
+    min-width: 350px;
+    height: 100%;
+    margin: 0;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}

package/src/Embedded/call/CallLayout-theme.scss

@@ -0,0 +1,7 @@
+.str-video__embedded-call {
+  background-color: var(--str-video__base-color4);
+}
+
+.str-video__embedded-participants {
+  background-color: var(--str-video__base-color7);
+}

package/src/Embedded/call/index.scss

@@ -0,0 +1,2 @@
+@use 'CallLayout-layout';
+@use 'CallLayout-theme';

package/src/Embedded/index.scss

@@ -0,0 +1,4 @@
+@use 'base';
+@use 'shared';
+@use 'call';
+@use 'livestream';

package/src/Embedded/livestream/Livestream-layout.scss

@@ -0,0 +1,152 @@
+.str-video__embedded-livestream {
+  height: 100%;
+}
+
+.str-video__embedded-livestream-duration {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+
+  &__live-badge,
+  &__backstage-badge {
+    padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+    border-radius: var(--str-video__spacing-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  &__viewers {
+    display: flex;
+    align-items: center;
+    gap: var(--str-video__spacing-xs);
+  }
+
+  &__eye-icon {
+    display: inline-block;
+    width: 1.125rem;
+    height: 1.125rem;
+    -webkit-mask-image: var(--str-video__icon--eye);
+    mask-image: var(--str-video__icon--eye);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  &__count {
+    font-size: 0.875rem;
+  }
+
+  &__elapsed {
+    font-size: 0.875rem;
+  }
+}
+
+.str-video__embedded-go-live-button,
+.str-video__embedded-end-stream-button {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--str-video__spacing-sm);
+  height: 34px;
+  min-width: 140px;
+  padding: 0 var(--str-video__spacing-lg);
+  border: none;
+  border-radius: var(--str-video__border-radius-xxl);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.str-video__embedded-go-live-button {
+  svg {
+    width: 18px;
+    height: 14px;
+  }
+}
+
+.str-video__embedded-end-stream-button {
+  .str-video__icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.str-video__embedded-viewer-lobby {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--str-video__spacing-xl);
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 400px;
+  }
+
+  &__icon {
+    .str-video__icon {
+      width: 56px;
+      height: 56px;
+    }
+  }
+
+  &__title {
+    margin: var(--str-video__spacing-xl) 0 var(--str-video__spacing-sm);
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  &__starts-at {
+    margin: var(--str-video__spacing-sm);
+    font-size: 0.875rem;
+  }
+
+  &__participant-count {
+    margin: var(--str-video__spacing-md);
+    font-size: 0.8125rem;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--str-video__spacing-lg);
+    margin-top: var(--str-video__spacing-xl);
+
+    .str-video__button {
+      min-width: 180px;
+    }
+  }
+
+  &__auto-join {
+    display: flex;
+    align-items: center;
+    gap: var(--str-video__spacing-sm);
+    font-size: 0.875rem;
+    cursor: pointer;
+
+    input[type='checkbox'] {
+      cursor: pointer;
+    }
+  }
+
+  &__join-error {
+    margin-top: var(--str-video__spacing-md);
+    font-size: var(--str-video__font-size-xs);
+    line-height: 1.3;
+    text-align: center;
+    font-weight: 500;
+    min-height: 1.3em;
+
+    &[data-visible='false'] {
+      visibility: hidden;
+    }
+  }
+}

package/src/Embedded/livestream/Livestream-theme.scss

@@ -0,0 +1,86 @@
+.str-video__embedded-livestream-duration {
+  &__live-badge,
+  &__backstage-badge {
+    color: var(--str-video__text-color1);
+  }
+
+  &__live-badge {
+    background-color: var(--str-video__primary-color);
+  }
+
+  &__backstage-badge {
+    background-color: var(--str-video__base-color6);
+  }
+
+  &__eye-icon {
+    background-color: var(--str-video__text-color1);
+    opacity: 0.8;
+  }
+
+  &__count {
+    color: var(--str-video__text-color1);
+    opacity: 0.8;
+  }
+
+  &__elapsed {
+    color: var(--str-video__text-color1);
+    opacity: 0.8;
+  }
+}
+
+.str-video__embedded-go-live-button {
+  background: var(--str-video__button-primary-active);
+  color: var(--str-video__text-color1);
+
+  &:hover {
+    background: var(--str-video__button-primary-hover);
+  }
+}
+
+.str-video__embedded-end-stream-button {
+  background: var(--str-video__button-default-base);
+  color: var(--str-video__text-color1);
+
+  &:hover {
+    background: var(--str-video__button-default-hover);
+  }
+
+  .str-video__icon {
+    color: var(--str-video__alert-warning);
+  }
+}
+
+.str-video__embedded-host-lobby {
+  background: var(--str-video__base-color4);
+}
+
+.str-video__embedded-viewer-lobby {
+  background: var(--str-video__base-color4);
+  color: var(--str-video__text-color2);
+
+  &__icon {
+    opacity: 0.6;
+  }
+
+  &__title {
+    color: var(--str-video__text-color1);
+  }
+
+  &__starts-at {
+    opacity: 0.7;
+  }
+
+  &__participant-count {
+    opacity: 0.6;
+  }
+
+  &__auto-join {
+    input[type='checkbox'] {
+      accent-color: var(--str-video__button-primary-active);
+    }
+  }
+
+  &__join-error {
+    color: var(--str-video__alert-warning);
+  }
+}

package/src/Embedded/livestream/index.scss

@@ -0,0 +1,2 @@
+@use 'Livestream-layout';
+@use 'Livestream-theme';

package/src/Embedded/shared/BlurToggleButton/BlurToggleButton-layout.scss

@@ -0,0 +1,26 @@
+.str-video__embedded-blur-toggle-container {
+  padding: var(--str-video__spacing-xl) var(--str-video__spacing-xl);
+}
+
+.str-video__embedded-blur-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-sm);
+  width: 100%;
+  padding: var(--str-video__spacing-sm);
+  border: none;
+  border-radius: var(--str-video__border-radius-circle);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  .str-video__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}

package/src/Embedded/shared/BlurToggleButton/BlurToggleButton-theme.scss

@@ -0,0 +1,21 @@
+.str-video__embedded-blur-toggle-container {
+  border-top: 1px solid var(--str-video__base-color3);
+}
+
+.str-video__embedded-blur-toggle {
+  background: transparent;
+  color: var(--str-video__text-color1);
+
+  &:hover:not(:disabled) {
+    background: var(--str-video__button-default-hover);
+  }
+
+  &--active {
+    background: var(--str-video__secondary-color);
+    color: var(--str-video__primary-color);
+
+    &:hover:not(:disabled) {
+      background: var(--str-video__secondary-color);
+    }
+  }
+}

package/src/Embedded/shared/BlurToggleButton/index.scss

@@ -0,0 +1,2 @@
+@use 'BlurToggleButton-layout';
+@use 'BlurToggleButton-theme';

package/src/Embedded/shared/CallControls/CallControls-layout.scss

@@ -0,0 +1,79 @@
+.str-video__embedded-call-duration {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-xxs);
+  white-space: nowrap;
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  &__time {
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.str-video__embedded-mobile {
+  display: contents;
+}
+
+.str-video__embedded-desktop {
+  display: none;
+}
+
+.str-video__embedded-call-controls.str-video__call-controls {
+  justify-content: center;
+  padding: var(--str-video__spacing-md);
+  gap: var(--str-video__spacing-xxs);
+
+  .str-video__call-controls--group {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--str-video__spacing-xxs);
+  }
+
+  .str-video__call-controls--options {
+    justify-content: flex-start;
+  }
+
+  .str-video__call-controls--media {
+    justify-content: center;
+  }
+
+  .str-video__call-controls--sidebar {
+    justify-content: flex-end;
+  }
+}
+
+@container (min-width: 700px) {
+  .str-video__embedded-mobile {
+    display: none;
+  }
+
+  .str-video__embedded-desktop {
+    display: contents;
+  }
+
+  .str-video__embedded-call-controls.str-video__call-controls {
+    justify-content: space-between;
+    padding: var(--str-video__spacing-lg);
+    gap: var(--str-video__spacing-sm);
+
+    .str-video__call-controls--group {
+      flex: 1;
+      gap: var(--str-video__spacing-sm);
+    }
+
+    .str-video__call-controls--media {
+      justify-content: center;
+    }
+
+    .str-video__call-controls--sidebar {
+      justify-content: flex-end;
+    }
+  }
+}

package/src/Embedded/shared/CallControls/CallControls-theme.scss

@@ -0,0 +1,14 @@
+.str-video__embedded-call-duration {
+  color: var(--str-video__text-color2);
+
+  &__icon {
+    background-color: var(--str-video__alert-success);
+  }
+}
+
+@container (min-width: 700px) {
+  .str-video__embedded-call-controls.str-video__call-controls {
+    background-color: var(--str-video__base-color7);
+    border-radius: var(--str-video__border-radius-xxl);
+  }
+}

package/src/Embedded/shared/CallControls/index.scss

@@ -0,0 +1,2 @@
+@use 'CallControls-layout';
+@use 'CallControls-theme';