@hivegpt/hiveai-angular 0.0.375 → 0.0.380

package/src/lib/components/video-player/video-player.component.html

@@ -1,51 +1,51 @@
-<div class="video-wrapper" >
-  <div class="overlymask-video"></div>
-  <video (click)="toggleFullscreen()" #video [loop]="true" [muted]="isMuted" [src]="videoObj.processedUrls || videoObj.url" playsinline
-    [controls]="false"></video>
-    <div class="main-controls" [class.no-opacity]="video.isPlaying">
-      <button mat-icon-button  *ngIf="!videoObj.isPlaying"
-      attr.aria-label="Play Video"
-      title="Play Video" class="play-pause-btn"
-      (click)="togglePlay(true, video)">
-      <!-- <mat-icon alt="Play">play_arrow</mat-icon> -->
-      <span class="material-icons notranslate  " aria-hidden="true">play_circle_outline</span>
-    </button>
-
-    <button mat-icon-button id="pause-btn" [hidden]="!videoObj.isPlaying" class="pause_btn play-pause-btn playing"
-      title="Pause Video"
-      [class.half-opacity]="video.isPlaying" (click)="togglePlay(false, video)">
-      <!-- <mat-icon alt="Pause">pause</mat-icon> -->
-      <span class="material-icons notranslate  " aria-hidden="true">pause_circle_outline</span>
-    </button>
-    </div>
-  <div class="video-actions">
-    <button class="button-trasparent action" (click)="toggleSound()" title="Mute" *ngIf="isMuted">
-      <span class="material-icons notranslate  " aria-hidden="true">volume_off</span>
-    </button>
-    <button class="button-trasparent action" (click)="toggleSound()" title="Unmute" *ngIf="!isMuted">
-      <span class="material-icons notranslate  " aria-hidden="true">volume_up</span>
-    </button>
-
-  </div>
-</div>
-
-<div class="full-screen" *ngIf="isFullscreen" [ngClass]="{'show': isFullscreen}">
-  <div class="video-wrapper">
-    <video #fullscreenvideo (click)="toggleFullscreenPlay()" [loop]="true" [muted]="isMuted" [src]="videoObj.processedUrls || videoObj.url"
-      playsinline [controls]="false"></video>
-      <div (click)="toggleFullscreen()" class="close-btn">
-        <span class="material-icons notranslate  ">clear</span>
-      </div>
-    <div class="video-actions">
-      <button  *ngIf="!video.isPlaying" title="Play"
-      class="material-icons notranslate   body-text-color fs-h2 play position-absolute transparent-btn" (click)="togglePlay(true, video)">
-      play_circle_outline
-    </button>
-    <button id="pause-btn" [hidden]="!videoObj.isPlaying" title="Pause"
-      class="pause_btn material-icons body-text-color fs-h2 play position-absolute transparent-btn"
-      [class.half-opacity]="video.isPlaying" (click)="togglePlay(false, video)">
-      pause_circle_outline
-    </button>
-    </div>
-  </div>
-</div>
+<div class="video-wrapper" >
+  <div class="overlymask-video"></div>
+  <video (click)="toggleFullscreen()" #video [loop]="true" [muted]="isMuted" [src]="videoObj.processedUrls || videoObj.url" playsinline
+    [controls]="false"></video>
+    <div class="main-controls" [class.no-opacity]="video.isPlaying">
+      <button mat-icon-button  *ngIf="!videoObj.isPlaying"
+      attr.aria-label="Play Video"
+      title="Play Video" class="play-pause-btn"
+      (click)="togglePlay(true, video)">
+      <!-- <mat-icon alt="Play">play_arrow</mat-icon> -->
+      <span class="material-icons notranslate  " aria-hidden="true">play_circle_outline</span>
+    </button>
+
+    <button mat-icon-button id="pause-btn" [hidden]="!videoObj.isPlaying" class="pause_btn play-pause-btn playing"
+      title="Pause Video"
+      [class.half-opacity]="video.isPlaying" (click)="togglePlay(false, video)">
+      <!-- <mat-icon alt="Pause">pause</mat-icon> -->
+      <span class="material-icons notranslate  " aria-hidden="true">pause_circle_outline</span>
+    </button>
+    </div>
+  <div class="video-actions">
+    <button class="button-trasparent action" (click)="toggleSound()" title="Mute" *ngIf="isMuted">
+      <span class="material-icons notranslate  " aria-hidden="true">volume_off</span>
+    </button>
+    <button class="button-trasparent action" (click)="toggleSound()" title="Unmute" *ngIf="!isMuted">
+      <span class="material-icons notranslate  " aria-hidden="true">volume_up</span>
+    </button>
+
+  </div>
+</div>
+
+<div class="full-screen" *ngIf="isFullscreen" [ngClass]="{'show': isFullscreen}">
+  <div class="video-wrapper">
+    <video #fullscreenvideo (click)="toggleFullscreenPlay()" [loop]="true" [muted]="isMuted" [src]="videoObj.processedUrls || videoObj.url"
+      playsinline [controls]="false"></video>
+      <div (click)="toggleFullscreen()" class="close-btn">
+        <span class="material-icons notranslate  ">clear</span>
+      </div>
+    <div class="video-actions">
+      <button  *ngIf="!video.isPlaying" title="Play"
+      class="material-icons notranslate   body-text-color fs-h2 play position-absolute transparent-btn" (click)="togglePlay(true, video)">
+      play_circle_outline
+    </button>
+    <button id="pause-btn" [hidden]="!videoObj.isPlaying" title="Pause"
+      class="pause_btn material-icons body-text-color fs-h2 play position-absolute transparent-btn"
+      [class.half-opacity]="video.isPlaying" (click)="togglePlay(false, video)">
+      pause_circle_outline
+    </button>
+    </div>
+  </div>
+</div>

