home.html

<div class="home" ng-controller="HomeController as controller" flex layout="row" ng-cloak>
  <div class="width-wrapper" flex layout="column">

    {{ filteredVideos = (controller.data.videos); "" }}
    {{ filteredImages = (controller.data.images); "" }}

    <div>
      <div layout="row" layout-align="center center">
        <h2 ng-if="controller.data.showVideos && controller.data.showImages">
          All Uploads ({{filteredVideos.length + filteredImages.length}})
        </h2>
        <h2 ng-if="controller.data.showVideos && !controller.data.showImages">
          Videos ({{filteredVideos.length}})
        </h2>
        <h2 ng-if="!controller.data.showVideos && controller.data.showImages">
          Images ({{filteredImages.length}})
        </h2>
        <div flex></div>
        <div>
          <span class="showing">Showing:</span><md-button class="button-group" ng-click="controller.data.showVideos = controller.data.showImages = true;" ng-disabled="controller.data.showVideos && controller.data.showImages">All Uploads</md-button><md-button class="button-group" ng-click="controller.data.showVideos = true; controller.data.showImages = false;" ng-disabled="controller.data.showVideos && !controller.data.showImages">Videos</md-button><md-button class="button-group" ng-click="controller.data.showVideos = false; controller.data.showImages = true;" ng-disabled="!controller.data.showVideos && controller.data.showImages">Images</md-button>
        </div>
      </div>
    </div>

    <div ng-if="controller.data.showVideos">
      <h3 ng-if="controller.data.showImages">
        Video Uploads ({{filteredVideos.length}})
      </h3>

      <div ng-if="!controller.data.videos" flex layout="row" layout-align="center center">
        <md-progress-circular class="loading" md-diameter="100" md-mode="indeterminate"></md-progress-circular>
      </div>

      <div ng-if="filteredVideos.length == 0">
        No video found
      </div>

      <div>
        <md-grid-list md-gutter="20px"
          md-cols="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="5" md-row-height="16:11">
          <md-grid-tile ng-repeat="video in filteredVideos">
            <div class="video-box" layout="column">
              <a flex ui-sref="video({ videoId: video._id })" style="background-image: url(/images/thumbnail/{{video._id}}.jpg);">
                <div ng-if="!video.metadata">
                  This video has not yet been processed.
                </div>
                <div ng-if="video.metadata" class="video-box-tags" ng-repeat="stream in video.metadata.streams">
                  <div ng-if="stream.codec_type == 'video'" class="text-muted">
                    <span class="video-box-tag">{{stream.width}}x{{stream.height}}</span>
                    <span class="video-box-tag">{{stream.duration | formatSeconds }}</span>
                  </div>
                </div>
              </a>
              <div class="video-box-title">
                <a ui-sref="video({ videoId: video._id })">{{video.title}}</a>
              </div>
            </div>
          </md-grid-tile>
        </md-grid-list>
      </div>
    </div>

    <div ng-if="controller.data.showImages">
      <h3 ng-if="controller.data.showVideos" class="image-uploads-title">
        Image Uploads ({{filteredImages.length}})
      </h3>

      <div ng-if="!controller.data.images" flex layout="row" layout-align="center center">
        <md-progress-circular class="loading" md-diameter="100" md-mode="indeterminate"></md-progress-circular>
      </div>

      <div ng-if="filteredImages.length == 0">
        No image found
      </div>

      <div>
        <div ng-repeat="image in filteredImages">
          <div id="image-{{image._id}}" layout="row" layout-xs="column" class="image-box border-box">
            <div flex="initial" class="image-box-image">
              <div class="entry-thumbnail-container" style="position: relative;">
                <div ng-if="face.face_location.left>0" ng-repeat="face in image.analysis.face_detection" class="face-overlay-box" style="position: absolute;
                            top: {{controller.facePositionAsPercent(face.face_location, image).top}}%;
                            left: {{controller.facePositionAsPercent(face.face_location, image).left}}%;
                            width: {{controller.facePositionAsPercent(face.face_location, image).width}}%;
                            height: {{controller.facePositionAsPercent(face.face_location, image).height}}%;"><span class="face-overlay-text">{{$index+1}}</span></div>
                <img ng-src="/images/image/{{image._id}}.jpg" class="image-thumbnail" />
              </div>
            </div>
            <div flex class="entry-tags">
              <h4>Image Keywords</h4>
              <span class="no-tag" ng-if="!image.analysis.image_keywords">No data yet</span>
              <span class="no-tag" ng-if="image.analysis.image_keywords.length == 0">No tag detected</span>
              <ul class="entry-taglist">
                <li ng-repeat="keyword in image.analysis.image_keywords" class="entry-tag"><span
                  class="tag tag-keyword">{{keyword.class}} {{keyword.score | formatPercent}}%</span></li>
              </ul>
            </div>
            <div flex class="entry-faces">
              <h4>Face Detection</h4>
              <span class="no-tag" ng-if="!image.analysis.face_detection">No data yet</span>
              <span class="no-tag" ng-if="image.analysis.face_detection.length == 0">No face detected</span>
              <ul class="entry-taglist">
                <li ng-if="face.face_location.left>0" ng-repeat="face in image.analysis.face_detection" class="entry-tag"><span
                  class="tag tag-face">
                    <span class="face-overlay-text">{{$index+1}}</span>
                    <span ng-if="face.identity">{{face.identity.name}} {{face.identity.score | formatPercent}}%</span>
                    <span ng-if="face.identity">&nbsp;</span>
                    <span>{{face.gender.gender}} {{face.age.min}}-{{face.age.max}} {{face.age.score | formatPercent}}%</span>
                  </span></li>
              </ul>
            </div>
            <div>
              <md-menu>
                <md-button class="video-menu-button md-icon-button" ng-click="$mdMenu.open()">
                  <md-icon md-font-library="material-icons">more_vert</md-icon>
                </md-button>
                <md-menu-content>
                  <md-menu-item>
                    <md-button ng-click="controller.resetImage(image)">
                      Relaunch Analysis
                    </md-button>
                  </md-menu-item>
                  <md-menu-divider></md-menu-divider>
                  <md-menu-item>
                    <md-button ng-click="controller.deleteImage(image)">
                      Delete
                    </md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>