peertube-plugin-odysee-player 1.0.0

package/README.md

@@ -0,0 +1,89 @@
+# PeerTube Plugin — Odysee Player
+
+Embed and manage unlisted Odysee videos directly inside PeerTube with full episode management.
+
+---
+
+## Features
+
+- ▶ Embed unlisted Odysee videos via iframe
+- ✏ Manually set title, description, thumbnail per episode
+- 🔢 Custom episode numbering (pick any number)
+- 🗑 Delete episodes from admin panel
+- 📄 Episode pagination below the video (6 per page)
+- ✨ Active episode card is highlighted for both admin and users
+
+---
+
+## Folder Structure
+
+peertube-plugin-odysee-player/
+├── index.js                  ← Plugin entry point
+├── package.json              ← Plugin manifest
+├── server/
+│   └── plugin.js             ← API routes (get/add/delete episodes)
+└── client/
+    ├── client-plugin.js      ← Admin panel + player UI
+    └── styles.css            ← All styles
+---
+
+## Installation
+
+### Option 1 — Install from folder (Development)
+
+1. Copy the entire peertube-plugin-odysee-player folder into your PeerTube plugins directory:
+  
+   /var/www/peertube/storage/plugins/
+   
+2. Inside the folder, run:
+  
+   npm install
+   
+3. In PeerTube Admin → Plugins/Themes → Install → select the plugin.
+
+### Option 2 — Publish to npm then install via PeerTube UI
+
+1. Run npm publish from inside the plugin folder.
+2. In PeerTube Admin → Plugins/Themes → search peertube-plugin-odysee-player → Install.
+
+---
+
+## How to Use
+
+### Admin Panel
+
+1. Go to Admin → Plugins → Odysee Player → Settings
+2. Click ⚙ Manage Episodes tab
+3. Fill in:
+   - Episode Number — any number you choose (e.g. 1, 5, 12)
+   - Title — episode title
+   - Description — optional
+   - Thumbnail URL — optional image URL
+   - Odysee Embed ID — from the Odysee embed URL:
+     https://odysee.com/$/embed/**THIS_IS_THE_EMBED_ID**
+4. Cl+ Add Episodede**
+5. To delete, click 🗑 next to any episode
+
+### Player Preview
+
+Cl▶ Preview Playerer** tab to see how it looks for users.
+
+---
+
+## Odysee Embed ID
+
+To get the embed ID of an unlisted Odysee video:
+
+1. Open your video on Odysee
+2. ClSharere*Embeded**
+3. Copy the URL from the iframe src:
+  
+   https://odysee.com/$/embed/my-video-title:abc123hash
+   
+4. The embed ID is: my-video-title:abc123hash
+
+---
+
+## License
+
+MIT

package/client/client-plugin.js

