@rtsee/ngx 0.0.56 → 0.0.58

package/projects/ngx/src/lib/theme/messenger/messenger.scss

@@ -0,0 +1,100 @@
+@import "./variables";
+
+$control-icon-size: 18px;
+
+* {
+  box-sizing: border-box;
+}
+
+.rtsee-messenger {
+  height: 100%;
+  width: 100%;
+  padding-top: $rts-messenger-header-height;
+  color: $rts-font-color-dark;
+  position: relative;
+  border-radius: $rts-default-border-radius;
+  overflow: hidden;
+  background-color: $rts-main-bg-color-light;
+
+  .rtsee-messenger-overlay {
+    display: none;
+    background-color: rgba(0,0,0,0.8);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.rtsee-messenger-main-menu-opened {
+    .rtsee-messenger-main-menu-container {
+      top: $rts-messenger-header-height;
+    }
+
+    .rtsee-messenger-overlay {
+      display: block;
+    }
+  }
+
+  &.rtsee-messenger-header-expanded {
+    .rtsee-messenger-header-container {
+      height: 100%;
+      padding: 0;
+      z-index: 1;
+    }
+  }
+
+
+  .rtsee-messenger-header-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: $rts-messenger-header-height;
+  }
+
+  .rtsee-messenger-body-container {
+    height: 100%;
+    overflow: auto;
+    position: relative;
+  }
+
+  .rtsee-messenger-main-menu-container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: calc(100% - #{$rts-messenger-header-height});
+    background-color: $rts-main-bg-color-light;
+    z-index: 1;
+  }
+
+   // new styles
+
+  .rtsee-messenger-main-menu, .rtsee-messenger-profile {
+    .rtsee-messenger-controls, .rtsee-messenger-profile-controls {
+      list-style-type: none;
+      padding-inline-start: $rts-new-offset-sm;
+      .rtsee-messenger-control-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+        color: $rts-font-color-dbg-light;
+        text-shadow: 1px 1px 2px black;
+      }
+
+      .rtsee-messenger-control-icon {
+        display: flex;
+        align-items: center;
+        height: $control-icon-size;
+        width: $control-icon-size;
+        justify-content: center;
+        background: $rts-new-secondary-bg-color-light;
+        border-radius: 50%;
+        padding: $rts-new-offset-sm;
+        margin-right: $rts-new-offset-sm;
+        color: $rts-new-primary-color;
+      }
+    }
+  }
+}

package/projects/ngx/src/lib/theme/messenger/variables.scss

@@ -0,0 +1,4 @@
+@import "../common-variables";
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;

package/projects/ngx/src/lib/theme/presentation/index.scss

@@ -0,0 +1,3 @@
+@import "./story-thumbnail";
+@import "./slide";
+@import "./story-player";

package/projects/ngx/src/lib/theme/presentation/slide.scss

