views/embed.ejs - master - streamlive/embedstream

views/embed.ejs
216 строк7 KB
TwixoffStudio
Create: package.json, .gitkeep, parser.js, store.js, embed.ejs, error.ejs, index.ejs, .env.example, .gitignore, LICENSE, README.md, server.js
10 авг 2026, 11:06
Верифицирован
10 авг 2026, 11:066adfd59
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><%= record.title || 'EmbedStream' %></title>
  <meta name="description" content="<%= (record.description || '').replace(/"/g, '&quot;') %>" />

  <!-- Open Graph for further sharing / Streamlabs recognition -->
  <meta property="og:type" content="video.other" />
  <meta property="og:title" content="<%= (record.title || '').replace(/"/g, '&quot;') %>" />
  <meta property="og:description" content="<%= (record.description || '').replace(/"/g, '&quot;') %>" />
  <% if (record.image) { %>
  <meta property="og:image" content="<%= record.image %>" />
  <meta property="og:image:secure_url" content="<%= record.image %>" />
  <% } %>
  <meta property="og:url" content="<%= baseUrl %>/embed/<%= record.id %>" />
  <meta property="og:site_name" content="EmbedStream" />
  <% if (record.embedUrl) { %>
  <meta property="og:video" content="<%= record.embedUrl %>" />
  <meta property="og:video:url" content="<%= record.embedUrl %>" />
  <meta property="og:video:type" content="text/html" />
  <% } %>
  <meta name="twitter:card" content="player" />
  <meta name="twitter:title" content="<%= (record.title || '').replace(/"/g, '&quot;') %>" />
  <meta name="twitter:description" content="<%= (record.description || '').replace(/"/g, '&quot;') %>" />
  <% if (record.image) { %>
  <meta name="twitter:image" content="<%= record.image %>" />
  <% } %>

  <style>
    :root {
      --bg: #0c0e12;
      --fg: #f0f2f5;
      --muted: #8b93a1;
      --primary: #5eead4;
      --card: #14181f;
      --border: #242a35;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--fg);
      font-family: Inter, system-ui, -apple-system, sans-serif;
      overflow: hidden;
    }
    .wrap {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
    }
    .player {
      flex: 1;
      position: relative;
      background: #000;
      min-height: 0;
    }
    .player iframe,
    .player video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    .player .poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .player .no-video {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      background: var(--card);
      padding: 1.5rem;
      text-align: center;
    }
    .player .no-video img {
      max-width: 80%;
      max-height: 55%;
      border-radius: 8px;
      object-fit: contain;
    }
    .player .no-video a {
      color: var(--primary);
      font-size: 0.9rem;
      text-decoration: none;
      border: 1px solid var(--border);
      padding: 0.5rem 1rem;
      border-radius: 8px;
    }
    .player .no-video a:hover { background: var(--border); }
    .meta {
      flex-shrink: 0;
      padding: 0.75rem 1rem;
      background: var(--card);
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .meta .title {
      font-weight: 600;
      font-size: 0.95rem;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .meta .desc {
      font-size: 0.8rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .meta .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.25rem;
    }
    .meta .tag {
      font-size: 0.65rem;
      padding: 0.15rem 0.45rem;
      border-radius: 999px;
      background: rgba(94, 234, 212, 0.12);
      color: var(--primary);
    }
    .badge {
      position: absolute;
      top: 0.6rem;
      left: 0.6rem;
      z-index: 10;
      font-size: 0.65rem;
      padding: 0.25rem 0.55rem;
      border-radius: 6px;
      background: rgba(239, 68, 68, 0.9);
      color: #fff;
      font-weight: 600;
    }
    .brand {
      position: absolute;
      bottom: 0.5rem;
      right: 0.6rem;
      z-index: 10;
      font-size: 0.65rem;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="player">
      <% if (record.restricted) { %>
        <div class="badge">Запрещена в РФ</div>
      <% } %>

      <% if (record.embedUrl && (record.platform === 'youtube' || record.platform === 'vimeo' || record.platform === 'rutube' || record.platform === 'dailymotion' || record.platform === 'twitch')) { %>
        <iframe
          src="<%= record.embedUrl %><%= record.platform === 'youtube' ? (autoplay ? '&autoplay=1' : '') + (muted ? '&mute=1' : '') : '' %>"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen
          referrerpolicy="strict-origin-when-cross-origin"
        ></iframe>
      <% } else if (record.platform === 'direct' && record.embedUrl) { %>
        <video
          src="<%= record.embedUrl %>"
          controls
          playsinline
          <% if (autoplay) { %>autoplay<% } %>
          <% if (muted) { %>muted<% } %>
          poster="<%= record.image || '' %>"
        ></video>
      <% } else if (record.image) { %>
        <div class="no-video">
          <img src="<%= record.image %>" alt="<%= record.title %>" />
          <a href="<%= record.url %>" target="_blank" rel="noopener">Открыть оригинал</a>
        </div>
      <% } else { %>
        <div class="no-video">
          <div style="font-size:2rem;opacity:0.4">▶</div>
          <div style="color:var(--muted);font-size:0.9rem"><%= record.title %></div>
          <a href="<%= record.url %>" target="_blank" rel="noopener">Открыть оригинал</a>
        </div>
      <% } %>

      <a class="brand" href="<%= baseUrl %>" target="_blank" rel="noopener">EmbedStream</a>
    </div>

    <div class="meta">
      <div class="title" title="<%= record.title %>"><%= record.title %></div>
      <% if (record.description) { %>
        <div class="desc" title="<%= record.description %>"><%= record.description %></div>
      <% } %>
      <% if (record.tags && record.tags.length) { %>
        <div class="tags">
          <% record.tags.slice(0, 8).forEach(function(t) { %>
            <span class="tag"><%= t %></span>
          <% }) %>
        </div>
      <% } %>
    </div>
  </div>
</body>
</html>