Fix upnext, refactor avatar menu, add to playlist overflow

2019-12-20 17:49:57 +01:00 · 2019-12-20 17:49:57 +01:00 · 223b24e618
parent 1dc240a948
commit 223b24e618
13 changed files with 108 additions and 51 deletions
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@ -23,7 +23,7 @@
          <span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>

          <my-user-moderation-dropdown
-            buttonSize="small" [account]="account" [user]="user"
+            buttonSize="small" [account]="account" [user]="user" placement="bottom-right auto"
            (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
          >
          </my-user-moderation-dropdown>
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@ -25,7 +25,7 @@
      </div>
    </div>

-    <div *ngIf="!loaded" class="loader">
+    <div *ngIf="!loaded" class="loader mt-4">
      <my-loader [loading]="!loaded"></my-loader>
    </div>

--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@ -45,7 +45,7 @@
        align-items: center;
        padding: 0 10px;
        font-size: 16px;
-        height: 50px;
+        min-height: 50px;

        a {
          @include disable-default-a-behaviour;
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@ -5,8 +5,10 @@
        <my-avatar-notification [user]="user"></my-avatar-notification>

        <div class="logged-in-info">
-          <a routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
-          <div class="logged-in-username">{{ user.username }}</div>
+          <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
+          <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
+
+          <div ngxClipboard [cbContent]="user.account?.nameWithHost" class="logged-in-username">{{ user.username }}</div>
        </div>

        <div class="logged-in-more" ngbDropdown placement="bottom-right auto">
@ -14,13 +16,21 @@

          <div ngbDropdownMenu>
            <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="dropdown-item">
-              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>My public profile</ng-container>
+              <my-global-icon iconName="go"></my-global-icon> <ng-container i18n>Public profile</ng-container>
            </a>

+            <div class="dropdown-divider"></div>
+
            <a routerLink="/my-account" class="dropdown-item">
-              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>My account</ng-container>
+              <my-global-icon iconName="user"></my-global-icon> <ng-container i18n>Account settings</ng-container>
            </a>

+            <a routerLink="/my-account/video-channels" class="dropdown-item">
+              <my-global-icon iconName="folder"></my-global-icon> <ng-container i18n>Channels settings</ng-container>
+            </a>
+
+            <div class="dropdown-divider"></div>
+
            <a (click)="logout($event)" class="dropdown-item" href="#">
              <my-global-icon iconName="sign-out"></my-global-icon> <ng-container i18n>Log out</ng-container>
            </a>
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@ -69,6 +69,7 @@ menu {
        font-size: 13px;
        color: #C6C6C6;
        max-width: 140px;
+        cursor: pointer;
      }
    }

--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@ -169,6 +169,26 @@ function importModule (path: string) {
  })
 }

