streamium/app/client/stream.html

Decentralized trustless video streaming using bitcoin payment channels.

<header>
  <div class="navbar navbar-inverse bs-docs-nav navbar-fixed-top sticky-navigation" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">
          <img src="/assets/img/logo-nav.png" alt="">
        </a>
      </div>
      <button type="button"
        ng-show="expirationDate" class="navbar-right btn btn-navbar btn-info btn-xs" ng-click="end()">
        Exit stream
      </button>

      <div class="navbar-collapse collapse" id="stamp-navigation">


        <ul class="nav navbar-nav navbar-left main-navigation small-text">
          <li>
            <a id="copylink" class="lowercase" data-toggle="tooltip"
              data-placement="right" title="Share your stream">{{client.getLink()}}</a>
          </li>
        </ul>
      </div>
    </div>

  </div>

  <!-- =========================
	SECTION: Container
	============================== -->
</header>
<div class="container content-pg">

  <div class="row" ng-show="expirationDate">
    <div class="row-same-height">
      <video controls class="col-md-8 col-xs-height col-full-height stream-video"
        id="video" ng-src="{{videoSrc}}" autoplay></video>

      <div class="hidden-xs hidden-sm col-md-4 col-xs-height col-full-height card chat">
        <h1 class="truncate">
          <span class="circle" style="background-color: {{PROVIDER_COLOR}};"/>{{name}}</h1>
        <ul class="messages" scroll-glue>
          <li ng-repeat="m in messages"><span class="circle" style="background-color: {{m.color || PROVIDER_COLOR}};"/>{{m.text}}</li>
        </ul>
        <div class="input">
          <form name="form" ng-submit="chat()">
          <input type="text" ng-model="message" required/>
          <button class="btn btn-primary" type="submit" ng-disabled="!message">Send</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-8 col-sm-offset-0 col-md-8 col-md-offset-2 col-xs-12 col-xs-offset-0 ">
      <ul class="list-unstyled">
        <div class="row card space-top" ng-hide="expirationDate">
          <div class="col-sm-2 center">
            <h2><span class="glyphicon glyphicon-hourglass"></span></h2>
          </div>
          <div class="col-sm-10 text-center">
            <h2>Welcome to {{name}}.</h2>
          </div>
        </div>
      </ul>
    </div>
    <div class="col-sm-8 col-sm-offset-0 col-md-6 col-md-offset-0 col-xs-12 col-xs-offset-0 ">
        <div ng-show="(castType === 'static') && loadingStatic">
          Loading stream...
        </div>
        <span ng-show="expirationDate && ((castType !== 'static') || !loadingStatic)">
          Your funds will run out <span am-time-ago="expirationDate"></span> ({{secondsLeft}} seconds).
        </span>
      </ul>
    </div>
    <div class="col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-0 col-xs-12 col-xs-offset-0 ">
      <a href="https://github.com/streamium/streamium/issues/new"
        target="_blank"
        ng-show="expirationDate"
        class="softlink">
        Problems with stream?
      </a>
    </div>
  </div>

</div>