@@ -0,0 +1,14 @@
+@import "./variables";
+
+.rtsee-presentation-slide {
+  background-color: $rts-main-bg-color-light;
+  .rtsee-presentation-slide-default {
+    .rtsee-presentation-slide-image-container {
+      padding-bottom: 100%;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+  }
+
+  padding-bottom: $rts-bottom-nav-height;
+}

package/projects/ngx/src/lib/theme/presentation/story-player.scss

@@ -0,0 +1,11 @@
+.rtsee-story-player {
+  .rtsee-story-player-slider {
+    .story-player-slide-container {
+      display: none;
+
+      &.story-player-slide-active {
+        display: block;
+      }
+    }
+  }
+}

package/projects/ngx/src/lib/theme/presentation/story-thumbnail.scss

@@ -0,0 +1,59 @@
+@import "./variables";
+
+.rtsee-presentation-stories-list {
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  padding: $rts-offset-sm;
+
+  .rtsee-presentation-story-thumbnail-container {
+    display: inline-block;
+    width: 128px;
+    margin-right: $rts-offset-sm;
+    vertical-align: top;
+
+    .rtsee-story-thumbnail {
+      border-radius: $rts-default-border-radius;
+      background-color: #fff;
+      overflow: hidden;
+
+      .rtsee-story-thumbnail-image-container {
+        padding-bottom: 100%;
+        background-size: cover;
+        background-repeat: no-repeat;
+        overflow: hidden;
+      }
+
+      .rtsee-story-thumbnail-body-container {
+        padding: 4px;
+        height: 111px;
+
+        .rtsee-story-thumbnail-title-container {
+          .rtsee-story-thumbnail-title {
+            margin: 0 0 $rts-offset-sm 0;
+            white-space: normal;
+            color: #333;
+          }
+        }
+
+        .rtsee-story-thumbnail-info-container {
+          .rtsee-story-thumbnail-info-time-icon {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+
+
+
+
+

package/projects/ngx/src/lib/theme/presentation/variables.scss

@@ -0,0 +1 @@
+@import "../common-variables";

package/projects/ngx/src/lib/theme/styles.scss

@@ -0,0 +1,8 @@
+@import "./general";
+@import "./common";
+@import "./messenger/index";
+@import "./events-manager/index";
+@import "./video-chat/index";
+@import "./presentation/index";
+@import "./containers/index";
+@import "./auth/index";

package/projects/ngx/src/lib/theme/video-chat/index.scss

@@ -0,0 +1,2 @@
+@import "./video-chat";
+@import "./video-peer";

package/projects/ngx/src/lib/theme/video-chat/video-chat.scss

@@ -0,0 +1,264 @@
+$own-video-divider: 4;
+$own-video-expanded-divider: 0.66;
+$expanded-video-container-width: $video-container-width * $own-video-expanded-divider;
+$expanded-video-container-height: $video-container-height * $own-video-expanded-divider;
+$container-background-dark: #333;
+$container-background-light: #fff;
+$own-video-container-width: $video-container-width / $own-video-divider;
+$own-video-container-height: $video-container-height / $own-video-divider;
+$container-offset: 16px;
+$container-inner-offset: 8px;
+$controls-panel-height: 60px;
+$expanded-controls-panel-height: 84px;
+$select-border-radius: 4px;
+$border-radius: 8px;
+$expanded-peer-wrapper-offset: 4px;
+
+.rtsee-conference-shell {
+  background-color: $container-background-dark;
+  width: 100%;
+  height: $video-container-height;
+  overflow: hidden;
+  position: relative;
+
+  &:hover {
+    .rtsee-controls-wrapper {
+      bottom: 8px;
+    }
+
+    .rtsee-window-controls {
+      top: $container-inner-offset;
+    }
+  }
+
+  .rtsee-local-peer {
+    position: absolute;
+    top: $container-inner-offset;
+    left: $container-inner-offset;
+    width: $own-video-container-width;
+    height: $own-video-container-height;
+    z-index: 1;
+    text-align: center;
+
+    .rtsee-local-video {
+      max-width: 100%;
+      border-radius: $border-radius;
+    }
+  }
+
+  .rtsee-screen-share {
+    height: 100%;
+
+    .rtsee-screen-share-video {
+      width: 100%;
+      height: calc(100% - 50px);
+    }
+  }
+
+  .rtsee-peers {
+    height: 100%;
+
+    .rtsee-peer-wrapper {
+      box-sizing: border-box;
+      height: 100%;
+
+      .rtsee-peer {
+        position: relative;
+
+        .rtsee-peer-video {
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+
+  .rtsee-controls-wrapper {
+    height: $controls-panel-height;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: - $controls-panel-height;
+    transition: bottom 0.1s;
+    text-align: center;
+  }
+
+  .rtsee-window-controls {
+    position: absolute;
+    top: - $controls-panel-height;
+    right: $container-inner-offset;
+    transition: top 0.1s;
+    z-index: 4;
+
+    .rtsee-window-controls-button {
+      margin-left: $container-inner-offset;
+      background-color: rgba(0,0,0,0.7);
+      color: #ffffff;
+    }
+  }
+
+  .rtsee-settings-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    z-index: 4;
+  }
+
+  &.rtsee-conference-shell-no-companions {
+    .rtsee-local-peer {
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .rtsee-close-settings-button {
+    position: absolute;
+    right: 25px;
+    top: 5px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  &.rtsee-conference-shell-expanded {
+    position: fixed;
+    border-radius: 0;
+    max-width: unset;
+    height: unset;
+    width: unset;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    top: 0;
+
+    &:hover {
+      .rtsee-controls-wrapper {
+        bottom: $container-offset;
+      }
+
+      .rtsee-window-controls {
+        top: $container-offset;
+        right: $container-offset;
+      }
+    }
+
+    .rtsee-local-peer {
+      top: unset;
+      left: unset;
+      width: $expanded-video-container-width;
+      height: $expanded-video-container-height;
+      bottom: $container-offset;
+      right: $container-offset;
+      padding: 0;
+      z-index: 5;
+    }
+
+    .rtsee-peers {
+      width: 100%;
+      height: 100%;
+      display: table;
+      table-layout: fixed;
+
+      .rtsee-peer-wrapper {
+        display: table-cell;
+        vertical-align: middle;
+
+        .rtsee-peer-video {
+          border-radius: 0;
+        }
+      }
+
+      &.rtsee-peers-one {
+        .rtsee-peer-wrapper {
+          width: 100%;
+          height: 100%;
+
+          .rtsee-peer {
+            height: 70%;
+            position: relative;
+          }
+        }
+      }
+
+      &.rtsee-peers-three-grid {
+        .rtsee-peer-wrapper {
+          width: 50%;
+          height: 100%;
+
+
+          .rtsee-peer {
+            height: 70%;
+            position: relative;
+          }
+
+        }
+      }
+
+      &.rtsee-peers-six-grid {
+        .rtsee-peer-wrapper {
+          width: 33.3%;
+          height: 50%;
+          float: left;
+        }
+      }
+
+      &.rtsee-conference-shell-no-companions {
+        .rtsee-local-peer {
+          height: 100%;
+          max-width: 100%;
+        }
+      }
+    }
+
+    .rtsee-controls-wrapper {
+      height: $expanded-controls-panel-height;
+      bottom: -$expanded-controls-panel-height;
+    }
+  }
+
+  .rtsee-ripple-button {
+    background-position: center;
+    transition: background 0.2s;
+    outline: none;
+
+    &:hover {
+      background: rgba(245,245,245,.1) radial-gradient(circle, transparent 1%, rgba(245,245,245,.1) 1%) center/15000%;
+    }
+    &:active {
+      background-size: 100%;
+      transition: background 0s;
+    }
+  }
+
+  .rtsee-select {
+    padding: $container-inner-offset;
+    border-radius: $select-border-radius;
+    width: 100%;
+    outline: none;
+  }
+
+  .material-icons-outlined {
+    font-size: 18px;
+  }
+
+  &.rtsee-conference-shell-expanded {
+    .material-icons-outlined {
+      font-size: 24px;
+    }
+
+    .rtsee-ripple-button {
+      height: 60px;
+      width: 60px;
+      line-height: 45px;
+    }
+  }
+}
+
+
+

package/projects/ngx/src/lib/theme/video-chat/video-peer.scss

@@ -0,0 +1,71 @@
+$peer-photo-d: 120px;
+$full-mode-peer-photo-d: 100px;
+$inner-offset: 5px;
+$peer-background: #404040;
+
+.rtsee-peer {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  .rtsee-peer-content {
+    height: 100%;
+    text-align: center;
+    background-color: $peer-background;
+    border-radius: 4px;
+
+    .rtsee-peer-photo {
+      .rtsee-peer-photo-wrapper {
+        display: inline-block;
+        height: $peer-photo-d;
+        width: $peer-photo-d;
+        border-radius: 50%;
+        position: relative;
+        border: 0 solid #ffffff;
+
+        .rtsee-peer-photo-image {
+          border: 0 solid #fff;
+          height: 100%;
+          left: 0;
+          background-size: cover;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .rtsee-peer-info {
+      color: #ffffff;
+
+      .rtsee-peer-name {
+        font-family: monospace;
+        padding: 8px 0 0 0;
+        margin-top: -8px;
+      }
+    }
+
+    .rtsee-peer-soundbar {
+      position: absolute;
+      right: 16px;
+      bottom: 16px;
+      background: #404040;
+      padding: 7px 6px 8px;
+      border-radius: 50%;
+      border: 1px solid;
+    }
+  }
+
+  .rtsee-peer-video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    max-width: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.rtsee-peer-video-disabled {
+    .rtsee-peer-video {
+      position: absolute;
+      left: - 3000px;
+    }
+  }
+}

package/{dist/ngx/public-api.d.ts → projects/ngx/src/public-api.ts}

@@ -1,6 +1,13 @@
+/*
+ * Public API Surface of ngx
+ */
+
 export * from './lib/ngx.service';
 export * from './lib/components/rtsee/rtsee-controls/rtsee-controls.component';
+export * from './lib/components/rtsee-settings/rtsee-settings.component';
 export * from './lib/components/rtsee/rtsee-conference.component';
+export * from './lib/components/rtsee-peer/rtsee-peer.component';
+export * from './lib/components/rtsee-messenger/profile/profile.component';
 export * from './lib/components/rtsee-messenger/messenger/messenger.component';
 export * from './lib/components/rtsee-events-dashboard/rtsee-events-dashboard.component';
 export * from './lib/components/rtsee-container/rtsee-container.component';

package/projects/ngx/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}

package/projects/ngx/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/ngx/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jest"]
+  },
+  "files": ["src/test.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

package/projects/ngx/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+tslib@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==

package/scss-bundle.config.json

@@ -0,0 +1,6 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./projects/ngx/src/lib/common/scss/styles.scss",
+    "outFile": "./projects/ngx/src/lib/common/compiled-scss/styles.scss"
+  }
+}

package/setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules"]
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "paths": {
+      "ngx": [
+        "./dist/ngx"
+      ]
+    },
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "references": [
+    {
+      "path": "./projects/ngx/tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "types": ["jest"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}