package/src/lib/components/video-player/video-player.component.scss

@@ -1,262 +1,262 @@
-.video-wrapper {
-  position: relative;
-  &:hover {
-    video {
-      //transform: scale(1.02);
-    }
-  }
-  video {
-    width: 100%;
-    height: 330px;
-    outline: 0;
-    object-fit: cover;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: 0.3s ease-in-out;
-    @media only screen and (max-width: 576px) {
-      //height: 75vh;
-    }
-  }
-  .video-actions {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    display: flex;
-    flex-direction: column;
-    .action {
-      margin-bottom: 5px;
-      cursor: pointer;
-      color: #fff;
-    }
-  }
-  .author-details {
-    display: flex;
-    position: absolute;
-    bottom: 18px;
-    left: 12px;
-    right: 12px;
-    transition: 0.3s ease-in-out;
-    justify-content: flex-start;
-    flex-direction: column;
-
-    .author-image {
-      // margin-bottom: 5px;
-      margin-right: 6px;
-      width: 34px;
-      height: 34px;
-      border-radius: 50%;
-      overflow: hidden;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-    .author-name {
-      font-size: 14px;
-      mix-blend-mode: hard-light;
-      color: #ffffff;
-      display: block;
-    }
-
-    .video-title{
-      font-size: 14px;
-      mix-blend-mode: hard-light;
-      color: #ffffff;
-      display: block;
-    }
-  }
-  .connect-btn {
-    width: 100%;
-    position: absolute;
-    bottom: 20px;
-    text-align: center;
-    outline: 0;
-    opacity: 0;
-    transition: 0.3s ease-in-out;
-    @media only screen and (max-width: 576px) {
-      opacity: 1;
-      width: unset;
-      right: 20px;
-    }
-
-    button {
-      margin: auto;
-    }
-  }
-  &:hover {
-    .author-details {
-      opacity: 0;
-      @media only screen and (max-width: 576px) {
-        opacity: 1;
-      }
-    }
-    .connect-btn {
-      opacity: 1;
-    }
-  }
-  .half-opacity {
-    opacity: 0.2;
-  }
-
-  .no-opacity {
-    background-color: transparent;
-  }
-}
-
-.like-btn {
-  text-align: center;
-  margin-bottom: 20px;
-  transition: 0.2s ease-in-out;
-  .count {
-    font-size: 16px;
-    margin-left: 3px;
-  }
-  span {
-    cursor: pointer;
-    font-size: 30px;
-  }
-  &:hover {
-    transform: scale(1.1);
-  }
-
-  &.like {
-    color: #025be7;
-  }
-  &.dislike {
-    color: #8d8d8d;
-  }
-  &.info {
-    color: #aeae3f;
-  }
-}
-
-.full-screen {
-  &.show {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #1b1a1af5;
-    z-index: 9999;
-    .video-wrapper {
-      video {
-        transition: none;
-        transform: none !important;
-        width: 300px;
-        height: 270px;
-      }
-    }
-  }
-  .close-btn {
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    cursor: pointer;
-    span {
-      color: #fff;
-    }
-  }
-}
-
-.main-controls {
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgb(0 0 0 / 30%);
-
-  .play-pause-btn {
-    // line-height: 0;
-    // color: #fff;
-    // display: flex;
-    // align-items: center;
-    // justify-content: center;
-    line-height: 0;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  position: absolute;
-  top: 34%;
-    &.playing {
-      position: absolute;
-      top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    span {
-      //font-size: 65px;
-      color: #fff;
-      text-shadow: 0px 0px 6px rgb(47 47 47 / 36%);
-    }
-    }
-    &:focus {
-      outline: none;
-    }
-
-    .material-icons {
-      font-size: 40px;
-    }
-
-    .mat-icon {
-      height: auto;
-      width: auto;
-    }
-  }
-  .half-opacity {
-    opacity: 0.2;
-  }
-
-  .no-opacity {
-    background-color: transparent;
-  }
-}
-
-button.transparent-btn {
-  background: transparent;
-  border: 0 !important;
-}
-
-.pause_btn {
-   width: 100%;
-   height: 100%;
-
-  &:hover {
-    opacity: 1 !important;
-    background-color: #000000bd;
-  }
-
-  opacity: 0.02 !important;
-}
-
-.hide-pause-btn {
-  opacity: 0 !important;
-}
-
-.no-photo{
-  height: 35px;
-  width: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-}
-.overlymask-video {
-  background-image: linear-gradient(#ffffff0f, #0000002e);
-  position: absolute;
-  width: 100%;
-  height: 275px;
-  z-index: 0;
-  background-position: 0 bottom;
-}
+.video-wrapper {
+  position: relative;
+  &:hover {
+    video {
+      //transform: scale(1.02);
+    }
+  }
+  video {
+    width: 100%;
+    height: 330px;
+    outline: 0;
+    object-fit: cover;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+    @media only screen and (max-width: 576px) {
+      //height: 75vh;
+    }
+  }
+  .video-actions {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: flex;
+    flex-direction: column;
+    .action {
+      margin-bottom: 5px;
+      cursor: pointer;
+      color: #fff;
+    }
+  }
+  .author-details {
+    display: flex;
+    position: absolute;
+    bottom: 18px;
+    left: 12px;
+    right: 12px;
+    transition: 0.3s ease-in-out;
+    justify-content: flex-start;
+    flex-direction: column;
+
+    .author-image {
+      // margin-bottom: 5px;
+      margin-right: 6px;
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .author-name {
+      font-size: 14px;
+      mix-blend-mode: hard-light;
+      color: #ffffff;
+      display: block;
+    }
+
+    .video-title{
+      font-size: 14px;
+      mix-blend-mode: hard-light;
+      color: #ffffff;
+      display: block;
+    }
+  }
+  .connect-btn {
+    width: 100%;
+    position: absolute;
+    bottom: 20px;
+    text-align: center;
+    outline: 0;
+    opacity: 0;
+    transition: 0.3s ease-in-out;
+    @media only screen and (max-width: 576px) {
+      opacity: 1;
+      width: unset;
+      right: 20px;
+    }
+
+    button {
+      margin: auto;
+    }
+  }
+  &:hover {
+    .author-details {
+      opacity: 0;
+      @media only screen and (max-width: 576px) {
+        opacity: 1;
+      }
+    }
+    .connect-btn {
+      opacity: 1;
+    }
+  }
+  .half-opacity {
+    opacity: 0.2;
+  }
+
+  .no-opacity {
+    background-color: transparent;
+  }
+}
+
+.like-btn {
+  text-align: center;
+  margin-bottom: 20px;
+  transition: 0.2s ease-in-out;
+  .count {
+    font-size: 16px;
+    margin-left: 3px;
+  }
+  span {
+    cursor: pointer;
+    font-size: 30px;
+  }
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &.like {
+    color: #025be7;
+  }
+  &.dislike {
+    color: #8d8d8d;
+  }
+  &.info {
+    color: #aeae3f;
+  }
+}
+
+.full-screen {
+  &.show {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #1b1a1af5;
+    z-index: 9999;
+    .video-wrapper {
+      video {
+        transition: none;
+        transform: none !important;
+        width: 300px;
+        height: 270px;
+      }
+    }
+  }
+  .close-btn {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    cursor: pointer;
+    span {
+      color: #fff;
+    }
+  }
+}
+
+.main-controls {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 30%);
+
+  .play-pause-btn {
+    // line-height: 0;
+    // color: #fff;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    line-height: 0;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  position: absolute;
+  top: 34%;
+    &.playing {
+      position: absolute;
+      top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    span {
+      //font-size: 65px;
+      color: #fff;
+      text-shadow: 0px 0px 6px rgb(47 47 47 / 36%);
+    }
+    }
+    &:focus {
+      outline: none;
+    }
+
+    .material-icons {
+      font-size: 40px;
+    }
+
+    .mat-icon {
+      height: auto;
+      width: auto;
+    }
+  }
+  .half-opacity {
+    opacity: 0.2;
+  }
+
+  .no-opacity {
+    background-color: transparent;
+  }
+}
+
+button.transparent-btn {
+  background: transparent;
+  border: 0 !important;
+}
+
+.pause_btn {
+   width: 100%;
+   height: 100%;
+
+  &:hover {
+    opacity: 1 !important;
+    background-color: #000000bd;
+  }
+
+  opacity: 0.02 !important;
+}
+
+.hide-pause-btn {
+  opacity: 0 !important;
+}
+
+.no-photo{
+  height: 35px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.overlymask-video {
+  background-image: linear-gradient(#ffffff0f, #0000002e);
+  position: absolute;
+  width: 100%;
+  height: 275px;
+  z-index: 0;
+  background-position: 0 bottom;
+}