Video wall

index.html

doctype html
html
  head
    script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js") 
    script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js")
    script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js")
    script(src="https://code.angularjs.org/1.4.7/angular-animate.min.js")
    script(src="https://code.angularjs.org/1.4.7/angular-aria.min.js")
    link(rel='stylesheet', href="https://fonts.googleapis.com/css?family=RobotoDraft:100,300,400,500,700,400italic")
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.min.css')
    
  body(md-theme='lmMain')
    md-content
      header(layout='row', layout-align='center center')
        h1.md-display-3 The Lomotif Video Wall
    
      section(ng-controller='lm.VideoWallController')

        section(layout='row', flex, layout-padding, layout-margin)
          md-input-container(flex='80')
            label Tag
            input(ng-model="tag", ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }")
          section(layout='row', layout-align='center center', flex='20')
            md-button(ng-click='fetch(tag)') Search

        section#videos(layout='row', layout-align='center center', flex)
          section(flex='100')
            video(ng-repeat="video in videos", width='25%', autoplay, loop, poster='{! video.thumbnail !}')
              source(ng-src="{! video.preview !}", type="video/mp4")

        section(layout='row', layout-align='center center')
          h2.md-display-1(ng-if="videos.length == 0 && !loading") No results!
          div(ng-if="loading")
            md-progress-circular(md-mode='indeterminate')  

        div.toast(ng-if='tag && videos.length > 0') #{! tag !}

    script
      | angular.element(document).ready(function() {
      |    angular.bootstrap($('body'), [ 'lm' ]);
      | })

script.js

angular.module('lm', ['ngAnimate', 'ngMaterial'])
  .config([
        '$httpProvider',
        '$provide',
        '$interpolateProvider',
        '$sceDelegateProvider'
        ($httpProvider, $provide, $interpolateProvider, $sceDelegateProvider) ->
            prefix = 'lm-core'
            $interpolateProvider.startSymbol('{!')
            $interpolateProvider.endSymbol('!}')

            $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
            
            $sceDelegateProvider.resourceUrlWhitelist([
                'self',
                'https://lomotif-staging.s3.amazonaws.com/**'
              ])
            return
    ])
  
    .config([
      '$mdThemingProvider'
      ($mdThemingProvider) ->

        
        lmMain = $mdThemingProvider.theme('lmMain')
          .primaryPalette('grey',
              'hue-1': '900'
          )
          .dark()

        $mdThemingProvider.setDefaultTheme('lmMain')
        return
  ])

  
  .controller('lm.VideoWallController',  [
      '$scope'
      '$http'
      ($scope, $http) ->
        $scope.name = "john"
        $scope.videos = []
        $scope.tag = ""
        $scope.loading = false
      
        $scope.$watch("tag", (newVal, oldVal) ->
          if oldVal
            $scope.fetch(newVal, "http://local.dev.lomotif.com/v1/video/clips/tagged/#{newVal}/")
          return
        )
      
        $scope.fetch = (tag, url) ->
          url = url or "http://local.dev.lomotif.com/v1/video/clips/tagged/#{tag}/"
          $scope.loading = true
          $scope.videos = []
          $http(
            method: "GET"
            #url: "http://ditto.lomotif.com/v1/video/clips/tagged/#{tag}/"
            url: "#{url}"
          ).then(
            (success) ->
              $scope.videos = success.data.results
              return
            ,
            (error) ->
              return
          ).finally(() ->
            $scope.loading = false
            return
          )
    
        return
    
    ])

style.css

html, body
  background #424242
  height 100%
  
body
  position relative
  
#videos
  font-size 0
  
.toast
  background-color rgba(0, 0, 0, 1.0)
  opacity 0.5
  padding 10px 20px
  position fixed
  bottom 40px
  right 0px
  font-size 56px
  letter-spacing -.005em
  line-height 56px
  font-weight 100
  
  

Video wall.markdown

Video wall

A Pen by Ruiwen Chua on CodePen.

License.