@@ -0,0 +1,374 @@
+[5/9/26 7:01 PM] Mohammad: /* global registerHook, peertubeHelpers */
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+const EPISODES_PER_PAGE = 6
+const PLUGIN_NAME = 'peertube-plugin-odysee-player'
+
+// ─── State ────────────────────────────────────────────────────────────────────
+let state = {
+  episodes: [],
+  currentEpisodeId: null,
+  currentPage: 1,
+  isAdmin: false,
+  baseUrl: ''
+}
+
+// ─── API Helpers ──────────────────────────────────────────────────────────────
+async function apiGet (path) {
+  const res = await fetch(/plugins/odysee-player/router${path})
+  return res.json()
+}
+
+async function apiPost (path, body) {
+  const res = await fetch(/plugins/odysee-player/router${path}, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body)
+  })
+  return res.json()
+}
+
+async function apiDelete (path) {
+  const res = await fetch(/plugins/odysee-player/router${path}, {
+    method: 'DELETE'
+  })
+  return res.json()
+}
+
+// ─── Load Episodes ────────────────────────────────────────────────────────────
+async function loadEpisodes () {
+  const data = await apiGet('/episodes')
+  state.episodes = data.episodes || []
+  if (!state.currentEpisodeId && state.episodes.length > 0) {
+    state.currentEpisodeId = state.episodes[0].id
+  }
+}
+
+// ─── Pagination helpers ───────────────────────────────────────────────────────
+function getTotalPages () {
+  return Math.max(1, Math.ceil(state.episodes.length / EPISODES_PER_PAGE))
+}
+
+function getPageEpisodes () {
+  const start = (state.currentPage - 1) * EPISODES_PER_PAGE
+  return state.episodes.slice(start, start + EPISODES_PER_PAGE)
+}
+
+function getCurrentEpisode () {
+  return state.episodes.find(e => e.id === state.currentEpisodeId) || null
+}
+
+// ─── Render Player ────────────────────────────────────────────────────────────
+function renderPlayer (container) {
+  const ep = getCurrentEpisode()
+  const totalPages = getTotalPages()
+  const pageEps = getPageEpisodes()
+
+  container.innerHTML = 
+    <div class="odysee-player-wrap">
+
+      ${ep ? 
+      <!-- VIDEO SECTION -->
+      <div class="op-video-section">
+        <div class="op-video-frame-wrap">
+          <iframe
+            src="https://odysee.com/$/embed/${ep.embedId}"
+            frameborder="0"
+            allowfullscreen
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          ></iframe>
+        </div>
+        <div class="op-video-meta">
+          <span class="op-episode-badge">Episode ${ep.episodeNumber}</span>
+          <h2 class="op-video-title">${escHtml(ep.title)}</h2>
+          ${ep.description ? <p class="op-video-desc">${escHtml(ep.description)}</p> : ''}
+        </div>
+      </div>
+       : 
+      <div class="op-empty-state">
+        <div class="op-empty-icon">📺</div>
+        <p>No episodes available yet.</p>
+        ${state.isAdmin ? '<p>Use the <strong>Manage Episodes</strong> tab to add your first episode.</p>' : ''}
+      </div>
+      }
+
+      <!-- EPISODE GRID -->
+      ${state.episodes.length > 0 ? 
+      <div class="op-episodes-section">
+        <h3 class="op-section-label">Episodes</h3>
+        <div class="op-episode-grid">
+          ${pageEps.map(ep => renderEpisodeCard(ep)).join('')}
+        </div>
+
+        <!-- PAGINATION -->
+        ${totalPages > 1 ? 
+        <div class="op-pagination">
+          <button class="op-page-btn" data-action="prev" ${state.currentPage === 1 ? 'disabled' : ''}>
+            &#8592; Prev
+          </button>
+          <div class="op-page-numbers">
+            ${Array.from({ length: totalPages }, (_, i) => i + 1).map(p => 
+              <button class="op-page-num ${p === state.currentPage ? 'active' : ''}" data-page="${p}">${p}</button>
+            ).join('')}
+          </div>
+          <button class="op-page-btn" data-action="next" ${state.currentPage === totalPages ? 'disabled' : ''}>
+            Next &#8594;
+          </button>
+        </div>
+         : ''}
+      </div>
+       : ''}
+    </div>
+[5/9/26 7:01 PM] Mohammad: // Episode card click
+  container.querySelectorAll('.op-episode-card').forEach(card => {
+    card.addEventListener('click', () => {
+      const id = Number(card.dataset.id)
+      state.currentEpisodeId = id
+      renderPlayer(container)
+    })
+  })
+
+  // Pagination clicks
+  container.querySelectorAll('[data-action]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      if (btn.dataset.action === 'prev' && state.currentPage > 1) state.currentPage--
+      if (btn.dataset.action === 'next' && state.currentPage < totalPages) state.currentPage++
+      renderPlayer(container)
+    })
+  })
+
+  container.querySelectorAll('[data-page]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      state.currentPage = Number(btn.dataset.page)
+      renderPlayer(container)
+    })
+  })
+}
+
+function renderEpisodeCard (ep) {
+  const isActive = ep.id === state.currentEpisodeId
+  const thumb = ep.thumbnail || https://picsum.photos/seed/${ep.id}/320/180
+  return 
+    <div class="op-episode-card ${isActive ? 'is-active' : ''}" data-id="${ep.id}">
+      <div class="op-card-thumb">
+        <img src="${escHtml(thumb)}" alt="${escHtml(ep.title)}" loading="lazy" />
+        <div class="op-card-overlay">
+          <span class="op-play-icon">${isActive ? '▶' : '▷'}</span>
+        </div>
+        ${isActive ? '<div class="op-now-playing">NOW PLAYING</div>' : ''}
+      </div>
+      <div class="op-card-body">
+        <span class="op-ep-num">EP ${ep.episodeNumber}</span>
+        <p class="op-card-title">${escHtml(ep.title)}</p>
+      </div>
+    </div>
+  
+}
+
+// ─── Render Admin Panel ───────────────────────────────────────────────────────
+function renderAdmin (container) {
+  container.innerHTML = 
+    <div class="op-admin-wrap">
+      <div class="op-admin-header">
+        <h2>⚙ Odysee Episode Manager</h2>
+        <p class="op-admin-sub">Add, manage, and delete Odysee embedded episodes.</p>
+      </div>
+
+      <!-- ADD FORM -->
+      <div class="op-add-form">
+        <h3>Add New Episode</h3>
+        <div class="op-form-grid">
+          <div class="op-field">
+            <label>Episode Number <span class="req">*</span></label>
+            <input type="number" id="op-ep-num" placeholder="e.g. 3" min="1" />
+            <span class="op-field-err" id="err-num"></span>
+          </div>
+          <div class="op-field">
+            <label>Title <span class="req">*</span></label>
+            <input type="text" id="op-ep-title" placeholder="Episode title" />
+            <span class="op-field-err" id="err-title"></span>
+          </div>
+          <div class="op-field op-field-full">
+            <label>Description</label>
+            <textarea id="op-ep-desc" placeholder="Episode description (optional)" rows="3"></textarea>
+          </div>
+          <div class="op-field">
+            <label>Thumbnail URL</label>
+            <input type="url" id="op-ep-thumb" placeholder="https://example.com/thumb.jpg" />
+          </div>
+          <div class="op-field">
+            <label>Odysee Embed ID <span class="req">*</span></label>
+            <input type="text" id="op-ep-embed" placeholder="Paste the Odysee embed ID or URL path" />
+            <span class="op-field-err" id="err-embed"></span>
+            <span class="op-field-hint">From: odysee.com/$/embed/<strong>THIS_PART</strong></span>
+          </div>
+        </div>
+        <div class="op-form-actions">
+          <button id="op-add-btn" class="op-btn op-btn-primary">+ Add Episode</button>
+          <span id="op-add-msg" class="op-msg"></span>
+        </div>
+      </div>
+
+      <!-- EPISODE LIST -->
+      <div class="op-episode-list-wrap">
+        <h3>All Episodes <span class="op-count">(${state.episodes.length})</span></h3>
+        ${state.episodes.length === 0 ? 
+          <div class="op-no-eps">No episodes yet. Add your first episode above.</div>
+[5/9/26 7:01 PM] Mohammad: : 
+          <div class="op-admin-list">
+            ${state.episodes.map(ep => 
+              <div class="op-admin-ep-row" data-id="${ep.id}">
+                <div class="op-admin-ep-thumb">
+                  <img src="${escHtml(ep.thumbnail || https://picsum.photos/seed/${ep.id}/80/45)}" alt="" />
+                </div>
+                <div class="op-admin-ep-info">
+                  <span class="op-admin-ep-num">EP ${ep.episodeNumber}</span>
+                  <strong>${escHtml(ep.title)}</strong>
+                  ${ep.description ? <p>${escHtml(ep.description.substring(0, 80))}${ep.description.length > 80 ? '...' : ''}</p> : ''}
+                  <code class="op-embed-id">${escHtml(ep.embedId)}</code>
+                </div>
+                <div class="op-admin-ep-actions">
+                  <button class="op-btn op-btn-danger op-delete-btn" data-id="${ep.id}">🗑 Delete</button>
+                </div>
+              </div>
+            ).join('')}
+          </div>
+        }
+      </div>
+    </div>
+  
+
+  // Add episode
+  container.querySelector('#op-add-btn').addEventListener('click', async () => {
+    const num = container.querySelector('#op-ep-num').value
+    const title = container.querySelector('#op-ep-title').value
+    const desc = container.querySelector('#op-ep-desc').value
+    const thumb = container.querySelector('#op-ep-thumb').value
+    const embed = container.querySelector('#op-ep-embed').value
+
+    // Clear errors
+    container.querySelectorAll('.op-field-err').forEach(e => (e.textContent = ''))
+    let valid = true
+
+    if (!num  isNaN(Number(num))  Number(num) < 1) {
+      container.querySelector('#err-num').textContent = 'Valid episode number required'
+      valid = false
+    }
+    if (!title.trim()) {
+      container.querySelector('#err-title').textContent = 'Title is required'
+      valid = false
+    }
+    if (!embed.trim()) {
+      container.querySelector('#err-embed').textContent = 'Embed ID is required'
+      valid = false
+    }
+    if (!valid) return
+
+    const btn = container.querySelector('#op-add-btn')
+    btn.disabled = true
+    btn.textContent = 'Saving...'
+
+    const result = await apiPost('/episodes', {
+      episodeNumber: Number(num),
+      title,
+      description: desc,
+      thumbnail: thumb,
+      embedId: embed.trim()
+    })
+
+    btn.disabled = false
+    btn.textContent = '+ Add Episode'
+
+    const msg = container.querySelector('#op-add-msg')
+    if (result.error) {
+      msg.textContent = '✖ ' + result.error
+      msg.className = 'op-msg op-msg-error'
+    } else {
+      msg.textContent = '✔ Episode added!'
+      msg.className = 'op-msg op-msg-success'
+      await loadEpisodes()
+      renderAdmin(container)
+    }
+  })
+
+  // Delete buttons
+  container.querySelectorAll('.op-delete-btn').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const id = Number(btn.dataset.id)
+      const ep = state.episodes.find(e => e.id === id)
+      if (!ep) return
+      if (!confirm(Delete Episode ${ep.episodeNumber}: "${ep.title}"?)) return
+
+      btn.disabled = true
+      btn.textContent = 'Deleting...'
+
+      const result = await apiDelete(/episodes/${id})
+      if (result.success) {
+        if (state.currentEpisodeId === id) state.currentEpisodeId = null
+        await loadEpisodes()
+        renderAdmin(container)
+      } else {
+        btn.disabled = false
+        btn.textContent = '🗑 Delete'
+        alert('Failed to delete: ' + (result.error || 'Unknown error'))
+      }
+    })
+  })
+}
+
+// ─── Utility ──────────────────────────────────────────────────────────────────
+function escHtml (str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+// ─── Plugin Registration ──────────────────────────────────────────────────────
+window.registerPlugin = async function (args) {
+  const { registerHook, peertubeHelpers } = args
+[5/9/26 7:01 PM] Mohammad: // ── Admin Settings Page ────────────────────────────────────────────────────
+  registerHook({
+    target: 'action:admin-plugin-settings.init',
+    handler: async ({ setting }) => {
+      if (setting.npmName !== PLUGIN_NAME) return
+      state.isAdmin = true
+
+      const container = document.createElement('div')
+      container.id = 'odysee-admin-root'
+
+      const settingsEl = document.querySelector('.plugin-settings')
+      if (settingsEl) {
+        settingsEl.appendChild(container)
+      }
+
+      await loadEpisodes()
+
+      // Tabs
+      const tabWrap = document.createElement('div')
+      tabWrap.className = 'op-tabs'
+      tabWrap.innerHTML = 
+        <button class="op-tab active" data-tab="manage">⚙ Manage Episodes</button>
+        <button class="op-tab" data-tab="preview">▶ Preview Player</button>
+      
+      container.appendChild(tabWrap)
+
+      const content = document.createElement('div')
+      content.id = 'op-tab-content'
+      container.appendChild(content)
+
+      renderAdmin(content)
+
+      tabWrap.querySelectorAll('.op-tab').forEach(tab => {
+        tab.addEventListener('click', async () => {
+          tabWrap.querySelectorAll('.op-tab').forEach(t => t.classList.remove('active'))
+          tab.classList.add('active')
+          await loadEpisodes()
+          if (tab.dataset.tab === 'manage') renderAdmin(content)
+          else renderPlayer(content)
+        })
+      })
+    }
+  })
+}

package/client/style.css

@@ -0,0 +1,555 @@
+[5/9/26 7:04 PM] Mohammad: /* ═══════════════════════════════════════════════════════════════
+   Odysee Player Plugin — Styles
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Tabs ─────────────────────────────────────────────────────── */
+.op-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 24px 0 0;
+  border-bottom: 2px solid #2a2a3a;
+  padding-bottom: 0;
+}
+
+.op-tab {
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  color: #aaa;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  margin-bottom: -2px;
+  padding: 10px 20px;
+  transition: all 0.2s;
+}
+
+.op-tab:hover {
+  color: #fff;
+}
+
+.op-tab.active {
+  border-bottom-color: #f5a623;
+  color: #f5a623;
+}
+
+/* ── Admin Wrap ───────────────────────────────────────────────── */
+.op-admin-wrap {
+  padding: 20px 0;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.op-admin-header h2 {
+  color: #f5f5f5;
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0 0 4px;
+}
+
+.op-admin-sub {
+  color: #888;
+  font-size: 13px;
+  margin: 0 0 24px;
+}
+
+/* ── Add Form ─────────────────────────────────────────────────── */
+.op-add-form {
+  background: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 28px;
+}
+
+.op-add-form h3 {
+  color: #e0e0e0;
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 16px;
+}
+
+.op-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.op-field-full {
+  grid-column: 1 / -1;
+}
+
+.op-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.op-field label {
+  color: #bbb;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.op-field input,
+.op-field textarea {
+  background: #0f0f1e;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #f0f0f0;
+  font-size: 13px;
+  padding: 9px 12px;
+  transition: border-color 0.2s;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.op-field input:focus,
+.op-field textarea:focus {
+  border-color: #f5a623;
+  outline: none;
+}
+
+.op-field-err {
+  color: #ff5555;
+  font-size: 11px;
+  min-height: 14px;
+}
+
+.op-field-hint {
+  color: #666;
+  font-size: 11px;
+}
+
+.req {
+  color: #f5a623;
+}
+
+.op-form-actions {
+  align-items: center;
+  display: flex;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+/* ── Buttons ──────────────────────────────────────────────────── */
+.op-btn {
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 9px 18px;
+  transition: all 0.2s;
+}
+
+.op-btn-primary {
+  background: #f5a623;
+  color: #0f0f1e;
+}
+
+.op-btn-primary:hover:not(:disabled) {
+  background: #ffb84d;
+  transform: translateY(-1px);
+}
+
+.op-btn-primary:disabled {
+  background: #7a5310;
+  color: #555;
+  cursor: not-allowed;
+}
+
+.op-btn-danger {
+  background: rgba(220, 53, 69, 0.15);
+  border: 1px solid rgba(220, 53, 69, 0.4);
+  color: #ff6b7a;
+}
+
+.op-btn-danger:hover:not(:disabled) {
+  background: rgba(220, 53, 69, 0.3);
+}
+
+/* ── Messages ─────────────────────────────────────────────────── */
+.op-msg {
+  font-size: 13px;
+}
+
+.op-msg-success {
+  color: #4caf50;
+}
+
+.op-msg-error {
+  color: #ff5555;
+}
+
+/* ── Episode List (Admin) ─────────────────────────────────────── */
+.op-episode-list-wrap h3 {
+  color: #e0e0e0;
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 14px;
+}
+
+.op-count {
+  color: #888;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.op-no-eps {
+  background: #1a1a2e;
+  border: 1px dashed #2a2a4a;
+  border-radius: 8px;
+  color: #666;
+  font-size: 13px;
+  padding: 24px;
+  text-align: center;
+}
+
+.op-admin-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.op-admin-ep-row {
+  align-items: center;
+  background: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  border-radius: 8px;
+  display: flex;
+  gap: 14px;
+  padding: 12px 16px;
+  transition: border-color 0.2s;
+}
+
+.op-admin-ep-row:hover {
+  border-color: #3a3a5a;
+}
+
+.op-admin-ep-thumb {
+  flex-shrink: 0;
+  height: 45px;
+  width: 80px;
+}
+
+.op-admin-ep-thumb img {
+  border-radius: 4px;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.op-admin-ep-info {
+  flex: 1;
+  min-width: 0;
+}
+[5/9/26 7:04 PM] Mohammad: .op-admin-ep-num {
+  background: rgba(245, 166, 35, 0.15);
+  border-radius: 4px;
+  color: #f5a623;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 2px 6px;
+}
+
+.op-admin-ep-info strong {
+  color: #e0e0e0;
+  display: block;
+  font-size: 14px;
+  margin: 5px 0 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.op-admin-ep-info p {
+  color: #888;
+  font-size: 12px;
+  margin: 0 0 4px;
+}
+
+.op-embed-id {
+  background: #0f0f1e;
+  border-radius: 3px;
+  color: #5599ff;
+  font-size: 11px;
+  padding: 2px 6px;
+}
+
+.op-admin-ep-actions {
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PUBLIC PLAYER
+   ═══════════════════════════════════════════════════════════════ */
+.odysee-player-wrap {
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  max-width: 100%;
+}
+
+/* ── Video Frame ──────────────────────────────────────────────── */
+.op-video-section {
+  margin-bottom: 28px;
+}
+
+.op-video-frame-wrap {
+  aspect-ratio: 16 / 9;
+  background: #000;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.op-video-frame-wrap iframe {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.op-video-meta {
+  padding: 16px 4px 0;
+}
+
+.op-episode-badge {
+  background: rgba(245, 166, 35, 0.15);
+  border: 1px solid rgba(245, 166, 35, 0.3);
+  border-radius: 20px;
+  color: #f5a623;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 3px 10px;
+  text-transform: uppercase;
+}
+
+.op-video-title {
+  color: #f0f0f0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 10px 0 8px;
+}
+
+.op-video-desc {
+  color: #999;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* ── Episodes Section ─────────────────────────────────────────── */
+.op-episodes-section {
+  margin-top: 8px;
+}
+
+.op-section-label {
+  color: #ccc;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  margin: 0 0 14px;
+  text-transform: uppercase;
+}
+
+.op-episode-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+/* ── Episode Card ─────────────────────────────────────────────── */
+.op-episode-card {
+  background: #1a1a2e;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.op-episode-card:hover {
+  border-color: rgba(245, 166, 35, 0.4);
+  transform: translateY(-2px);
+}
+
+.op-episode-card.is-active {
+  border-color: #f5a623;
+  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15), 0 4px 20px rgba(245, 166, 35, 0.2);
+}
+
+.op-card-thumb {
+  aspect-ratio: 16/9;
+  position: relative;
+  overflow: hidden;
+}
+
+.op-card-thumb img {
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s;
+  width: 100%;
+}
+
+.op-episode-card:hover .op-card-thumb img {
+  transform: scale(1.05);
+}
+
+.op-card-overlay {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.4);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.2s;
+}
+
+.op-episode-card:hover .op-card-overlay,
+.op-episode-card.is-active .op-card-overlay {
+  opacity: 1;
+}
+
+.op-play-icon {
+  color: #fff;
+  font-size: 24px;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
+}
+
+.op-now-playing {
+  background: #f5a623;
+  bottom: 6px;
+  color: #0f0f1e;
+  font-size: 9px;
+  font-weight: 800;
+  left: 6px;
+  letter-spacing: 0.8px;
+  padding: 2px 6px;
+  position: absolute;
+  border-radius: 3px;
+}
+
+.op-card-body {
+  padding: 8px 10px 10px;
+}
+
+.op-ep-num {
+  color: #f5a623;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.op-card-title {
+  color: #ddd;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 4px 0 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* ── Pagination ───────────────────────────────────────────────── */
+.op-pagination {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 20px;
+}
+[5/9/26 7:04 PM] Mohammad: .op-page-btn {
+  background: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  border-radius: 6px;
+  color: #ccc;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 7px 14px;
+  transition: all 0.2s;
+}
+
+.op-page-btn:hover:not(:disabled) {
+  background: #2a2a4a;
+  color: #fff;
+}
+
+.op-page-btn:disabled {
+  color: #444;
+  cursor: not-allowed;
+}
+
+.op-page-numbers {
+  display: flex;
+  gap: 6px;
+}
+
+.op-page-num {
+  background: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  border-radius: 6px;
+  color: #aaa;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  height: 34px;
+  transition: all 0.2s;
+  width: 34px;
+}
+
+.op-page-num:hover {
+  background: #2a2a4a;
+  color: #fff;
+}
+
+.op-page-num.active {
+  background: #f5a623;
+  border-color: #f5a623;
+  color: #0f0f1e;
+}
+
+/* ── Empty State ──────────────────────────────────────────────── */
+.op-empty-state {
+  background: #1a1a2e;
+  border: 1px dashed #2a2a4a;
+  border-radius: 10px;
+  color: #888;
+  font-size: 14px;
+  margin-bottom: 24px;
+  padding: 40px;
+  text-align: center;
+}
+
+.op-empty-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+}
+
+/* ── Responsive ───────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .op-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .op-episode-grid {
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  }
+
+  .op-admin-ep-row {
+    flex-wrap: wrap;
+  }
+}

package/index.js

@@ -0,0 +1,6 @@
+// PeerTube requires this file as the plugin entry point
+// It re-exports the register/unregister from server/plugin.js
+
+const { register, unregister } = require('./server/plugin')
+
+module.exports = { register, unregister }

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "peertube-plugin-odysee-player",
+  "version": "1.0.0",
+  "description": "Embed and manage unlisted Odysee videos with episode management inside PeerTube admin UI",
+  "engine": {
+    "peertube": ">=5.0.0"
+  },
+  "keywords": [
+    "peertube",
+    "plugin",
+    "odysee",
+    "embed",
+    "episodes"
+  ],
+  "homepage": "",
+  "author": "",
+  "bugs": "",
+  "library": "./client/client-plugin.js",
+  "staticDirs": {},
+  "css": [
+    "client/styles.css"
+  ],
+  "clientScripts": [
+    {
+      "script": "client/client-plugin.js",
+      "scopes": [
+        "admin-plugin-settings",
+        "common"
+      ]
+    }
+  ],
+  "translations": {},
+  "settings": [],
+  "storage": {}
+}

package/server/plugin.js

@@ -0,0 +1,76 @@
+async function register ({ registerSetting, settingsManager, storageManager, peertubeHelpers, getRouter }) {
+  const router = getRouter()
+
+  // ─── GET all episodes ───────────────────────────────────────────────────────
+  router.get('/episodes', async (req, res) => {
+    try {
+      const raw = await storageManager.getData('episodes')
+      const episodes = raw ? JSON.parse(raw) : []
+      return res.json({ episodes })
+    } catch (e) {
+      return res.status(500).json({ error: 'Failed to load episodes' })
+    }
+  })
+
+  // ─── POST add episode ───────────────────────────────────────────────────────
+  router.post('/episodes', async (req, res) => {
+    try {
+      const { episodeNumber, title, description, thumbnail, embedId } = req.body
+
+      if (!episodeNumber  !title  !embedId) {
+        return res.status(400).json({ error: 'episodeNumber, title, and embedId are required' })
+      }
+
+      const raw = await storageManager.getData('episodes')
+      const episodes = raw ? JSON.parse(raw) : []
+
+      const exists = episodes.find(e => e.episodeNumber === Number(episodeNumber))
+      if (exists) {
+        return res.status(409).json({ error: Episode number ${episodeNumber} already exists })
+      }
+
+      const newEpisode = {
+        id: Date.now(),
+        episodeNumber: Number(episodeNumber),
+        title: title.trim(),
+        description: description ? description.trim() : '',
+        thumbnail: thumbnail ? thumbnail.trim() : '',
+        embedId: embedId.trim(),
+        createdAt: new Date().toISOString()
+      }
+
+      episodes.push(newEpisode)
+      episodes.sort((a, b) => a.episodeNumber - b.episodeNumber)
+
+      await storageManager.storeData('episodes', JSON.stringify(episodes))
+      return res.json({ episode: newEpisode })
+    } catch (e) {
+      return res.status(500).json({ error: 'Failed to save episode' })
+    }
+  })
+
+  // ─── DELETE episode ─────────────────────────────────────────────────────────
+  router.delete('/episodes/:id', async (req, res) => {
+    try {
+      const id = Number(req.params.id)
+      const raw = await storageManager.getData('episodes')
+      let episodes = raw ? JSON.parse(raw) : []
+
+      const before = episodes.length
+      episodes = episodes.filter(e => e.id !== id)
+
+      if (episodes.length === before) {
+        return res.status(404).json({ error: 'Episode not found' })
+      }
+
+      await storageManager.storeData('episodes', JSON.stringify(episodes))
+      return res.json({ success: true })
+    } catch (e) {
+      return res.status(500).json({ error: 'Failed to delete episode' })
+    }
+  })
+}
+
+async function unregister () {}
+
+module.exports = { register, unregister }