857 lines
27 KiB
HTML
857 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>dapp.fm - Decentralized Music Player</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background: linear-gradient(135deg, #0f0f1a 0%, #1a0a2e 50%, #0f1a2e 100%);
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.logo {
|
|
text-align: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.logo .tagline {
|
|
color: #888;
|
|
font-size: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.hero-text {
|
|
text-align: center;
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.hero-text p {
|
|
color: #aaa;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero-text strong {
|
|
color: #ff006e;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.card h2 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.card h2 .icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #888;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
textarea, input[type="password"], input[type="text"], input[type="url"] {
|
|
width: 100%;
|
|
padding: 1rem 1.25rem;
|
|
border: 2px solid rgba(255,255,255,0.1);
|
|
border-radius: 12px;
|
|
background: rgba(0,0,0,0.4);
|
|
color: #fff;
|
|
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
textarea:focus, input:focus {
|
|
outline: none;
|
|
border-color: #8338ec;
|
|
box-shadow: 0 0 0 4px rgba(131, 56, 236, 0.2);
|
|
}
|
|
|
|
textarea.encrypted {
|
|
min-height: 100px;
|
|
font-size: 0.75rem;
|
|
word-break: break-all;
|
|
resize: vertical;
|
|
}
|
|
|
|
.unlock-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.unlock-row .input-group {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
button {
|
|
padding: 1rem 2.5rem;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
button.primary {
|
|
background: linear-gradient(135deg, #ff006e 0%, #8338ec 100%);
|
|
color: #fff;
|
|
box-shadow: 0 4px 20px rgba(255, 0, 110, 0.3);
|
|
}
|
|
|
|
button.primary:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 30px rgba(255, 0, 110, 0.4);
|
|
}
|
|
|
|
button.primary:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button.secondary {
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fff;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
button.secondary:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.85rem;
|
|
padding: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
border-radius: 8px;
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.status-indicator .dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-indicator.loading .dot {
|
|
background: #ffc107;
|
|
animation: pulse 1s infinite;
|
|
}
|
|
|
|
.status-indicator.ready .dot {
|
|
background: #00ff94;
|
|
}
|
|
|
|
.status-indicator.error .dot {
|
|
background: #ff5252;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
.error-banner {
|
|
background: rgba(255, 82, 82, 0.15);
|
|
border: 1px solid rgba(255, 82, 82, 0.4);
|
|
border-radius: 12px;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
display: none;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.error-banner.visible {
|
|
display: block;
|
|
}
|
|
|
|
/* Media Player Styles */
|
|
.player-container {
|
|
display: none;
|
|
}
|
|
|
|
.player-container.visible {
|
|
display: block;
|
|
}
|
|
|
|
.track-info {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.track-artwork {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto 1.5rem;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 5rem;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.track-artwork img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.track-artwork video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.track-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.track-artist {
|
|
color: #888;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.media-player-wrapper {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/* Custom Audio Player */
|
|
.audio-player {
|
|
width: 100%;
|
|
background: rgba(0,0,0,0.3);
|
|
border-radius: 12px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
audio, video {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
|
|
audio::-webkit-media-controls-panel {
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
|
|
}
|
|
|
|
video {
|
|
max-height: 500px;
|
|
background: #000;
|
|
}
|
|
|
|
.video-player-wrapper {
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* License Info */
|
|
.license-info {
|
|
margin-top: 2rem;
|
|
padding: 1.5rem;
|
|
background: rgba(131, 56, 236, 0.1);
|
|
border: 1px solid rgba(131, 56, 236, 0.3);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.license-info h4 {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #8338ec;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.license-info p {
|
|
font-size: 0.85rem;
|
|
color: #aaa;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.license-info .license-token {
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 0.75rem;
|
|
background: rgba(0,0,0,0.3);
|
|
padding: 0.75rem;
|
|
border-radius: 8px;
|
|
margin-top: 0.75rem;
|
|
word-break: break-all;
|
|
color: #00ff94;
|
|
}
|
|
|
|
/* Download section */
|
|
.download-section {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.download-section button {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* How it works */
|
|
.how-it-works {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.how-step {
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
background: rgba(0,0,0,0.2);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.how-step .step-icon {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.how-step h4 {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 0.5rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.how-step p {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* File input styling */
|
|
.file-input-wrapper {
|
|
position: relative;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.file-input-wrapper input[type="file"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file-input-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 2rem;
|
|
border: 2px dashed rgba(255,255,255,0.2);
|
|
border-radius: 12px;
|
|
background: rgba(0,0,0,0.2);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.file-input-label:hover {
|
|
border-color: #8338ec;
|
|
background: rgba(131, 56, 236, 0.1);
|
|
}
|
|
|
|
.file-input-label .icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.or-divider {
|
|
text-align: center;
|
|
color: #666;
|
|
margin: 1rem 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: #8338ec;
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
background: rgba(131, 56, 236, 0.1);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
background: rgba(131, 56, 236, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo">
|
|
<h1>dapp.fm</h1>
|
|
<p class="tagline">Decentralized Music Distribution</p>
|
|
</div>
|
|
|
|
<nav class="nav-links">
|
|
<a href="index.html">Form Encryption</a>
|
|
<a href="support-reply.html">Decrypt Messages</a>
|
|
<a href="media-player.html" style="background: rgba(131, 56, 236, 0.3);">Media Player</a>
|
|
<a href="artist-portal.html">Artist Portal</a>
|
|
</nav>
|
|
|
|
<div class="hero-text">
|
|
<p>
|
|
<strong>No middlemen. No platforms. No 70% cuts.</strong><br>
|
|
Artists encrypt their music with ChaCha20-Poly1305. Fans unlock with a license token.
|
|
Content lives on any CDN, IPFS, or artist's own server. The password IS the license.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="wasm-status" class="status-indicator loading">
|
|
<span class="dot"></span>
|
|
<span>Initializing decryption engine...</span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span class="icon">🔐</span> Unlock Licensed Content</h2>
|
|
|
|
<div class="file-input-wrapper">
|
|
<input type="file" id="file-input" accept=".smsg,.enc,.borg">
|
|
<label class="file-input-label">
|
|
<span class="icon">📁</span>
|
|
<span>Drop encrypted file here or click to browse</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="or-divider">- or paste encrypted content -</div>
|
|
|
|
<div class="input-group">
|
|
<label for="encrypted-content">Encrypted Content (base64):</label>
|
|
<textarea id="encrypted-content" class="encrypted" placeholder="Paste the encrypted content from the artist..."></textarea>
|
|
</div>
|
|
|
|
<div class="demo-banner" style="background: rgba(255, 0, 110, 0.1); border: 1px solid rgba(255, 0, 110, 0.3); border-radius: 12px; padding: 1rem; margin-bottom: 1rem;">
|
|
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
|
|
<div>
|
|
<strong style="color: #ff006e;">Try the Demo!</strong>
|
|
<span style="color: #888; font-size: 0.85rem; margin-left: 0.5rem;">Load a sample encrypted video</span>
|
|
</div>
|
|
<button id="load-demo-btn" class="secondary" style="padding: 0.6rem 1.2rem; font-size: 0.85rem;">Load Demo Track</button>
|
|
</div>
|
|
<div style="font-size: 0.8rem; color: #666; margin-top: 0.5rem;">
|
|
Password: <code style="background: rgba(0,0,0,0.3); padding: 0.2rem 0.5rem; border-radius: 4px; color: #00ff94;">dapp-fm-2024</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="error-banner" class="error-banner"></div>
|
|
|
|
<div class="unlock-row">
|
|
<div class="input-group">
|
|
<label for="license-token">License Token (Password):</label>
|
|
<input type="password" id="license-token" placeholder="Enter your license token from the artist">
|
|
</div>
|
|
<button id="unlock-btn" class="primary" disabled>Unlock</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Player appears after unlock -->
|
|
<div id="player-container" class="card player-container">
|
|
<h2><span class="icon">🎵</span> Now Playing</h2>
|
|
|
|
<div class="track-info">
|
|
<div class="track-artwork" id="track-artwork">🎶</div>
|
|
<div class="track-title" id="track-title">Track Title</div>
|
|
<div class="track-artist" id="track-artist">Artist Name</div>
|
|
</div>
|
|
|
|
<div class="media-player-wrapper" id="media-player-wrapper">
|
|
<!-- Audio/Video player inserted here -->
|
|
</div>
|
|
|
|
<div class="license-info">
|
|
<h4>🔓 Licensed Content</h4>
|
|
<p>This content was unlocked with your personal license token.
|
|
The decryption happens entirely in your browser - no servers involved.</p>
|
|
<div class="license-token" id="license-display"></div>
|
|
</div>
|
|
|
|
<div class="download-section">
|
|
<button class="secondary" id="download-btn">Download Original</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2><span class="icon">💡</span> How It Works</h2>
|
|
<div class="how-it-works">
|
|
<div class="how-step">
|
|
<div class="step-icon">🎤</div>
|
|
<h4>Artist Creates</h4>
|
|
<p>Artist encrypts their music/video with a password using ChaCha20-Poly1305</p>
|
|
</div>
|
|
<div class="how-step">
|
|
<div class="step-icon">☁️</div>
|
|
<h4>Host Anywhere</h4>
|
|
<p>Encrypted file goes on any CDN, IPFS, S3, or artist's own website</p>
|
|
</div>
|
|
<div class="how-step">
|
|
<div class="step-icon">🎫</div>
|
|
<h4>Sell License</h4>
|
|
<p>Artist sells the password (license token) directly to fans</p>
|
|
</div>
|
|
<div class="how-step">
|
|
<div class="step-icon">🎧</div>
|
|
<h4>Fan Plays</h4>
|
|
<p>Fan unlocks and plays in browser. No middleman, no platform fees</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="wasm_exec.js"></script>
|
|
<script>
|
|
let wasmReady = false;
|
|
let currentMediaBlob = null;
|
|
let currentMediaName = null;
|
|
let currentMediaMime = null;
|
|
|
|
// Initialize WASM
|
|
async function initWasm() {
|
|
const statusEl = document.getElementById('wasm-status');
|
|
|
|
try {
|
|
const go = new Go();
|
|
const result = await WebAssembly.instantiateStreaming(
|
|
fetch('stmf.wasm'),
|
|
go.importObject
|
|
);
|
|
go.run(result.instance);
|
|
|
|
// Wait for BorgSMSG to be ready
|
|
await new Promise((resolve, reject) => {
|
|
const timeout = setTimeout(() => reject(new Error('WASM init timeout')), 5000);
|
|
|
|
if (typeof BorgSMSG !== 'undefined' && BorgSMSG.ready) {
|
|
clearTimeout(timeout);
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
document.addEventListener('borgstmf:ready', () => {
|
|
clearTimeout(timeout);
|
|
resolve();
|
|
});
|
|
});
|
|
|
|
wasmReady = true;
|
|
updateStatus(statusEl, 'ready', 'Decryption engine ready (v' + BorgSMSG.version + ')');
|
|
document.getElementById('unlock-btn').disabled = false;
|
|
|
|
} catch (err) {
|
|
updateStatus(statusEl, 'error', 'Failed to load: ' + err.message);
|
|
console.error('WASM init error:', err);
|
|
}
|
|
}
|
|
|
|
function updateStatus(el, status, message) {
|
|
el.className = 'status-indicator ' + status;
|
|
while (el.firstChild) el.removeChild(el.firstChild);
|
|
const dot = document.createElement('span');
|
|
dot.className = 'dot';
|
|
const text = document.createElement('span');
|
|
text.textContent = message;
|
|
el.appendChild(dot);
|
|
el.appendChild(text);
|
|
}
|
|
|
|
function showError(msg) {
|
|
const errorBanner = document.getElementById('error-banner');
|
|
errorBanner.textContent = msg;
|
|
errorBanner.classList.add('visible');
|
|
}
|
|
|
|
function hideError() {
|
|
document.getElementById('error-banner').classList.remove('visible');
|
|
}
|
|
|
|
// Handle file input
|
|
document.getElementById('file-input').addEventListener('change', async (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
try {
|
|
const content = await file.arrayBuffer();
|
|
const base64 = btoa(String.fromCharCode(...new Uint8Array(content)));
|
|
document.getElementById('encrypted-content').value = base64;
|
|
} catch (err) {
|
|
showError('Failed to read file: ' + err.message);
|
|
}
|
|
});
|
|
|
|
// Unlock content
|
|
async function unlockContent() {
|
|
hideError();
|
|
|
|
const encryptedB64 = document.getElementById('encrypted-content').value.trim();
|
|
const password = document.getElementById('license-token').value;
|
|
|
|
if (!encryptedB64) {
|
|
showError('Please provide encrypted content');
|
|
return;
|
|
}
|
|
|
|
if (!password) {
|
|
showError('Please enter your license token');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const message = await BorgSMSG.decrypt(encryptedB64, password);
|
|
displayMedia(message, password);
|
|
} catch (err) {
|
|
showError('Unlock failed: Invalid license token or corrupted content');
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
// Display media player
|
|
function displayMedia(msg, password) {
|
|
const playerContainer = document.getElementById('player-container');
|
|
const mediaWrapper = document.getElementById('media-player-wrapper');
|
|
const artworkEl = document.getElementById('track-artwork');
|
|
|
|
// Set track info
|
|
document.getElementById('track-title').textContent = msg.subject || 'Untitled Track';
|
|
document.getElementById('track-artist').textContent = msg.from || 'Unknown Artist';
|
|
|
|
// Show partial license token (safely using textContent)
|
|
const maskedToken = password.substring(0, 4) + String.fromCharCode(0x2022).repeat(8) + password.substring(password.length - 4);
|
|
document.getElementById('license-display').textContent = maskedToken;
|
|
|
|
// Clear previous media safely
|
|
while (mediaWrapper.firstChild) {
|
|
mediaWrapper.removeChild(mediaWrapper.firstChild);
|
|
}
|
|
|
|
// Reset artwork to default
|
|
while (artworkEl.firstChild) {
|
|
artworkEl.removeChild(artworkEl.firstChild);
|
|
}
|
|
artworkEl.textContent = '';
|
|
|
|
// Find media attachments
|
|
if (msg.attachments && msg.attachments.length > 0) {
|
|
msg.attachments.forEach((att, index) => {
|
|
const mime = att.mime || 'application/octet-stream';
|
|
|
|
// Convert base64 to blob
|
|
const binary = atob(att.content);
|
|
const bytes = new Uint8Array(binary.length);
|
|
for (let i = 0; i < binary.length; i++) {
|
|
bytes[i] = binary.charCodeAt(i);
|
|
}
|
|
const blob = new Blob([bytes], { type: mime });
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
// Store for download
|
|
currentMediaBlob = blob;
|
|
currentMediaName = att.name;
|
|
currentMediaMime = mime;
|
|
|
|
if (mime.startsWith('video/')) {
|
|
// Video player
|
|
const videoWrapper = document.createElement('div');
|
|
videoWrapper.className = 'video-player-wrapper';
|
|
|
|
const video = document.createElement('video');
|
|
video.controls = true;
|
|
video.autoplay = false;
|
|
video.src = url;
|
|
video.style.width = '100%';
|
|
|
|
videoWrapper.appendChild(video);
|
|
mediaWrapper.appendChild(videoWrapper);
|
|
|
|
// Update artwork to show video icon
|
|
artworkEl.textContent = '🎬';
|
|
|
|
} else if (mime.startsWith('audio/')) {
|
|
// Audio player
|
|
const audioWrapper = document.createElement('div');
|
|
audioWrapper.className = 'audio-player';
|
|
|
|
const audio = document.createElement('audio');
|
|
audio.controls = true;
|
|
audio.autoplay = false;
|
|
audio.src = url;
|
|
audio.style.width = '100%';
|
|
|
|
audioWrapper.appendChild(audio);
|
|
mediaWrapper.appendChild(audioWrapper);
|
|
|
|
artworkEl.textContent = '🎵';
|
|
|
|
} else if (mime.startsWith('image/')) {
|
|
// Image - use as artwork (safe - just setting src)
|
|
const img = document.createElement('img');
|
|
img.src = url;
|
|
img.alt = 'Album artwork';
|
|
artworkEl.textContent = '';
|
|
artworkEl.appendChild(img);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Show player
|
|
playerContainer.classList.add('visible');
|
|
playerContainer.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
// Download handler
|
|
document.getElementById('download-btn').addEventListener('click', () => {
|
|
if (!currentMediaBlob) {
|
|
alert('No media to download');
|
|
return;
|
|
}
|
|
|
|
const url = URL.createObjectURL(currentMediaBlob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = currentMediaName || 'media';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
|
|
// Load demo content
|
|
async function loadDemo() {
|
|
const btn = document.getElementById('load-demo-btn');
|
|
const originalText = btn.textContent;
|
|
btn.textContent = 'Loading...';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('demo-track.smsg');
|
|
if (!response.ok) {
|
|
throw new Error('Demo file not found');
|
|
}
|
|
const content = await response.text();
|
|
document.getElementById('encrypted-content').value = content;
|
|
document.getElementById('license-token').value = 'dapp-fm-2024';
|
|
btn.textContent = 'Demo Loaded!';
|
|
setTimeout(() => {
|
|
btn.textContent = originalText;
|
|
btn.disabled = false;
|
|
}, 2000);
|
|
} catch (err) {
|
|
showError('Failed to load demo: ' + err.message);
|
|
btn.textContent = originalText;
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
document.getElementById('unlock-btn').addEventListener('click', unlockContent);
|
|
document.getElementById('license-token').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') unlockContent();
|
|
});
|
|
document.getElementById('load-demo-btn').addEventListener('click', loadDemo);
|
|
|
|
// Check for test mode from Artist Portal
|
|
function checkTestMode() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.get('test') === '1') {
|
|
const content = sessionStorage.getItem('dappfm-test-content');
|
|
const token = sessionStorage.getItem('dappfm-test-token');
|
|
if (content && token) {
|
|
document.getElementById('encrypted-content').value = content;
|
|
document.getElementById('license-token').value = token;
|
|
sessionStorage.removeItem('dappfm-test-content');
|
|
sessionStorage.removeItem('dappfm-test-token');
|
|
// Auto-unlock after WASM is ready
|
|
const checkReady = setInterval(() => {
|
|
if (wasmReady) {
|
|
clearInterval(checkReady);
|
|
unlockContent();
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
initWasm();
|
|
checkTestMode();
|
|
</script>
|
|
</body>
|
|
</html>
|