card.mustache

<index:>
  {{if item}}
    <div class="card{{if big}} card-big{{/}}{{if (item.videos.length || allowOembed())}} card-video{{/}}{{if (item.type == 'audio')}} card-audio{{/}}">
      {{if preferOembed()}}
        <oembed></oembed>
      {{else if (item.type == 'photo' && item.images.length) }}
        <single-image image="//safe.chttr.co/{{item.images[0].safe}}"></single-image>
      {{else if (item.oembed.type == 'photo' && item.oembed.images.length) }}
        <single-image image="//safe.chttr.co/{{item.oembed.images[0].safe}}"></single-image>
      {{else if (item.images.length && !play)}}
        <with-image></with-image>
      {{else if play}}
        <viewer></viewer>
      {{else if html5Video()}}
        <video-html5 small="{{if !big}}true{{/}}" big="{{if big}}true{{/}}"></video-html5>
      {{else if item.type == 'audio'}}
        <aud></aud>
      {{else if hasText()}}
        <a target="_blank" href="{{item.url}}">
          <text></text>
        </a>
      {{else if allowOembed()}}
        <oembed></oembed>
      {{/}}
    </div>
  {{/}}

<btn: tag="btn">
  <span class="fa fa-play-circle"></span>

<with-image: tag="with-image">
  {{if (item.videos.length || allowOembed())}}
    <span class="vplay" on-click="play()">
      <im></im>
      <btn></btn>
    </span>
    <a target="_blank" href="{{item.url}}">
      <text></text>
    </a>
  {{else}}
    <a target="_blank" href="{{item.url}}">
      <im></im>
      <text></text>
    </a>
  {{/}}

<oembed: tag="oembed">
  <iframe src="/oembed/{{encodeURIComponent(item.url)}}"></iframe>

<oembed2: tag="oembed2">
  <iframe src="https://api.embed.rocks/oembed/?url={{encodeURIComponent(item.url)}}&key=4ed843c5-5ed4-4201-9e68-a227c314aae8"></iframe>

<text: tag="text">
  {{if !play}}
    <div class="card-text">
      <h3>{{item.title}}</h3>
      <p>{{item.description}}</p>
      {{if item.favicon.safe || item.site}}
        <p class="fav">{{if item.favicon.safe}}<img onerror="this.src='/img/broken.jpg'" class="favicon" src="//safe.chttr.co/{{item.favicon.safe}}">{{/}}{{item.site}}</p>
      {{/}}
    </div>
  {{/}}

<video-iframe: tag="video-iframe">
  <iframe style="{{videoSize()}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}"></iframe>
  <text></text>

<oembed-player: tag="oembed-player">
  <iframe src="http://embed.rocks:3001/oembed/?url={{encodeURIComponent(item.secureUrl || item.url)}}"></iframe>

<aud: tag="aud">
  <audio controls loop>
    <source type="{{item.audios[0].type}}" src="{{item.audios[0].secureUrl || item.audios[0].url}}">
  </audio>
  
<video-html5: tag="video-html5">
  {{if play}}
    <video controls loop autoplay>
      <source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
    </video>
  {{else if small || big}}
    <span class="vplay" on-click="play()">
      <video class="{{if small}}small{{else if big}}big{{/}}">
        <source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
      </video>
      <btn></btn>
    </span>
  {{else}}
    <video controls loop>
      <source type="{{item.videos[0].type}}" src="{{item.videos[0].secureUrl || item.videos[0].url}}">
    </video>
  {{/}}
  <text></text>

<single-image: tag="single-image">
  <section class="photos-list photos-list-1">
    <img src="{{@image}}">
  </section>

<im: tag="im">
  {{if item.images}}
    {{if item.images[0].safe}}
      <img onerror="this.src='/img/broken.jpg'" class="card-image" src="//safe.chttr.co/{{item.images[0].safe}}">
    {{else}}
      <img onerror="this.src='/img/broken.jpg'" class="card-image" src="{{item.images[0].url}}">
    {{/}}
  {{/}}

<viewer: tag="viewer">
  <div on-click="stop()" class="dl-container">
    {{if html5Video()}}
      <video-html5></video-html5>
    {{else if iframeVideo()}}
      <video-iframe></video-iframe>
    {{else if allowOembed()}}
      <oembed-player></oembed-player>
    {{/}}
    <i on-click="stop()" class="viewer-close fa fa-times-circle"></i>
  </div>