indiekit-endpoint-youtube/views/youtube.njk

{% extends "layouts/youtube.njk" %}

{% block youtube %}
  {% if error %}
    {{ prose({ text: error.message }) }}
  {% elif isMultiChannel and channelsData %}
    {# Multi-channel mode: show all channels #}
    {% for chData in channelsData %}
    <div class="youtube-channel-section">
      {# Channel Header #}
      {% if chData.error %}
      <div class="youtube-channel" style="border: 1px solid #ff6b6b;">
        <div class="youtube-channel__info">
          <h2 class="youtube-channel__name">{{ chData.name }}</h2>
          <p style="color: #ff6b6b; margin: 0;">Error: {{ chData.error }}</p>
        </div>
      </div>
      {% elif chData.channel %}
      <div class="youtube-channel">
        {% if chData.channel.thumbnail %}
        <img src="{{ chData.channel.thumbnail }}" alt="" class="youtube-channel__avatar">
        {% endif %}
        <div class="youtube-channel__info">
          <h2 class="youtube-channel__name">{{ chData.channel.title }}</h2>
          <div class="youtube-channel__stats">
            <span>{{ chData.channel.subscriberCount }} {{ __("youtube.subscribers") }}</span>
            <span>{{ chData.channel.videoCount }} videos</span>
          </div>
        </div>
        {% if chData.isLive %}
        <span class="youtube-live-badge youtube-live-badge--live">
          <span class="youtube-live-dot"></span>
          {{ __("youtube.live") }}
        </span>
        {% elif chData.isUpcoming %}
        <span class="youtube-live-badge youtube-live-badge--upcoming">
          {{ __("youtube.upcoming") }}
        </span>
        {% else %}
        <span class="youtube-live-badge youtube-live-badge--offline">
          {{ __("youtube.offline") }}
        </span>
        {% endif %}
      </div>

      {# Live Stream (if live) #}
      {% if chData.liveStatus and (chData.liveStatus.isLive or chData.liveStatus.isUpcoming) %}
      {% call section({ title: chData.liveStatus.isLive and __("youtube.live") or __("youtube.upcoming") }) %}
        <div class="youtube-live-stream">
          {% if chData.liveStatus.thumbnail %}
          <img src="{{ chData.liveStatus.thumbnail }}" alt="" class="youtube-live-stream__thumb">
          {% endif %}
          <div class="youtube-live-stream__info">
            <h4 class="youtube-live-stream__title">
              <a href="https://www.youtube.com/watch?v={{ chData.liveStatus.videoId }}" target="_blank" rel="noopener">
                {{ chData.liveStatus.title }}
              </a>
            </h4>
            {{ button({
              href: "https://www.youtube.com/watch?v=" + chData.liveStatus.videoId,
              text: __("youtube.watchNow"),
              target: "_blank"
            }) }}
          </div>
        </div>
      {% endcall %}
      {% endif %}

      {# Latest Videos #}
      {% call section({ title: __("youtube.videos") }) %}
        {% if chData.videos and chData.videos.length > 0 %}
        <ul class="youtube-video-grid">
          {% for video in chData.videos %}
          <li class="youtube-video">
            <div class="youtube-video__thumb-wrapper">
              <a href="{{ video.url }}" target="_blank" rel="noopener">
                <img src="{{ video.thumbnail }}" alt="" class="youtube-video__thumb" loading="lazy">
              </a>
              {% if video.durationFormatted and not video.isLive %}
              <span class="youtube-video__duration">{{ video.durationFormatted }}</span>
              {% elif video.isLive %}
              <span class="youtube-video__duration youtube-video__duration--live">LIVE</span>
              {% endif %}
            </div>
            <div class="youtube-video__info">
              <h4 class="youtube-video__title">
                <a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
              </h4>
              <div class="youtube-video__meta">
                {{ video.viewCount }} {{ __("youtube.views") }}
              </div>
            </div>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        {{ prose({ text: __("youtube.noVideos") }) }}
        {% endif %}
      {% endcall %}

      {# Link to YouTube channel #}
      <div class="youtube-public-link" style="margin-top: var(--space-m);">
        <p>{{ __("youtube.widget.description") }}</p>
        {{ button({
          href: "https://www.youtube.com/channel/" + chData.channel.id,
          text: __("youtube.widget.view"),
          target: "_blank"
        }) }}
      </div>
      {% endif %}
    </div>
    {% endfor %}
  {% else %}
    {# Single channel mode (backward compatible) #}
    {# Channel Header #}
    {% if channel %}
    <div class="youtube-channel">
      {% if channel.thumbnail %}
      <img src="{{ channel.thumbnail }}" alt="" class="youtube-channel__avatar">
      {% endif %}
      <div class="youtube-channel__info">
        <h2 class="youtube-channel__name">{{ channel.title }}</h2>
        <div class="youtube-channel__stats">
          <span>{{ channel.subscriberCount }} {{ __("youtube.subscribers") }}</span>
          <span>{{ channel.videoCount }} videos</span>
        </div>
      </div>
      {% if isLive %}
      <span class="youtube-live-badge youtube-live-badge--live">
        <span class="youtube-live-dot"></span>
        {{ __("youtube.live") }}
      </span>
      {% elif isUpcoming %}
      <span class="youtube-live-badge youtube-live-badge--upcoming">
        {{ __("youtube.upcoming") }}
      </span>
      {% else %}
      <span class="youtube-live-badge youtube-live-badge--offline">
        {{ __("youtube.offline") }}
      </span>
      {% endif %}
    </div>
    {% endif %}

    {# Live Stream (if live) #}
    {% if liveStatus and (liveStatus.isLive or liveStatus.isUpcoming) %}
    {% call section({ title: liveStatus.isLive and __("youtube.live") or __("youtube.upcoming") }) %}
      <div class="youtube-live-stream">
        {% if liveStatus.thumbnail %}
        <img src="{{ liveStatus.thumbnail }}" alt="" class="youtube-live-stream__thumb">
        {% endif %}
        <div class="youtube-live-stream__info">
          <h3 class="youtube-live-stream__title">
            <a href="https://www.youtube.com/watch?v={{ liveStatus.videoId }}" target="_blank" rel="noopener">
              {{ liveStatus.title }}
            </a>
          </h3>
          {{ button({
            href: "https://www.youtube.com/watch?v=" + liveStatus.videoId,
            text: __("youtube.watchNow"),
            target: "_blank"
          }) }}
        </div>
      </div>
    {% endcall %}
    {% endif %}

    {# Latest Videos #}
    {% call section({ title: __("youtube.videos") }) %}
      {% if videos and videos.length > 0 %}
      <ul class="youtube-video-grid">
        {% for video in videos %}
        <li class="youtube-video">
          <div class="youtube-video__thumb-wrapper">
            <a href="{{ video.url }}" target="_blank" rel="noopener">
              <img src="{{ video.thumbnail }}" alt="" class="youtube-video__thumb" loading="lazy">
            </a>
            {% if video.durationFormatted and not video.isLive %}
            <span class="youtube-video__duration">{{ video.durationFormatted }}</span>
            {% elif video.isLive %}
            <span class="youtube-video__duration youtube-video__duration--live">LIVE</span>
            {% endif %}
          </div>
          <div class="youtube-video__info">
            <h3 class="youtube-video__title">
              <a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
            </h3>
            <div class="youtube-video__meta">
              {{ video.viewCount }} {{ __("youtube.views") }}
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      {{ prose({ text: __("youtube.noVideos") }) }}
      {% endif %}
    {% endcall %}

    {# Link to YouTube channel #}
    {% if channel %}
    <div class="youtube-public-link">
      <p>{{ __("youtube.widget.description") }}</p>
      {{ button({
        href: "https://www.youtube.com/channel/" + channel.id,
        text: __("youtube.widget.view"),
        target: "_blank"
      }) }}
    </div>
    {% endif %}
  {% endif %}
{% endblock %}