tunecamp 1.0.0

package/templates/default/release.hbs

@@ -0,0 +1,553 @@
+<div class="container">
+  <nav class="breadcrumb">
+    <a href="{{path backUrl}}">← Back to catalog</a>
+  </nav>
+
+  <!-- Share & Embed Section -->
+  <section class="release-share-section">
+    <div class="share-actions">
+      <h3>Share & Embed</h3>
+      <div class="share-buttons">
+        <a href="{{path backUrl}}" class="share-btn" title="View Catalog">
+          <i class="fas fa-list"></i> Catalog
+        </a>
+        <a href="{{assetPath 'feed.xml'}}" class="share-btn" title="RSS Feed" target="_blank">
+          <i class="fas fa-rss"></i> RSS Feed
+        </a>
+        <a href="{{assetPath 'atom.xml'}}" class="share-btn" title="Atom Feed" target="_blank">
+          <i class="fas fa-rss-square"></i> Atom Feed
+        </a>
+        <button class="share-btn" onclick="copyShareLink()" title="Copy Share Link">
+          <i class="fas fa-link"></i> Copy Link
+        </button>
+        <button class="share-btn" onclick="showEmbedCode()" title="Show Embed Code">
+          <i class="fas fa-code"></i> Embed Code
+        </button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Embed Code Modal -->
+  <div id="embedModal" class="embed-modal" style="display: none;">
+    <div class="embed-modal-content">
+      <div class="embed-modal-header">
+        <h3>Embed Code</h3>
+        <button class="embed-modal-close" onclick="closeEmbedModal()">&times;</button>
+      </div>
+      <div class="embed-modal-body">
+        <div class="embed-tabs">
+          <button class="embed-tab active" onclick="switchEmbedTab('full')">Full Embed</button>
+          <button class="embed-tab" onclick="switchEmbedTab('compact')">Compact</button>
+        </div>
+        <div id="embedCodeContent" class="embed-code-content">
+          <textarea id="embedCodeText" readonly class="embed-code-text"></textarea>
+          <button class="btn btn-primary" onclick="copyEmbedCode()">
+            <i class="fas fa-copy"></i> Copy Code
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <article class="release-detail">
+    <header class="release-header">
+      {{#if release.coverUrl}}
+      <div class="release-cover-large">
+        <img src="{{path release.coverUrl}}" alt="{{release.config.title}}">
+      </div>
+      {{/if}}
+
+      <div class="release-metadata">
+        <h1>{{release.config.title}}</h1>
+
+        {{#if artist}}
+        <p class="release-artist">by {{artist.name}}</p>
+        {{/if}}
+
+        <p class="release-date">Released {{formatDate release.config.date}}</p>
+        
+        <p class="release-downloads" id="releaseDownloads" style="display: none;">
+          <i class="fas fa-download"></i> <span id="downloadCount">0</span> downloads
+        </p>
+
+        {{#if release.config.genres}}
+        <div class="release-genres">
+          {{#each release.config.genres}}
+          <span class="genre-tag">{{this}}</span>
+          {{/each}}
+        </div>
+        {{/if}}
+
+        {{#if release.config.description}}
+        <p class="release-description">{{release.config.description}}</p>
+        {{/if}}
+
+        {{#if release.config.credits}}
+        <div class="release-credits">
+          <h3>Credits</h3>
+          <ul>
+            {{#each release.config.credits}}
+            <li><strong>{{role}}:</strong> {{name}}</li>
+            {{/each}}
+          </ul>
+        </div>
+        {{/if}}
+
+        {{#if release.config.license}}
+        <div class="release-license">
+          <h3>License</h3>
+          <p class="license-info">
+            {{#if (eq release.config.license "copyright")}}
+            <i class="fas fa-copyright"></i> All rights reserved. This work is protected by copyright.
+            {{else if (eq release.config.license "cc-by")}}
+            <i class="fab fa-creative-commons"></i> Licensed under <a
+              href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a> - Attribution
+            {{else if (eq release.config.license "cc-by-sa")}}
+            <i class="fab fa-creative-commons"></i> Licensed under <a
+              href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a> -
+            Attribution-ShareAlike
+            {{else if (eq release.config.license "cc-by-nc")}}
+            <i class="fab fa-creative-commons"></i> Licensed under <a
+              href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a> -
+            Attribution-NonCommercial
+            {{else if (eq release.config.license "cc-by-nc-sa")}}
+            <i class="fab fa-creative-commons"></i> Licensed under <a
+              href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> -
+            Attribution-NonCommercial-ShareAlike
+            {{else if (eq release.config.license "cc-by-nc-nd")}}
+            <i class="fab fa-creative-commons"></i> Licensed under <a
+              href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a> -
+            Attribution-NonCommercial-NoDerivatives
+            {{else if (eq release.config.license "cc-by-nd")}}
+            <i class="fab fa-creative-commons"></i> Licensed under <a
+              href="https://creativecommons.org/licenses/by-nd/4.0/" target="_blank">CC BY-ND 4.0</a> -
+            Attribution-NoDerivatives
+            {{else if (eq release.config.license "public-domain")}}
+            <i class="fas fa-globe"></i> Public Domain - This work is in the public domain.
+            {{/if}}
+          </p>
+        </div>
+        {{/if}}
+
+        {{#if release.config.download}}
+        <div class="release-download-actions">
+          {{#if (eq release.config.download "free")}}
+          <button class="btn btn-primary" onclick="downloadAll()">
+            <i class="fas fa-download"></i> Download All (Free)
+          </button>
+          {{else if (eq release.config.download "paycurtain")}}
+          <div class="paycurtain">
+            <div class="support-message">
+              <p><strong>Support the artist!</strong></p>
+              <p>Suggested donation: ${{release.config.price}}</p>
+              <p class="honor-system">This is an honor system - you can download for free, but your support helps the
+                artist continue creating music.</p>
+            </div>
+            <div class="payment-buttons">
+              {{#if release.config.paypalLink}}
+              <a href="{{release.config.paypalLink}}" target="_blank" class="btn btn-primary">
+                <i class="fab fa-paypal"></i> Support via PayPal
+              </a>
+              {{/if}}
+              {{#if release.config.stripeLink}}
+              <a href="{{release.config.stripeLink}}" target="_blank" class="btn btn-secondary">
+                <i class="fab fa-stripe"></i> Support via Stripe
+              </a>
+              {{/if}}
+              <button class="btn btn-outline" onclick="downloadAll()">
+                <i class="fas fa-download"></i> Download Free
+              </button>
+              {{#unless release.config.paypalLink}}
+              {{#unless release.config.stripeLink}}
+              <p class="payment-info">No payment links configured - download is free</p>
+              {{/unless}}
+              {{/unless}}
+            </div>
+          </div>
+          {{else if (eq release.config.download "codes")}}
+          <!-- Unlock Codes Section -->
+          <div class="unlock-codes-section" id="unlockCodesSection">
+            <div class="unlock-header">
+              <i class="fas fa-lock"></i>
+              <h3>Download with Unlock Code</h3>
+              <p>Enter your unlock code to access downloads</p>
+            </div>
+
+            <div class="unlock-form" id="unlockForm">
+              <div class="code-input-group">
+                <input type="text" id="unlockCodeInput" placeholder="XXXX-XXXX-XXXX" maxlength="14" autocomplete="off"
+                  spellcheck="false">
+                <button class="btn btn-primary" id="validateCodeBtn">
+                  <i class="fas fa-key"></i> Unlock
+                </button>
+              </div>
+              <p class="unlock-error" id="unlockError" style="display: none;"></p>
+            </div>
+
+            <div class="unlock-success" id="unlockSuccess" style="display: none;">
+              <div class="success-icon">
+                <i class="fas fa-check-circle"></i>
+              </div>
+              <h4>Code Validated!</h4>
+              <p id="unlockMessage">You can now download this release.</p>
+              <button class="btn btn-primary btn-lg" onclick="downloadAll()">
+                <i class="fas fa-download"></i> Download All Tracks
+              </button>
+            </div>
+
+            <div class="unlock-info">
+              <p><small><i class="fas fa-info-circle"></i> Don't have a code? Contact the artist or purchase
+                  one.</small></p>
+            </div>
+          </div>
+
+          <!-- GunDB Unlock Codes Script -->
+          <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+          <script src="{{assetPath 'assets/unlock-codes.js'}}"></script>
+          <script>
+            (function () {
+              const releaseSlug = '{{release.slug}}';
+              const namespace = '{{#if release.config.unlockCodes.namespace}}{{release.config.unlockCodes.namespace}}{{else}}tunecamp{{/if}}';
+
+              // Initialize unlock codes
+              let unlockCodes;
+
+              document.addEventListener('DOMContentLoaded', function () {
+                // Check if already unlocked
+                const unlockedReleases = JSON.parse(localStorage.getItem('tunecamp_unlocked') || '{}');
+                if (unlockedReleases[releaseSlug]) {
+                  showSuccess('Previously unlocked!');
+                  return;
+                }
+
+                // Initialize GunDB unlock codes
+                unlockCodes = new TunecampUnlockCodes({ namespace });
+
+                // Bind form events
+                const input = document.getElementById('unlockCodeInput');
+                const btn = document.getElementById('validateCodeBtn');
+
+                // Format code as user types
+                input.addEventListener('input', function (e) {
+                  let value = e.target.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
+                  if (value.length > 4) value = value.slice(0, 4) + '-' + value.slice(4);
+                  if (value.length > 9) value = value.slice(0, 9) + '-' + value.slice(9);
+                  if (value.length > 14) value = value.slice(0, 14);
+                  e.target.value = value;
+                });
+
+                // Validate on enter
+                input.addEventListener('keypress', function (e) {
+                  if (e.key === 'Enter') validateCode();
+                });
+
+                // Validate on button click
+                btn.addEventListener('click', validateCode);
+              });
+
+              async function validateCode() {
+                const input = document.getElementById('unlockCodeInput');
+                const error = document.getElementById('unlockError');
+                const btn = document.getElementById('validateCodeBtn');
+                const code = input.value.trim();
+
+                if (code.length < 14) {
+                  showError('Please enter a complete code (format: XXXX-XXXX-XXXX)');
+                  return;
+                }
+
+                btn.disabled = true;
+                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Validating...';
+                error.style.display = 'none';
+
+                try {
+                  const result = await unlockCodes.validateCode(releaseSlug, code);
+
+                  if (result.valid) {
+                    // Redeem the code
+                    const redeemResult = await unlockCodes.redeemCode(releaseSlug, code);
+
+                    if (redeemResult.success) {
+                      // Store in localStorage
+                      const unlockedReleases = JSON.parse(localStorage.getItem('tunecamp_unlocked') || '{}');
+                      unlockedReleases[releaseSlug] = { code, unlockedAt: Date.now() };
+                      localStorage.setItem('tunecamp_unlocked', JSON.stringify(unlockedReleases));
+
+                      const msg = redeemResult.downloadsRemaining > 0
+                        ? `Downloads remaining on this code: ${redeemResult.downloadsRemaining}`
+                        : 'This was the last use of this code.';
+                      showSuccess(msg);
+                    } else {
+                      showError(redeemResult.error || 'Failed to redeem code');
+                    }
+                  } else {
+                    showError(result.error || 'Invalid code');
+                  }
+                } catch (err) {
+                  console.error('Validation error:', err);
+                  showError('Network error. Please try again.');
+                } finally {
+                  btn.disabled = false;
+                  btn.innerHTML = '<i class="fas fa-key"></i> Unlock';
+                }
+              }
+
+              function showError(message) {
+                const error = document.getElementById('unlockError');
+                error.textContent = message;
+                error.style.display = 'block';
+              }
+
+              function showSuccess(message) {
+                document.getElementById('unlockForm').style.display = 'none';
+                document.getElementById('unlockMessage').textContent = message;
+                document.getElementById('unlockSuccess').style.display = 'block';
+              }
+            })();
+          </script>
+          {{/if}}
+        </div>
+        {{/if}}
+      </div>
+    </header>
+
+    <section class="tracklist">
+      <h2>Tracks</h2>
+
+      <div class="audio-player" id="audioPlayer">
+        <div class="player-track-info">
+          <div class="player-cover">
+            {{#if release.coverUrl}}
+            <img src="{{release.coverUrl}}" alt="{{release.config.title}}" id="playerCover">
+            {{else}}
+            <i class="fas fa-music"></i>
+            {{/if}}
+          </div>
+          <div class="player-details">
+            <div class="player-title" id="playerTitle">Select a track</div>
+            <div class="player-artist" id="playerArtist">{{#if artist}}{{artist.name}}{{/if}}</div>
+          </div>
+        </div>
+
+        <div class="player-controls">
+          <button class="player-btn" id="prevBtn"><i class="fas fa-step-backward"></i></button>
+          <button class="player-btn player-btn-play" id="playBtn">
+            <i class="fas fa-play"></i>
+          </button>
+          <button class="player-btn" id="nextBtn"><i class="fas fa-step-forward"></i></button>
+        </div>
+
+        <div class="player-progress">
+          <span class="player-time" id="currentTime">0:00</span>
+          <input type="range" class="progress-bar" id="progressBar" min="0" max="100" value="0">
+          <span class="player-time" id="duration">0:00</span>
+        </div>
+
+        <div class="player-volume">
+          <i class="fas fa-volume-up"></i>
+          <input type="range" class="volume-bar" id="volumeBar" min="0" max="100" value="80">
+        </div>
+      </div>
+
+      <ol class="track-list">
+        {{#each release.tracks}}
+        <li class="track-item" data-src="{{releasePath url}}" data-index="{{@index}}">
+          <div class="track-number">{{@index}}</div>
+          <div class="track-info">
+            <div class="track-title">{{title}}</div>
+            <div class="track-meta">
+              {{formatAudioFormat filename}}
+              {{#if duration}}
+              · {{formatDuration duration}}
+              {{/if}}
+            </div>
+          </div>
+          <div class="track-actions">
+            <button class="track-play-btn" onclick="playTrack({{@index}})">
+              <i class="fas fa-play"></i>
+            </button>
+            {{#if ../release.config.download}}
+            {{#if (eq ../release.config.download "free")}}
+            <a href="{{releasePath url}}" download class="track-download-btn">
+              <i class="fas fa-download"></i>
+            </a>
+            {{/if}}
+            {{/if}}
+          </div>
+        </li>
+        {{/each}}
+      </ol>
+    </section>
+
+    {{#if artist.donationLinks}}
+    <section class="donation-section">
+      <h2>Support the Artist</h2>
+      <p>If you enjoyed this music, consider supporting the artist:</p>
+      <div class="donation-links">
+        {{#each artist.donationLinks}}
+        <a href="{{url}}" target="_blank" class="donation-link">
+          <i class="fas fa-heart"></i>
+          <span>{{platform}}</span>
+          {{#if description}}
+          <small>{{description}}</small>
+          {{/if}}
+        </a>
+        {{/each}}
+      </div>
+    </section>
+    {{/if}}
+  </article>
+</div>
+
+<script>
+  // Share & Embed functionality
+  function copyShareLink() {
+    const url = window.location.href;
+    navigator.clipboard.writeText(url).then(() => {
+      alert('Link copied to clipboard!');
+    }).catch(() => {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = url;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      alert('Link copied to clipboard!');
+    });
+  }
+
+  function showEmbedCode() {
+    const modal = document.getElementById('embedModal');
+    const embedCodeText = document.getElementById('embedCodeText');
+    
+    // Load full embed code by default
+    fetch('{{path embedCodePath}}')
+      .then(response => response.text())
+      .then(text => {
+        embedCodeText.value = text.trim();
+        modal.style.display = 'flex';
+      })
+      .catch(err => {
+        console.error('Error loading embed code:', err);
+        alert('Error loading embed code');
+      });
+  }
+
+  function switchEmbedTab(type) {
+    const tabs = document.querySelectorAll('.embed-tab');
+    tabs.forEach(tab => tab.classList.remove('active'));
+    event.target.classList.add('active');
+    
+    const embedCodeText = document.getElementById('embedCodeText');
+    const file = type === 'full' ? '{{embedCodePath}}' : '{{embedCompactPath}}';
+    
+    fetch('{{path ""}}' + file)
+      .then(response => response.text())
+      .then(text => {
+        embedCodeText.value = text.trim();
+      })
+      .catch(err => {
+        console.error('Error loading embed code:', err);
+      });
+  }
+
+  function copyEmbedCode() {
+    const embedCodeText = document.getElementById('embedCodeText');
+    embedCodeText.select();
+    document.execCommand('copy');
+    alert('Embed code copied to clipboard!');
+  }
+
+  function closeEmbedModal() {
+    document.getElementById('embedModal').style.display = 'none';
+  }
+
+  // Close modal when clicking outside
+  window.onclick = function(event) {
+    const modal = document.getElementById('embedModal');
+    if (event.target === modal) {
+      modal.style.display = 'none';
+    }
+  }
+</script>
+
+<script>
+  // Initialize player with tracks
+  window.tracks = [
+    {{#each release.tracks}}
+    {
+      url: '{{releasePath url}}',
+      title: '{{title}}',
+      artist: '{{#if artist}}{{artist}}{{else}}{{../artist.name}}{{/if}}',
+      duration: {{#if duration}}{{duration}}{{else}}0{{/if}}
+    }{{#unless @last}},{{/unless}}
+    {{/each}}
+  ];
+</script>
+
+<!-- Download Stats (GunDB) -->
+<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+<script src="{{assetPath 'assets/download-stats.js'}}"></script>
+<script>
+(function() {
+  const releaseSlug = '{{release.slug}}';
+  let downloadStats;
+
+  document.addEventListener('DOMContentLoaded', function() {
+    // Initialize download stats
+    downloadStats = new TunecampDownloadStats();
+    window.downloadStats = downloadStats;
+
+    // Load and display current download count
+    loadDownloadCount();
+
+    // Subscribe to real-time updates
+    downloadStats.subscribeToDownloadCount(releaseSlug, updateDownloadDisplay);
+  });
+
+  async function loadDownloadCount() {
+    try {
+      const count = await downloadStats.getDownloadCount(releaseSlug);
+      updateDownloadDisplay(count);
+    } catch (e) {
+      console.warn('Could not load download count:', e);
+    }
+  }
+
+  function updateDownloadDisplay(count) {
+    const el = document.getElementById('releaseDownloads');
+    const countEl = document.getElementById('downloadCount');
+    if (el && countEl) {
+      countEl.textContent = downloadStats.formatCount(count);
+      el.style.display = 'block';
+    }
+  }
+
+  // Register hook for downloadAll tracking
+  window.onDownloadAll = async function() {
+    if (downloadStats) {
+      try {
+        await downloadStats.incrementDownloadCount(releaseSlug);
+      } catch (e) {
+        console.warn('Could not track download:', e);
+      }
+    }
+  };
+
+  // Track individual track downloads
+  document.querySelectorAll('.track-download-btn').forEach((btn, index) => {
+    btn.addEventListener('click', async function(e) {
+      if (downloadStats && window.tracks && window.tracks[index]) {
+        try {
+          const trackId = window.tracks[index].title.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
+          await downloadStats.incrementTrackDownloadCount(releaseSlug, trackId);
+          await downloadStats.incrementDownloadCount(releaseSlug);
+        } catch (e) {
+          console.warn('Could not track track download:', e);
+        }
+      }
+    });
+  });
+})();
+</script>