@webitel/ui-sdk 1.0.23 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.23",
+  "version": "1.0.26",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-avatar/__tests__/wt-avatar.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtAvatar from '../wt-avatar.vue';
+
+describe('WtAvatar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAvatar);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/atoms/wt-avatar/wt-avatar.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="wt-avatar"
+    :class="[`wt-avatar--size-${size}`]"
+  >
+    <wt-badge
+      v-if="badge"
+      :color-variable="badgeColorVar"
+    ></wt-badge>
+    <img
+      class="wt-avatar__img"
+      src="../../../assets/components/atoms/wt-avatar/default-avatar.svg"
+      alt="avatar"
+    >
+  </div>
+</template>
+
+<script>
+import AbstractUserStatus from '../../../enums/AbstractUserStatus/AbstractUserStatus.enum';
+
+export default {
+  name: 'wt-avatar',
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      options: ['md'],
+    },
+    badge: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: String,
+      options: AbstractUserStatus,
+      default: AbstractUserStatus.OFFLINE,
+    },
+  },
+  computed: {
+    badgeColorVar() {
+      switch (this.status) {
+        case AbstractUserStatus.ACTIVE: return 'online-color';
+        case AbstractUserStatus.DND: return 'dnd-color';
+        case AbstractUserStatus.BUSY: return 'busy-color';
+        case AbstractUserStatus.OFFLINE: return 'offline-color';
+        default: return 'offline-color';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-avatar {
+    position: relative;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+
+    &__img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

package/src/components/atoms/wt-badge/__tests__/wt-badge.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtBadge);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -0,0 +1,39 @@
+<template>
+  <aside
+    class="wt-badge"
+    :class="{ 'wt-badge--outside': outside }"
+    :style="{ background: `var(--${colorVariable})` }"
+  ></aside>
+</template>
+
+<script>
+export default {
+  name: 'wt-badge',
+  props: {
+    colorVariable: {
+      type: String,
+      default: 'false-color',
+      description: 'see all available colors in webitel-ui docs',
+    },
+    outside: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--wt-badge-size);
+    height: var(--wt-badge-size);
+    border-radius: 50%;
+
+    &--outside {
+      transform: translate(-100%, -100%);
+    }
+  }
+</style>

package/src/components/index.js

@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import WtAvatar from './atoms/wt-avatar/wt-avatar.vue';
+import WtBadge from './atoms/wt-badge/wt-badge.vue';
 import WtIcon from './atoms/wt-icon/wt-icon.vue';
 import WtIndicator from './atoms/wt-indicator/wt-indicator.vue';
 import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
@@ -48,6 +50,8 @@ import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
 import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
 
 const Components = {
+  WtAvatar,
+  WtBadge,
   WtIcon,
   WtIndicator,
   WtInputInfo,

package/src/components/organisms/wt-player/wt-player.vue

@@ -1,13 +1,14 @@
 <template>
   <aside class="wt-player">
-    <audio
-      id="wt-player__player"
-      ref="audio"
+    <component
+      :is="playerType"
+      class="wt-player__player"
+      ref="player"
       :src="src"
       :autoplay="autoplay"
       controls
       v-on="listeners"
-    ></audio>
+    ></component>
 
     <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
     <wt-icon-btn
@@ -38,6 +39,19 @@ export default {
       type: [String, Function, Boolean],
       default: () => (url) => url.replace('/stream', '/download'),
     },
+    mime: {
+      type: String,
+      default: 'audio',
+    },
+    // plyr-specific options
+    resetOnEnd: {
+      type: Boolean,
+      default: false,
+    },
+    invertTime: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: () => ({
     player: null,
@@ -62,19 +76,26 @@ export default {
         ...this.$listeners,
       };
     },
+    playerType() {
+      return this.mime.includes('video') ? 'video' : 'audio';
+    },
   },
 
   methods: {
-    setupPlayer() {
+    async setupPlayer() {
+      await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref
       const baseURL = this.$baseURL || process.env.BASE_URL;
-      if (this.player) this.player.restart();
+      if (this.player) this.player.destroy();
       const controls = ['play-large', 'play', 'progress', 'current-time',
         'mute', 'volume', 'captions', 'settings', 'pip',
         'airplay', 'fullscreen'];
       if (this.download) controls.push('download');
-      this.player = new Plyr('#wt-player__player', {
+      this.player = new Plyr(this.$refs.player, {
+      // this.player = new Plyr('.wt-player__player', {
         autoplay: this.autoplay,
         loadSprite: false,
+        resetOnEnd: this.resetOnEnd,
+        invertTime: this.invertTime,
         iconUrl: `${baseURL}img/plyr.svg`,
         controls,
         loop: {
@@ -82,6 +103,7 @@ export default {
         },
       });
       this.appendCloseIcon();
+      this.$emit('initialized', this.player);
     },
     setupDownload() {
       if (!this.download) this.setupPlayer();
@@ -92,7 +114,7 @@ export default {
       }
     },
     appendCloseIcon() {
-      const plyrControls = this.$refs.audio.plyr?.elements?.controls;
+      const plyrControls = this.$refs.player.plyr?.elements?.controls;
       const closeIcon = this.$refs['close-icon'].$el;
       if (plyrControls) {
         plyrControls.append(closeIcon);
@@ -111,6 +133,7 @@ export default {
   bottom: 60px;
 
   .plyr {
+    max-width: 100%; // prevents <video> container overflow
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
   }
@@ -125,6 +148,10 @@ export default {
     color: var(--text-primary-color);
   }
 
+  .plyr__control--overlaid svg {
+    left: 0; // reset plyr style for video "play" button icon
+  }
+
   //.plyr__control[role='menuitemradio']::before,
   //.plyr__control[role='menuitemradio']:hover::before {
   //  border: 2px solid var(--secondary-color);

package/src/css/components/_components.scss

@@ -1,3 +1,5 @@
+@import 'atoms/wt-avatar/variables';
+@import 'atoms/wt-badge/variables';
 @import 'atoms/wt-chip/variables';
 @import "atoms/wt-button/variables";
 @import "atoms/wt-icon/variables";

package/src/css/components/atoms/wt-avatar/_variables.scss

@@ -0,0 +1,9 @@
+:root {
+  --avatar-size--md: var(--spacing-md);
+  --avatar-size: var(--avatar-size--md);
+
+  --online-color: var(--true-color);
+  --dnd-color: var(--accent-color);
+  --busy-color: var(--false-color);
+  --offline-color: var(--secondary-color);
+}

package/src/css/components/atoms/wt-badge/_variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --wt-badge-size: var(--spacing-xs);
+}

package/src/enums/AbstractUserStatus/AbstractUserStatus.enum.js

@@ -0,0 +1,8 @@
+const AbstractUserStatus = Object.freeze({
+                                           ACTIVE: 'active',
+                                           DND: 'dnd',
+                                           BUSY: 'busy',
+                                           OFFLINE: 'offline',
+                                         });
+
+export default AbstractUserStatus;