<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angularjs@1.5.3" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src= "http://player.twitch.tv/js/embed/v1.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="AppCtrl as ac">
    
    <div id="TWITCH-PLAYER"></div>
    
    <form ng-submit="ac.seek(ac.seekToTime)">
      <input type="number" ng-model="ac.seekToTime" step="0.01">
      <button type="submit">Seek</button>
    </div>
    
    <br>
    
    <ul>
      <li ng-repeat="message in ac.messages">{{ message }}</li>
    </ul>
    
  </body>
</html>
angular
  .module('app', [])
  .controller('AppCtrl', function($scope, $timeout) {
    var vm = this;
    
    vm.seekToTime = 30.89;
    vm.messages = [];
    
    var playerOptions = {
      width: 640,
      height: 440,
      autoplay: false,
      time: 0,
      video: "v62244377"
    };
        
    var player = new Twitch.Player("TWITCH-PLAYER", playerOptions);

    player.addEventListener('ready', function() {
      $scope.$apply(function() {
        log('ready');
      });

      $timeout(function() { player.play(); }, 1000);
    });
    
    player.addEventListener('play', function() {
      $scope.$apply(function() {
        log('play');
      });
    });

    vm.seek = function(time) {
      player.seek(time);
      $timeout(logTime, 500);
    };

    function log(message) {
      vm.messages.push(new Date().toISOString().slice(14, 23) + ' | ' + message);
    }
    
    function logTime() {
      log('time | ' + player.getCurrentTime());
    }
    
  });
/* Styles go here */