@openveo/portal/assets/views/video.html

OpenVeo Portal gives access to medias exposed by OpenVeo server associated to an OpenVeo Publish plugin

<md-content ng-controller="VideoController as vctl" class="video">

  <!-- Player -->
  <div class="player-container" ng-class="{'md-dialog-content' : !dialogIsFull}">
    <opl-player opl-template="{{defaultMode}}"
               opl-player-type="{{playerType}}"
               opl-data="video"
               opl-language="{{language}}"
               opl-start-time="{{start}}"
               id="openveo-player">
    </opl-player>
  </div>

  <div ng-if="!hideDetailVideo" class="video-infos md-dialog-content">

    <!-- Main video informations (title, date…) -->
    <div layout="row" layout-align="space-between center">
      <div layout="column">
        <span class="md-headline">{{video.title}}</span>
        <div flex class="md-caption subtitle-infos">
          <span>{{video.date| date: 'longDate'}}</span>
          <span>{{video.views ? video.views : 0}} {{ (video.views > 1 ? 'UI.VIEW.PLURAL':'UI.VIEW.SINGLE')|translate }}</span>
        </div>
      </div>
      <md-fab-speed-dial md-direction="left" class="md-scale" md-open="vctl.dialIsOpen" ng-mouseenter="vctl.dialIsOpen=true" ng-mouseleave="vctl.dialIsOpen=false">
        <md-fab-trigger>
          <md-button aria-label="{{'UI.SHARE' | translate}}" class="md-fab md-mini">
            <md-tooltip md-direction="bottom" md-z-index="1">{{'UI.SHARE' | translate}}</md-tooltip>
            <md-icon>share</md-icon>
          </md-button>
        </md-fab-trigger>
        <md-fab-actions>
          <md-button aria-label="{{item.name | translate}}"
                     class="md-fab md-raised md-mini"
                     ng-click="item.action(video)"
                     ng-repeat="item in shareItems">
            <md-tooltip md-direction="{{item.direction}}" md-autohide="false" md-z-index="1">
              {{item.name | translate}}
            </md-tooltip>
            <md-icon aria-label="{{item.name | translate}}">{{item.icon}}</md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </div>

    <div ng-show="shareOpen" class="share-code collapse ng-hide">
      <md-divider ng-show="shareOpen"></md-divider>
      <div>
        <code ng-if="shareLink">{{shareLink}}</code>
        <code ng-if="shareText">{{shareText}}</code>
      </div>
      <md-divider ng-show="shareOpen"></md-divider>
    </div>

    <!-- Video short description -->
    <div class="description md-body-1" ng-if="video.leadParagraph && video.leadParagraph.length > 0" ng-bind-html="trustedHTML(video.leadParagraph)"></div>

    <!-- Collapsed video informations -->
    <div ng-show="showFullInfos" class="video-full-infos collapse">
      <div class="description md-body-1" ng-if="video.description && video.description.length > 0" ng-bind-html="trustedHTML(video.description)"></div>
      <div flex layout="row" layout-align="left center" ng-if="categoryName">
        <label class="md-caption" ng-bind="'SEARCH.CATEGORY_FILTER' | translate"></label>
        <p class="md-caption" ng-bind="categoryName"></p>
      </div>
    </div>

    <!-- Toggle collapsed video informations button -->
    <div flex layout="row" layout-align="center center">
      <md-button class="toggle-btn md-fab md-mini" ng-if="(video.description && video.description.length > 0) || categoryName" ng-class="showFullInfos ? 'opened':'closed'" ng-click="toggleFullInfos()" aria-label="{{toggleFullInfosLabel|translate}}">
        <md-tooltip md-autohide="true" md-direction="right" ng-bind="toggleFullInfosLabel|translate"></md-tooltip>
        <md-icon>keyboard_arrow_up</md-icon>
      </md-button>
    </div>

  </div>
</md-content>