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

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

<div ng-cloak class="search">

  <!-- Title + search engine -->
  <div layout-xs="column" layout-gt-xs="row">
    <h1 class="md-headline" hide-gt-xs ng-bind="'SEARCH.TITLE'|translate"></h1>
    <h1 class="md-headline" hide-xs ng-bind="'SEARCH.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="Search">
      <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 type="submit" class="md-icon-button submit" id="searchSubmit">
          <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>

  <!-- Advanced search engine -->
  <div layout="column" md-whiteframe="1">

    <!-- Title of the collapsable section -->
    <md-toolbar class="advanced-search" ng-click="showAdvancedSearch = !showAdvancedSearch">
      <div class="md-subhead md-toolbar-tools">
        <h3 class="ng-binding" ng-bind="'SEARCH.ADVANCED' | translate"></h3>
        <span flex></span>
        <md-icon material-icons md-light md-48 ng-class="{reverse: showAdvancedSearch}">keyboard_arrow_down</md-icon>
      </div>
    </md-toolbar>

    <!-- Collapsable section -->
    <div layout="column" ng-show="showAdvancedSearch" class="collapse md-body-2">
      <form ng-submit="searchSubmit()"
            name="searchForm"
            layout="column"
            layout-margin
            analytics-on
            analytics-event="AdvancedSearch">

        <!-- Dates -->
        <div layout="row" layout-align="center center" layout-align-xs="left center">
          <label flex="nogrow" ng-bind="'UI.DATE_BETWEEN' | translate"></label>

          <md-divider show-xs></md-divider>

          <div flex layout="row" layout-xs="column" layout-align="left center" layout-align-xs="center left">
            <md-datepicker flex="nogrow" ng-model="search.dateStart" md-placeholder=""></md-datepicker>
            <span flex="15" class="between-label" ng-bind="'UI.AND' | translate"></span>
            <md-datepicker flex="nogrow" ng-model="search.dateEnd" md-placeholder=""></md-datepicker>
          </div>
          <span flex-xs="20" flex-sm="10" hide-gt-sm> </span>
        </div>

        <div layout="row" layout-xs="column">
          <md-checkbox ng-model="search['searchInPois']" aria-label="{{SEARCH.POINTS_OF_INTEREST_ARIA_LABEL | translate}}">
            <span ng-bind="'SEARCH.POINTS_OF_INTEREST' | translate"></span>
          </md-checkbox>
        </div>

        <div layout="row" layout-xs="column">
          <label ng-bind="'SEARCH.FILTER_BY'|translate"></label>
        </div>

        <!-- Filters (categories and custom properties) -->
        <div layout="row" layout-xs="column" layout-wrap>
          <md-input-container ng-repeat="filter in filters | orderBy:'name'" class="md-block" flex-gt-sm="33" flex-sm="50" flex-xs="100">

            <!-- Filter label -->
            <label ng-if="filter.type !== 'boolean'" ng-bind="filter.name == 'categories' ? 'SEARCH.CATEGORY_FILTER' : filter.name | translate"></label>

            <!-- Lists -->
            <md-select ng-if="filter.type == 'list'" ng-model="search[filter.id]" md-container-class="select-filter">
              <md-option value="">{{'SEARCH.NO_FILTER' | translate}}</md-option>
              <md-option ng-repeat="(key, value) in filter.values" value="{{filter.name == 'categories' ? key : value}}">
                {{value}}
              </md-option>
            </md-select>

            <!-- Texts -->
            <input ng-if="filter.type == 'text'" ng-model="search[filter.id]">

            <!-- Booleans -->
            <md-checkbox ng-if="filter.type == 'boolean'" ng-model="search[filter.id]" aria-label="{{filter.name | translate}}">
              <span ng-bind="filter.name | translate"></span>
            </md-checkbox>

            <!-- Dates -->
            <md-datepicker ng-if="filter.type == 'dateTime'" ng-model="search[filter.id]" md-placeholder=""></md-datepicker>

          </md-input-container>
        </div>

        <!-- Reset and submit buttons -->
        <div layout="row" layout="column" layout-align="center center" layout-margin>
          <md-button ng-click="resetSearch()" class="md-fab cancel-button" id="advancedSearchCancel">
            <md-tooltip md-direction="bottom" md-z-index="1">{{'UI.CANCEL' | translate}}</md-tooltip>
            <md-icon material-icons md-light md-48>close</md-icon>
          </md-button>
          <md-button type="submit" class="md-fab submit" id="advancedSearchSubmit">
            <md-tooltip md-direction="bottom" md-z-index="1">{{'UI.SEARCH' | translate}}</md-tooltip>
            <md-icon material-icons md-light md-48>search</md-icon>
          </md-button>
        </div>
      </form>
    </div>

  </div>

  <!-- Sort buttons, number of results and pagination -->
  <div layout-xs="column" layout="row" layout-align="space-between center" layout-margin>

    <div layout="row" flex-xs="100" flex-gt-xs="66" layout-align="space-between center">

      <!-- Number of results -->
      <div class="md-body-2" flex-xs="50" flex-sm="25" flex-gt-sm="15">
        <span ng-bind="pagination.size"></span> <span ng-bind="'SEARCH.RESULT' | translate:pagination.size"></span>
      </div>

      <!-- Sort buttons -->
      <div ng-if="pagination.size > 1" flex-xs="50" flex-gt-xs="auto" class="orderBy" layout="row" layout-align="center center">
        <span hide-xs hide-sm flex="20" class="md-body-2" ng-bind="'SEARCH.ORDER_BY' | translate"></span>
        <md-switch md-no-ink
                   ng-model="search.sortBy"
                   ng-change="searchSubmit()"
                   aria-label="{{'SEARCH.DATE_OR_VIEWS' | translate}}">
          <md-icon material-icons md-light md-48 ng-bind="search.sortBy ? 'visibility' : 'access_time'"></md-icon>
        </md-switch>
        <md-switch md-no-ink
                   ng-model="search.sortOrder"
                   ng-change="searchSubmit()"
                   aria-label="{{'SEARCH.ORDER_ASC' | translate}}">
          <md-icon material-icons md-light md-48 ng-class="{reverse: search.sortOrder}">sort</md-icon>
        </md-switch>
      </div>
    </div>

    <!-- Pagination -->
    <div flex-xs="100" flex-gt-xs="33">
      <md-tabs ng-if="pages.length > 1" md-border-bottom md-autoselect md-selected="pagination.page">
        <md-tab ng-repeat="page in pages" label="{{page}}"></md-tab>
      </md-tabs>
    </div>
  </div>

  <!-- Search spinner -->
  <div ng-show="isLoading" layout="row" layout-align="space-around" layout-margin>
    <md-progress-circular md-mode="indeterminate" md-diameter="150"></md-progress-circular>
  </div>

  <!-- Search results -->
  <md-grid-list ng-if="videos.length > 0 && !isLoading"
                md-cols="1"
                md-cols-sm="1"
                md-cols-gt-sm="2"
                md-row-height="144px"
                md-gutter="16px"
                md-gutter-gt-sm="24px">

    <md-grid-tile ng-repeat="video in videos" layout="column">
      <div layout="row" flex="auto">

        <!-- Thumbnail -->
        <div
          layout="column"
          flex="none"
          class="thumbnail"
          ng-click="openVideo($event, video)"
          analytics-on="click"
          analytics-event="OpenVideo"
        >
          <img check-image ng-src="{{video.thumbnail}}">
          <div class="play">
            <md-icon material-icons md-light md-48>play_circle_outline</md-icon>
          </div>
        </div>

        <!-- Details -->
        <div layout="column" flex="grow" class="details">
          <div
            class="md-body-2"
            flex="nogrow"
            ng-bind-html="video.title"
            ng-click="openVideo($event, video)"
            analytics-on="click"
            analytics-event="OpenVideo"
          ></div>
          <div class="md-caption" flex="auto">
            <span ng-bind="video.date | date : 'longDate'"></span> - <span class="number" ng-bind="video.views ? video.views : 0"></span> <span ng-bind="'UI.VIEW' | translate:video.views?video.views:0"></span>
          </div>
          <div
            class="md-body-1"
            flex="auto"
            ng-bind-html="video.description"
            ng-if="video.description"
          ></div>
          <div class="pois" flex="none" ng-if="video.pois.length">
            <ul>
              <li ng-repeat="poi in video.pois" class="md-body-1">
                <span
                  ng-bind="poi.value | millisecondsToTime"
                  ng-click="openVideo($event, video, poi.value)"
                  analytics-on="click"
                  analytics-event="OpenVideo"
                  class="time"
                ></span> - <span ng-if="poi.name" ng-bind-html="poi.name"></span><span ng-if="poi.description && !poi.name" ng-bind-html="poi.description"></span>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </md-grid-tile>
  </md-grid-list>

  <!-- No results message -->
  <md-content ng-if="videos.length == 0 && !isLoading" layout-margin layout-padding>
    <p flex ng-bind="'SEARCH.NO_RESULTS' | translate"></p>
  </md-content>

  <div layout="row" layout-align="center end" ng-if="pages.length > 1 && !isLoading">
    <div flex-xs="100" flex-sm="50" flex-gt-sm="33" layout="column" class="pagination">
        <md-tabs md-border-bottom md-autoselect md-selected="pagination.page">
          <md-tab ng-repeat="page in pages" label="{{page}}" ></md-tab>
        </md-tabs>
    </div>
  </div>
</div>