+function isInViewport (el: HTMLElement) {
+  const bounding = el.getBoundingClientRect()
+  return (
+      bounding.top >= 0 &&
+      bounding.left >= 0 &&
+      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
+  const rect = el.getBoundingClientRect()
+  const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
+
+  return !(
+    Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
+    Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
+  )
+}
+
 export {
  sortBy,
  durationToString,
@ -183,5 +203,7 @@ export {
  objectLineFeedToHtml,
  removeElementFromArray,
  importModule,
-  scrollToTop
+  scrollToTop,
+  isInViewport,
+  isXPercentInViewport
 }
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@ -41,14 +41,16 @@
    </div>
  </div>

-  <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
-    <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
+  <div class="playlists">
+    <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
+      <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>

-    <div class="display-name">
-      {{ playlist.displayName }}
+      <div class="display-name">
+        {{ playlist.displayName }}

-      <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
-        {{ formatTimestamp(playlist) }}
+        <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
+          {{ formatTimestamp(playlist) }}
+        </div>
      </div>
    </div>
  </div>
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@ -1,11 +1,6 @@
@import '_variables';
@import '_mixins';

-.root {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
 .header {
  min-width: 240px;
  padding: 6px 24px 10px 24px;
@ -53,6 +48,11 @@
  padding: 6px 24px;
 }

+.playlists {
+  max-height: 180px;
+  overflow-y: auto;
+}
+
 .playlist {
  display: flex;
  cursor: pointer;
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@ -114,9 +114,9 @@
                  ></my-video-actions-dropdown>
                </div>

-                <div class="video-info-likes-dislikes-bar-outerContainer">
+                <div class="video-info-likes-dislikes-bar-outer-container">
                  <div
-                    class="video-info-likes-dislikes-bar-innerContainer"
+                    class="video-info-likes-dislikes-bar-inner-container"
                    *ngIf="video.likes !== 0 || video.dislikes !== 0"
                    [ngbTooltip]="likesBarTooltipText"
                    placement="bottom"
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@ -297,13 +297,13 @@ $video-info-margin-left: 44px;
          }
        }

-        .video-info-likes-dislikes-bar-outerContainer {
+        .video-info-likes-dislikes-bar-outer-container {
          position: relative;
        }

-        .video-info-likes-dislikes-bar-innerContainer {
+        .video-info-likes-dislikes-bar-inner-container {
          position: absolute;
-          height: 30px;
+          height: 20px;
        }

        .video-info-likes-dislikes-bar {
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@ -37,7 +37,7 @@ import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { PlatformLocation } from '@angular/common'
 import { RecommendedVideosComponent } from '../recommendations/recommended-videos.component'
-import { scrollToTop } from '@app/shared/misc/utils'
+import { scrollToTop, isInViewport, isXPercentInViewport } from '@app/shared/misc/utils'

@Component({
  selector: 'my-video-watch',
@ -478,12 +478,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {

      /**
       * replaces this.player.one('ended')
-       * define 'condition(next)' to return true to wait, false to stop
+       * 'condition()': true to make the upnext functionality trigger,
+       *                false to disable the upnext functionality
+       * go to the next video in 'condition()' if you don't want of the timer.
+       * 'next': function triggered at the end of the timer.
+       * 'suspended': function used at each clic of the timer checking if we need
+       * to reset progress and wait until 'suspended' becomes truthy again.
       */
      this.player.upnext({
        timeout: 10000, // 10s
        headText: this.i18n('Up Next'),
        cancelText: this.i18n('Cancel'),
+        suspendedText: this.i18n('Autoplay is suspended'),
        getTitle: () => this.nextVideoTitle,
        next: () => this.zone.run(() => this.autoplayNext()),
        condition: () => {
@ -496,6 +502,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
            return true // upnext will trigger
          }
          return false // upnext will not trigger, and instead leave the video stopping
+        },
+        suspended: () => {
+          return (
+            !isXPercentInViewport(this.player.el(), 80) ||
+            !document.getElementById('content').contains(document.activeElement)
+          )
        }
      })

--- a/client/src/assets/player/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/upnext/upnext-plugin.ts
@ -18,6 +18,7 @@ function getMainTemplate (options: any) {
      <span class="vjs-upnext-cancel">
        <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
      </span>
+      <span class="vjs-upnext-suspended">${options.suspendedText}</span>
    </span>
  `
 }
@ -26,40 +27,34 @@ function getMainTemplate (options: any) {
 const Component = videojs.getComponent('Component')
 class EndCard extends Component {
  options_: any
-  getTitle: Function
-  next: Function
-  condition: Function
  dashOffsetTotal = 586
  dashOffsetStart = 293
  interval = 50
  upNextEvents = new videojs.EventTarget()
-  chunkSize: number
+  ticks = 0
+  totalTicks: number

  container: HTMLElement
  title: HTMLElement
  autoplayRing: HTMLElement
  cancelButton: HTMLElement
+  suspendedMessage: HTMLElement
  nextButton: HTMLElement

  constructor (player: videojs.Player, options: any) {
    super(player, options)
-    this.options_ = options

-    this.getTitle = this.options_.getTitle
-    this.next = this.options_.next
-    this.condition = this.options_.condition
-
-    this.chunkSize = (this.dashOffsetTotal - this.dashOffsetStart) / (this.options_.timeout / this.interval)
+    this.totalTicks = this.options_.timeout / this.interval

    player.on('ended', (_: any) => {
-      if (!this.condition()) return
+      if (!this.options_.condition()) return

      player.addClass('vjs-upnext--showing')
      this.showCard((canceled: boolean) => {
        player.removeClass('vjs-upnext--showing')
        this.container.style.display = 'none'
        if (!canceled) {
-          this.next()
+          this.options_.next()
        }
      })
    })
@ -81,6 +76,7 @@ class EndCard extends Component {
    this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0]
    this.title = container.getElementsByClassName('vjs-upnext-title')[0]
    this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0]
+    this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0]
    this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0]

    this.cancelButton.onclick = () => {
@ -96,14 +92,11 @@ class EndCard extends Component {

  showCard (cb: Function) {
    let timeout: any
-    let start: number
-    let now: number
-    let newOffset: number

    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)

-    this.title.innerHTML = this.getTitle()
+    this.title.innerHTML = this.options_.getTitle()

    this.upNextEvents.one('cancel', () => {
      clearTimeout(timeout)
@ -120,23 +113,32 @@ class EndCard extends Component {
      cb(false)
    })

-    const update = () => {
-      now = this.options_.timeout - (new Date().getTime() - start)
+    const goToPercent = (percent: number) => {
+      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
+      this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
+    }

-      if (now <= 0) {
+    const tick = () => {
+      goToPercent((this.ticks++) * 100 / this.totalTicks)
+    }
+
+    const update = () => {
+      if (this.options_.suspended()) {
+        this.suspendedMessage.innerText = this.options_.suspendedText
+        goToPercent(0)
+        this.ticks = 0
+        timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
+      } else if (this.ticks >= this.totalTicks) {
        clearTimeout(timeout)
        cb(false)
      } else {
-        const strokeDashOffset = parseInt(this.autoplayRing.getAttribute('stroke-dashoffset'), 10)
-        newOffset = Math.max(-this.dashOffsetTotal, strokeDashOffset - this.chunkSize)
-        this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
+        this.suspendedMessage.innerText = ''
+        tick()
        timeout = setTimeout(update.bind(this), this.interval)
      }
-
    }

    this.container.style.display = 'block'
-    start = new Date().getTime()
    timeout = setTimeout(update.bind(this), this.interval)
  }
 }
@ -153,7 +155,9 @@ class UpNextPlugin extends Plugin {
      timeout: options.timeout || 5000,
      cancelText: options.cancelText || 'Cancel',
      headText: options.headText || 'Up Next',
-      condition: options.condition
+      suspendedText: options.suspendedText || 'Autoplay is suspended',
+      condition: options.condition,
+      suspended: options.suspended
    }

    super(player, settings)
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@ -40,12 +40,18 @@ $browser-context: 16;
    margin-top: 52px;
  }

+  .vjs-upnext-suspended,
  .vjs-upnext-cancel {
    display: block;
    float: none;
    text-align: center;
  }

+  .vjs-upnext-suspended {
+    font-size: 50%;
+    margin-top: 1rem;
+  }
+
  .vjs-upnext-headtext {
    display: block;
    font-size: 14px;