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

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

<div ng-cloak class="home">

  <!-- Title + search engine -->
  <div layout-xs="column" layout-gt-xs="row">
    <h1 class="md-headline" hide-gt-xs ng-bind="'HOME.TITLE' | translate"></h1>
    <h1 class="md-headline" hide-xs ng-bind="'HOME.TITLE' | translate"></h1>

    <span flex></span>

    <form ng-submit="searchSubmit()"
          name="searchForm"
          layout="row"
          layout-align="center center"
          flex-xs="95"
          flex-sm="50"
          flex-md="32"
          flex-gt-md="30"
          analytics-on analytics-event="HomeSearch">
      <md-input-container flex="80" class="md-body-1">
        <label ng-bind="'SEARCH.KEYWORD'|translate"></label>
        <input ng-model="search.query">
      </md-input-container>

      <md-button class="md-icon-button" type="submit" id="submit">
        <md-tooltip md-direction="top" md-z-index="1">{{'UI.SEARCH' | translate}}</md-tooltip>
        <md-icon material-icons md-light md-48>search</md-icon>
      </md-button>
    </form>
  </div>

  <!-- Grid of videos -->
  <md-grid-list md-cols-xs="1"
                md-cols-sm="3"
                md-cols-gt-sm="4"
                md-row-height="16:9"
                md-gutter="12px"
                md-gutter-gt-sm="25px">
    <md-grid-tile ng-repeat="video in videos"
                  ng-click="openVideo($event, video)"
                  md-rowspan-gt-xs="{{$index > 0 ? 1 : 2}}"
                  md-colspan-gt-xs="{{$index > 0 ? 1 : 2}}"
                  md-colspan-xs="1"
                  md-rowspan-xs="1"
                  analytics-on="click"
                  analytics-event="OpenVideo">
      <div class="tile-layout" layout="column" layout-align="space-between none">
        <div flex>
          <img check-image ng-src="{{video.thumbnail}}">
          <div class="play">
            <md-icon material-icons md-light>play_circle_outline</md-icon>
          </div>
        </div>

        <md-grid-tile-footer>
          <div class="md-body-2 title" flex>{{video.title}}</div>
          <div flex layout="row" layout-align="center center" class="info">
            <div class="md-caption" flex>{{video.date | date : 'longDate'}}</div>
            <div class="md-caption nb-views" flex="30">{{video.views ? video.views : 0}} <span ng-bind="'UI.VIEW' | translate:video.views?video.views:0"></span></div>
          </div>
        </md-grid-tile-footer>
      </div>
    </md-grid-tile>
  </md-grid-list>

  <div layout="row" layout="column" layout-align="center center" id="more-button-layout">
    <md-button class="md-raised text-button lowercase-button md-primary"
               ng-href="/search"
               aria-label="{{'HOME.ALL_VIDEOS' | translate}}"
               ng-bind="'HOME.ALL_VIDEOS' | translate">
    </md-button>
  </div>
</div>