`views/public/videos.ejs`

92 lines
<%- include('../partials/head', { title, meta_desc_override: typeof meta_desc_override !== 'undefined' ? meta_desc_override : undefined }) %>
<%- include('../partials/header') %>

<main class="videos-page">
  <section class="section">
    <div class="wrap">
      <header class="rail-header" style="display:block">
        <h1>Designer Videos</h1>
        <p class="muted" style="max-width:760px;margin:.5rem 0 1.25rem">
          A curated gallery of <%= total %> verified YouTube videos — designer home tours from Architectural Digest, sit-down interviews from House &amp; Garden, project showcases from Studio McGee, and behind-the-scenes work from the firms themselves. Every video links back to the designer's profile when we have one.
        </p>

        <form class="filter-form" method="get" action="/videos">
          <label class="control">
            <span>Search</span>
            <input type="search" name="q" placeholder="title, channel, summary" value="<%= filter.q || '' %>" maxlength="120">
          </label>
          <label class="control">
            <span>Category</span>
            <select name="category">
              <option value="">All</option>
              <% categories.forEach(function (c) { %>
                <option value="<%= c %>" <%= filter.category === c ? 'selected' : '' %>><%= c %></option>
              <% }); %>
            </select>
          </label>
          <label class="control">
            <span>Source</span>
            <select name="source_org">
              <option value="">All sources</option>
              <% sources.forEach(function (s) { %>
                <option value="<%= s %>" <%= filter.source_org === s ? 'selected' : '' %>><%= s %></option>
              <% }); %>
            </select>
          </label>
          <button class="btn primary" type="submit">Filter</button>
          <a class="btn ghost" href="/videos">Reset</a>
        </form>
      </header>

      <% if (!videos.length) { %>
        <p class="muted">No videos match those filters. <a href="/videos">Reset</a> to see all <%= total %> videos.</p>
      <% } else { %>
        <div class="video-grid">
          <% videos.forEach(function (v) { %>
            <article class="video-card">
              <a class="video-card-poster"
                 href="<%= v.url %>"
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label="<%= v.title %> — opens YouTube in new tab"
                 style="background-image:url('<%= v.thumb_url %>')">
                <span class="video-card-play" aria-hidden="true">▶</span>
                <span class="video-card-cat"><%= v.category %></span>
              </a>
              <div class="video-card-body">
                <h3><a href="<%= v.url %>" target="_blank" rel="noopener noreferrer"><%= v.title %></a></h3>
                <p class="muted small"><%= v.channel %><% if (v.year) { %> · <%= v.year %><% } %></p>
                <% if (v.designer_slug) { %>
                  <p class="video-card-link">
                    Profile → <a href="/designers/<%= v.designer_slug %>"><%= v.designer_slug.split('-').map(function(w){return w[0].toUpperCase()+w.slice(1)}).join(' ') %></a>
                  </p>
                <% } %>
              </div>
            </article>
          <% }); %>
        </div>
      <% } %>
    </div>
  </section>

  <section class="section alt">
    <div class="wrap two-col">
      <div>
        <h2>How we built this gallery</h2>
        <ol class="prose">
          <li><strong>Source channels.</strong> We leaned on AIA, ASID, IIDA, Architectural Digest, House Beautiful, Elle Decor, Veranda, Studio McGee, Corey Damen Jenkins, and a dozen firm-owned channels.</li>
          <li><strong>Verification.</strong> Every video ID is oEmbed-verified against YouTube before publication — no fabricated IDs, no broken thumbnails.</li>
          <li><strong>Cross-linked.</strong> Where the video features a designer in our directory, the card links to that designer's profile so the gallery is a discovery path back into the catalog.</li>
        </ol>
      </div>
      <div>
        <h2>Suggest a video</h2>
        <p>Know a great designer-feature video we missed — an AIA talk, an ASID interview, a firm-owned project showcase? Drop a link via the <a href="/submit">submission form</a>. We add new videos weekly.</p>
        <p class="muted small">All videos remain hosted on YouTube under their original uploader's account. We only catalog and link.</p>
      </div>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>