marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wall: optional intro video (YouTube, Vimeo or .mp4) from Profile, embedded under the bio

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-11 09:24:10 -05:00
parent c9f7a50b30
commit 78e4c76a89
7 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/my.js
+1 -1
View File
@@ -1924,7 +1924,7 @@
IAP.status('Wall positions saved.', 'ok');
await loadLineBanner();
}));
const SOCIALS = ['facebook', 'twitter', 'youtube', 'instagram', 'tiktok', 'telegram', 'linkedin', 'website'];
const SOCIALS = ['facebook', 'twitter', 'youtube', 'instagram', 'tiktok', 'telegram', 'linkedin', 'website', 'video']; // video = intro video on the wall, not a social link
function fillProfileDetails(a) {
if (!a) return;
if (a.bio) $('pfBio').value = a.bio;
public/assets/site.css
+2
View File
@@ -425,6 +425,8 @@ textarea{resize:vertical;font:inherit}
.btn.disabled{opacity:.45;pointer-events:none;filter:grayscale(.3)}
.bio-meta{flex:1;min-width:220px}
.bio-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bio-video{margin:14px auto 8px;max-width:760px}
.bio-video iframe,.bio-video video{width:100%;aspect-ratio:16/9;border:1px solid var(--line-strong);border-radius:16px;background:#000;display:block}
.bio-socials a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mint);border:1px solid var(--line-strong);
border-radius:999px;padding:4px 12px 4px 9px;text-decoration:none}
.bio-socials a svg{flex:0 0 auto}
public/assets/wall.js
+12
View File
@@ -41,6 +41,18 @@
'<a href="' + String(w.socials[k]).replace(/"/g, '%22') + '" target="_blank" rel="noopener nofollow me">' + (ICON[k] || '') + '<span>' + SOC[k] + '</span></a>');
sc.innerHTML = links.join('');
}
// intro video under the bio: YouTube / Vimeo embed, or a direct file
const bv = IAP.$('bioVideo');
const vurl = w.socials && typeof w.socials === 'object' ? String(w.socials.video || '') : '';
if (bv && vurl) {
let yt = /(?:youtube\.com\/(?:watch\?(?:.*&)?v=|shorts\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{6,})/.exec(vurl);
let vm = /vimeo\.com\/(?:video\/)?(\d+)/.exec(vurl);
let inner = '';
if (yt) inner = '<iframe src="https://www.youtube-nocookie.com/embed/' + yt[1] + '?rel=0" title="Intro video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>';
else if (vm) inner = '<iframe src="https://player.vimeo.com/video/' + vm[1] + '" title="Intro video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>';
else if (/\.(mp4|webm)(\?|$)/i.test(vurl)) inner = '<video src="' + vurl.replace(/"/g, '%22') + '" controls playsinline preload="metadata"></video>';
if (inner) { bv.innerHTML = '<p class="eyebrow" style="margin:0 0 8px">A word from ' + String(w.name).replace(/[&<>]/g, '') + '</p>' + inner; bv.hidden = false; }
}
IAP.$('wallCtaHead').textContent = 'Join ' + w.name + '’s line';
// per-wall viewed-position memory (survives revisits; anonymous-friendly)
const VKEY = 'iap-wall-' + name;
public/my.html
+4 -2
View File
@@ -5,7 +5,7 @@
<title>Member area | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="icon" type="image/png" href="/logo-icon.png">
<link rel="stylesheet" href="/assets/site.css?v=20260911c">
<link rel="stylesheet" href="/assets/site.css?v=20260911v">
</head>
<body class="bo-body">
@@ -749,6 +749,8 @@
<input id="soc-linkedin" placeholder="LinkedIn URL" style="width:100%">
<input id="soc-website" placeholder="Website URL" style="width:100%">
</div>
<p class="small muted" style="margin:10px 0 4px">Intro video on your public page (optional): a YouTube, Vimeo or direct .mp4 link. It plays right under your bio, before the line and the join button.</p>
<p><input id="soc-video" placeholder="https://www.youtube.com/watch?v=…" style="width:100%"></p>
<p style="margin-top:12px"><button class="btn" id="pfDetailsSave">Save profile</button>
<a class="btn small sec" id="pfViewBio" target="_blank" rel="noopener" hidden>View my page</a></p>
</div>
@@ -900,7 +902,7 @@
<script src="/assets/common.js?v=20260911b"></script>
<script src="/assets/wallet.js?v=20260911a"></script>
<script src="/assets/promo.js?v=20260911a"></script>
<script src="/assets/my.js?v=20260911g"></script>
<script src="/assets/my.js?v=20260911v"></script>
<script src="/assets/chat.js?v=20260907l"></script>
</body>
</html>
public/wall.html
+3 -2
View File
@@ -6,7 +6,7 @@
<!--OG-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="icon" type="image/png" href="/logo-icon.png">
<link rel="stylesheet" href="/assets/site.css?v=20260910h">
<link rel="stylesheet" href="/assets/site.css?v=20260911v">
</head>
<body>
<div id="nav"></div>
@@ -28,6 +28,7 @@
</div>
<div class="bio-qr"><img id="bioQr" alt="Join QR code" width="150" height="150"><div class="small muted" style="text-align:center">scan to join</div></div>
</div>
<div class="bio-video" id="bioVideo" hidden></div>
<div class="sectionhead" style="text-align:left;margin-top:10px">
<h3 style="margin:0">The line, three levels deep</h3>
<p>Three positions, three levels — the exact levels the contract pays. Every banner here belongs
@@ -47,6 +48,6 @@
</div>
</section>
<script src="/assets/common.js?v=20260910c"></script>
<script src="/assets/wall.js?v=20260910b"></script>
<script src="/assets/wall.js?v=20260911v"></script>
</body>
</html>