|
|
| Line 1: |
Line 1: |
| <includeonly>
| |
| <div class="vanipedia-shorts-widget" style="background: #feffe1; border: 1px solid #1c5249; border-radius: 10px; padding: 10px; width: 280px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;">
| |
| <div style="width: 100%; display: none;">
| |
| <!-- Transclude your exact live daily updated list page directly into a hidden memory container -->
| |
| <div id="raw-vanipedia-shorts-database">
| |
| {{:VanimediaMayapur YouTube SHORTS List}}
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- This clean placeholder box renders visually on your site -->
| |
| <div id="vani-active-short-viewport" style="width: 260px; height: 260px; background: #faf9df; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #888;">
| |
| Loading random short...
| |
| </div>
| |
| <div id="vani-active-short-title" style="padding-top: 10px; text-align: center; font-weight: bold; color: #345b63; font-size: 13px; line-height: 1.3;">
| |
| </div>
| |
| </div>
| |
|
| |
| <script type="text/javascript">
| |
| // This function runs on your local page DOM after MediaWiki processes the template text
| |
| (function() {
| |
| function processRandomShort() {
| |
| var dbContainer = document.getElementById('raw-vanipedia-shorts-database');
| |
| var viewport = document.getElementById('vani-active-short-viewport');
| |
| var titleDisplay = document.getElementById('vani-active-short-title');
| |
|
| |
| if (!dbContainer || !viewport) return;
| |
|
| |
| // MediaWiki renders a gallery page using a collection of standard list items
| |
| var galleryItems = dbContainer.getElementsByTagName('li');
| |
| if (!galleryItems || galleryItems.length === 0) {
| |
| // Fallback to checking normal links if the gallery structure is stripped out
| |
| galleryItems = dbContainer.getElementsByTagName('a');
| |
| }
| |
|
| |
| if (galleryItems.length === 0) {
| |
| viewport.innerHTML = "No videos detected in list page.";
| |
| return;
| |
| }
| |
|
| |
| // 1. Pick a random item out of the thousands on your list page instantly
| |
| var randomIndex = Math.floor(Math.random() * galleryItems.length);
| |
| var pickedItem = galleryItems[randomIndex];
| |
|
| |
| // 2. Read the absolute raw target text properties of that random row
| |
| var rowText = pickedItem.innerText || pickedItem.textContent || "";
| |
| var htmlContent = pickedItem.innerHTML || "";
| |
|
| |
| var videoId = "";
| |
| var cleanTitle = "YouTube Short";
| |
|
| |
| // 3. Extract the YouTube link ID from the raw attributes
| |
| var matchShort = htmlContent.match(/\/shorts\/([a-zA-Z0-9_-]+)/) || rowText.match(/\/shorts\/([a-zA-Z0-9_-]+)/);
| |
| var matchWatch = htmlContent.match(/v=([a-zA-Z0-9_-]+)/) || rowText.match(/v=([a-zA-Z0-9_-]+)/);
| |
|
| |
| if (matchShort && matchShort[1]) {
| |
| videoId = matchShort[1];
| |
| } else if (matchWatch && matchWatch[1]) {
| |
| videoId = matchWatch[1];
| |
| } else {
| |
| // Fallback parsing pattern if links are formatted in standard string form
| |
| var parts = rowText.split('link=');
| |
| if (parts.length > 1) {
| |
| var urlPart = parts[1].trim().split(' ')[0].split('\n')[0];
| |
| videoId = urlPart.substring(urlPart.lastIndexOf('/') + 1);
| |
| }
| |
| }
| |
|
| |
| // 4. Extract and clean up the clean title label from the list line
| |
| if (rowText.indexOf('|') !== -1) {
| |
| var segments = rowText.split('|');
| |
| if (segments.length > 1 && segments[1].indexOf('link=') === -1) {
| |
| cleanTitle = segments[1].trim();
| |
| } else {
| |
| cleanTitle = segments[0].replace(/File:[^\s|]+/g, '').trim();
| |
| }
| |
| } else {
| |
| cleanTitle = rowText.replace(/File:[^\s|]+/g, '').split('http')[0].replace(/[|]/g, '').trim();
| |
| }
| |
|
| |
| if (!cleanTitle || cleanTitle.length === 0) {
| |
| cleanTitle = "Short Selection";
| |
| }
| |
|
| |
| // 5. Instantly swap the temporary loading block for a clean embedded frame player
| |
| if (videoId) {
| |
| var embedUrl = "https://youtube.com" + videoId;
| |
| viewport.innerHTML = '<iframe width="260" height="260" src="' + embedUrl + '" frameborder="0" allowfullscreen style="border-radius: 8px; border: none;"></iframe>';
| |
| titleDisplay.innerText = cleanTitle;
| |
| } else {
| |
| viewport.innerHTML = '<div style="color:#c0392b; padding:20px; text-align:center;">Unable to decode video element.</div>';
| |
| }
| |
| }
| |
|
| |
| // Initialize execution hook safely across multiple browser states
| |
| if (document.readyState === "complete" || document.readyState === "interactive") {
| |
| setTimeout(processRandomShort, 100);
| |
| } else {
| |
| document.addEventListener("DOMContentLoaded", processRandomShort);
| |
| }
| |
| })();
| |
| </script>
| |
| </includeonly>
| |
|
| |
| <choose> | | <choose> |
|
| |
|
