Skip to Content
0 Votes

Wiki source code of Uncategorized Videos

Version 506.1 by Ryan C on 2025/09/10 07:18
Hide last authors
Ryan C 493.1 1 {{velocity}}
Ryan C 503.1 2 #pagePicker_import ## load the native Page Picker resources once
Ryan C 499.2 3
Ryan C 501.1 4 ## 1) Collect video attachments from the current page
Ryan C 503.1 5 #set($videoExts = ['mp4','webm','ogg','avi','mov','wmv','flv','m4v'])
6 #set($videos = [])
Ryan C 493.1 7 #foreach($att in $doc.getAttachmentList())
Ryan C 503.1 8 #set($n = $att.getFilename())
9 #set($ln = $n.toLowerCase())
10 #foreach($e in $videoExts)
11 #if($ln.endsWith("." + $e))
12 #set($discard = $videos.add($att))
13 #break
Ryan C 493.1 14 #end
Ryan C 503.1 15 #end
16 #end
Ryan C 493.1 17
Ryan C 501.1 18 ## 2) Cache the rendered HTML (auto-bust on each save via version)
Ryan C 500.1 19 {{cache id="vid-list-$doc.fullName-$doc.version" timeToLive="21600"}}
Ryan C 493.1 20 {{html wiki="false" clean="false"}}
21 <div id="xwiki-video-manager" style="margin:20px 0;">
Ryan C 494.1 22 <h2>📹 Videos on: ${escapetool.xml($doc.fullName)}</h2>
Ryan C 493.1 23
Ryan C 494.1 24 #if($videos.size() == 0)
Ryan C 503.1 25 <div style="text-align:center;padding:40px;background:#f8f9fa;border-radius:8px;">
26 <h3>No Videos Found</h3>
27 <p>Attach video files to this page to see them here.</p>
28 </div>
Ryan C 494.1 29 #else
Ryan C 503.1 30 <script>
31 window.VID_CHUNK_SIZE = 48;
32 window.VID_LAZY_MARGIN = '600px';
33 window.XWIKI_WIKI = ${ jsontool.serialize($xcontext.database) }; // e.g., "xwiki"
34 window.SOURCE_SPACE = ${ jsontool.serialize($doc.space) }; // e.g., "Main" or "Main.Sub"
35 window.SOURCE_PAGE = ${ jsontool.serialize($doc.name) }; // e.g., "WebHome"
36 </script>
Ryan C 493.1 37
Ryan C 503.1 38 <div id="video-chunks">
39 #set($i = 0)
40 #set($chunkIndex = 0)
41 #foreach($att in $videos)
42 #set($i = $i + 1)
43 #set($filename = $att.getFilename())
44 #set($lname = $filename.toLowerCase())
45 #set($url = $doc.getAttachmentURL($filename))
Ryan C 493.1 46
Ryan C 503.1 47 ## MIME guess
48 #set($videoType = "video/mp4")
49 #if($lname.endsWith(".webm"))
50 #set($videoType = "video/webm")
51 #elseif($lname.endsWith(".ogg"))
52 #set($videoType = "video/ogg")
53 #elseif($lname.endsWith(".avi"))
54 #set($videoType = "video/x-msvideo")
55 #elseif($lname.endsWith(".mov"))
56 #set($videoType = "video/quicktime")
57 #elseif($lname.endsWith(".wmv"))
58 #set($videoType = "video/x-ms-wmv")
59 #elseif($lname.endsWith(".flv"))
60 #set($videoType = "video/x-flv")
61 #elseif($lname.endsWith(".m4v"))
62 #set($videoType = "video/mp4")
63 #end
Ryan C 493.1 64
Ryan C 503.1 65 #if($i == 1 || ($i - 1) % 48 == 0)
66 #set($chunkIndex = $chunkIndex + 1)
67 <div class="vid-chunk" data-chunk="$chunkIndex" style="display: #if($chunkIndex == 1) block #else none #end;">
68 <div class="video-display-grid"
69 style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;">
Ryan C 494.1 70 #end
Ryan C 493.1 71
Ryan C 494.1 72 <div class="video-container" style="border:1px solid #ddd;border-radius:8px;padding:12px;background:#fff;">
73 <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
74 <h4 style="margin:0;flex:1;min-width:0;">${escapetool.xml($filename)}</h4>
75 </div>
Ryan C 493.1 76
Ryan C 501.1 77 <!-- Placeholder (poster drawn on-demand) -->
Ryan C 503.1 78 <div class="video-frame" data-src="${url}" data-type="${videoType}" data-name="${escapetool.xml($filename)}"
79 style="position:relative;width:100%;aspect-ratio:16/9;background:#111;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;">
80 <canvas class="vid-canvas" width="320" height="180"
81 style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></canvas>
82 <button class="btn btn-sm btn-primary" type="button" style="position:relative;z-index:1;">Load &amp;
83 Play</button>
Ryan C 494.1 84 </div>
85
Ryan C 499.1 86 <div class="video-controls" style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;">
Ryan C 494.1 87 <a href="${url}" download="${escapetool.xml($filename)}" class="btn btn-sm btn-success">📥 Download</a>
88 <span class="vid-duration" style="font-size:12px;color:#666;">Duration: —</span>
89 </div>
Ryan C 499.1 90
Ryan C 505.1 91 <!-- Move-to-page (native Page Picker) -->
92 <div class="move-box" style="margin-top:10px;">
93 <label style="font-size:12px;color:#555;">Move to page:</label>
94 <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
95 <input type="text"
96 class="move-input suggest-pages"
97 placeholder="Find a page…"
98 data-search-scope="wiki:${escapetool.xml($xcontext.database)}"
99 data-filename="${escapetool.xml($filename)}"
100 style="flex:1;min-width:220px;padding:4px;border:1px solid #ccc;border-radius:4px;">
101 <button type="button"
102 class="btn btn-sm btn-warning move-go"
103 data-filename="${escapetool.xml($filename)}">Move</button>
104 </div>
105 <small style="color:#888;">Pick a page (e.g., <code>Main.SomePage</code>). Click <b>Move</b> to relocate this file.</small>
106 </div>
Ryan C 506.1 107 </div> <!-- closes .video-container -->
Ryan C 505.2 108 </div> <!-- closes .video-container -->
Ryan C 493.1 109
Ryan C 494.1 110 #if(($i % 48 == 0) || $foreach.last)
Ryan C 503.1 111 </div>
112 #if(!$foreach.last)
113 <div style="text-align:center;margin:12px 0 28px;">
114 <button class="btn btn-secondary load-more" data-next="$mathtool.add($chunkIndex,1)">Load more</button>
115 </div>
Ryan C 494.1 116 #end
117 </div>
Ryan C 503.1 118 #end
119 #end
120 </div>
Ryan C 494.1 121 #end
Ryan C 493.1 122 </div>
123
124 <script>
Ryan C 504.1 125 (function(){
Ryan C 505.2 126 /* ---------- constants ---------- */
127 var ROOT_SPACE = (window.SOURCE_SPACE || 'Main').split('.')[0]; // e.g., "Main Categories"
128 var WIKI = window.XWIKI_WIKI;
129
130 /* ---------- helpers ---------- */
Ryan C 504.1 131 function spacesPath(dotPath){
132 if(!dotPath) return '';
Ryan C 505.1 133 return dotPath.split('.').map(function(s){ return 'spaces/'+encodeURIComponent(s); }).join('/');
Ryan C 504.1 134 }
135 function parseFullName(full){
Ryan C 505.2 136 full = String(full||'').replace(/^[^:]+:/,''); // drop "wiki:" if present
Ryan C 504.1 137 var parts = full.split('.');
138 var page = parts.pop();
Ryan C 505.1 139 return { spacePath: parts.join('.'), page: page };
Ryan C 504.1 140 }
141
Ryan C 505.2 142 /* ---------- resolve a picker input to a full page reference ---------- */
143 async function resolveReference(inp){
Ryan C 506.1 144 // Prefer the picker’s stored reference if present
145 var v = (inp.getAttribute('data-reference') || (inp.dataset && inp.dataset.reference) || inp.value || '').trim();
Ryan C 505.2 146 if (!v) throw new Error('No page selected');
147
Ryan C 506.1 148 // If user typed a plain title ("Humor and Memes"), assume current root space
149 if (v.indexOf('.') === -1) {
150 var root = (window.SOURCE_SPACE || 'Main').split('.')[0]; // e.g., "Main Categories"
151 v = root + '.' + v;
152 }
Ryan C 505.2 153
Ryan C 506.1 154 // If target doesn't specify a terminal doc, default to the space home
155 if (!/\.WebHome$/i.test(v)) {
156 v = v + '.WebHome';
Ryan C 505.2 157 }
Ryan C 506.1 158 return v;
Ryan C 505.2 159 }
160
161 /* ---------- poster (unchanged core idea, trimmed) ---------- */
Ryan C 504.1 162 async function makePoster(frame){
163 if(frame.getAttribute('data-poster-ready')==='1') return;
Ryan C 503.1 164 var src = frame.getAttribute('data-src');
Ryan C 504.1 165 try{
Ryan C 503.1 166 var v = document.createElement('video');
Ryan C 505.2 167 v.preload = 'metadata'; v.muted = true; v.playsInline = true; v.src = src;
Ryan C 505.1 168 function once(t,e){return new Promise(function(res){t.addEventListener(e,res,{once:true});});}
Ryan C 505.2 169 await once(v, 'loadedmetadata');
Ryan C 503.1 170 if (typeof v.requestVideoFrameCallback === 'function') {
Ryan C 505.2 171 await new Promise(function(res){ v.requestVideoFrameCallback(function(){ res(); }); });
Ryan C 503.1 172 } else {
Ryan C 505.2 173 try { v.currentTime = 0.25; } catch(e){}
Ryan C 505.1 174 await once(v,'seeked').catch(function(){});
175 await once(v,'loadeddata').catch(function(){});
Ryan C 503.1 176 }
177 var canvas = frame.querySelector('.vid-canvas');
Ryan C 504.1 178 if(canvas){
179 var w = 320, h = Math.round(320 * (v.videoHeight||9) / (v.videoWidth||16));
180 canvas.width = 320; canvas.height = h>0?h:180;
Ryan C 505.2 181 var ctx = canvas.getContext('2d', {willReadFrequently:true});
Ryan C 503.1 182 ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
Ryan C 505.2 183 try { frame.setAttribute('data-poster', canvas.toDataURL('image/webp', 0.85)); } catch(e){}
Ryan C 503.1 184 }
Ryan C 504.1 185 frame.setAttribute('data-poster-ready','1');
Ryan C 505.1 186 }catch(e){}
Ryan C 494.1 187 }
188
Ryan C 504.1 189 function mountVideo(frame){
190 if(frame.getAttribute('data-mounted')==='1') return;
Ryan C 503.1 191 var src = frame.getAttribute('data-src');
192 var type = frame.getAttribute('data-type') || 'video/mp4';
Ryan C 504.1 193 var poster = frame.getAttribute('data-poster');
Ryan C 503.1 194 var v = document.createElement('video');
Ryan C 505.1 195 v.setAttribute('controls',''); v.setAttribute('preload','none');
Ryan C 504.1 196 if(poster) v.setAttribute('poster', poster);
197 v.style.width='100%'; v.style.maxWidth='100%'; v.style.borderRadius='4px';
Ryan C 505.1 198 var s = document.createElement('source'); s.src=src; s.type=type; v.appendChild(s);
Ryan C 504.1 199 v.addEventListener('loadedmetadata', function(){
200 var d = Math.round(v.duration||0), mm = Math.floor(d/60), ss = String(d%60).padStart(2,'0');
Ryan C 505.1 201 var dur = frame.parentElement.querySelector('.vid-duration'); if(dur) dur.textContent='Duration: '+mm+':'+ss;
Ryan C 503.1 202 });
203 frame.replaceChildren(v);
Ryan C 504.1 204 frame.setAttribute('data-mounted','1');
Ryan C 503.1 205 }
Ryan C 502.1 206
Ryan C 505.2 207 /* ---------- lazy posters + click handlers ---------- */
Ryan C 504.1 208 if('IntersectionObserver' in window){
209 var io = new IntersectionObserver(function(entries){
210 entries.forEach(function(e){
211 if(e.isIntersecting){ makePoster(e.target); io.unobserve(e.target); }
212 });
213 }, { rootMargin: (window.VID_LAZY_MARGIN||'600px') });
214 document.querySelectorAll('.video-frame').forEach(function(el){ io.observe(el); });
215 }
Ryan C 494.1 216
Ryan C 504.1 217 document.addEventListener('click', function(ev){
218 var frame = ev.target.closest('.video-frame');
219 if(frame){
220 mountVideo(frame);
221 var v = frame.querySelector('video'); if(v) v.play().catch(function(){});
222 }
223 });
Ryan C 499.1 224
Ryan C 504.1 225 document.addEventListener('click', function(ev){
226 var b = ev.target.closest('.load-more'); if(!b) return;
227 var next = b.getAttribute('data-next');
228 var nxt = document.querySelector('.vid-chunk[data-chunk="'+ next +'"]');
Ryan C 505.1 229 if(nxt){ nxt.style.display='block'; b.parentElement.style.display='none'; }
Ryan C 504.1 230 });
Ryan C 494.1 231
Ryan C 505.2 232 /* ---------- CSRF token (recommended for REST writes) ---------- */
Ryan C 505.1 233 var FORM_TOKEN = null;
234 async function getFormToken(){
235 if (FORM_TOKEN) return FORM_TOKEN;
Ryan C 505.2 236 var r = await fetch('/rest/wikis/'+encodeURIComponent(WIKI), {credentials:'same-origin'});
Ryan C 505.1 237 FORM_TOKEN = r.headers.get('XWiki-Form-Token') || '';
238 return FORM_TOKEN;
239 }
Ryan C 499.2 240
Ryan C 505.2 241 /* ---------- move: download -> PUT -> DELETE ---------- */
Ryan C 505.1 242 async function moveAttachment(opts){
Ryan C 505.2 243 var srcSpace = opts.srcSpace, srcPage = opts.srcPage, filename = opts.filename;
244 var dstFull = opts.dstFull;
Ryan C 505.1 245 var pf = parseFullName(dstFull);
246 var srcSpacesPath = spacesPath(srcSpace);
247 var dstSpacesPath = spacesPath(pf.spacePath);
Ryan C 499.1 248
Ryan C 505.2 249 var sel = '.video-container input.move-input[data-filename="' + CSS.escape(filename) + '"]';
250 var inputEl = document.querySelector(sel);
Ryan C 505.1 251 var card = inputEl ? inputEl.closest('.video-container') : null;
252 var frame = card ? card.querySelector('.video-frame') : null;
253 var srcURL = frame ? frame.getAttribute('data-src') : null;
254 if(!srcURL) throw new Error('Missing source URL');
Ryan C 499.2 255
Ryan C 505.1 256 var downloading = await fetch(srcURL, {credentials:'same-origin'});
Ryan C 505.2 257 if(!downloading.ok) throw new Error('Download failed: ' + downloading.status);
Ryan C 505.1 258 var blob = await downloading.blob();
Ryan C 499.2 259
Ryan C 505.1 260 var token = await getFormToken();
261
Ryan C 505.2 262 var putURL = '/rest/wikis/' + encodeURIComponent(WIKI) + '/' + dstSpacesPath +
263 '/pages/' + encodeURIComponent(pf.page) +
264 '/attachments/' + encodeURIComponent(filename) + '?media=json';
Ryan C 505.1 265 var uploading = await fetch(putURL, {
266 method: 'PUT',
267 body: blob,
Ryan C 505.2 268 headers: {'Content-Type':'application/octet-stream','XWiki-Form-Token': token},
Ryan C 505.1 269 credentials:'same-origin'
270 });
271 if(!(uploading.status===201 || uploading.status===202)){
272 var txt = await uploading.text().catch(function(){ return String(uploading.status); });
273 throw new Error('Upload failed: ' + txt);
274 }
275
Ryan C 505.2 276 var delURL = '/rest/wikis/' + encodeURIComponent(WIKI) + '/' + srcSpacesPath +
277 '/pages/' + encodeURIComponent(srcPage) +
278 '/attachments/' + encodeURIComponent(filename);
Ryan C 505.1 279 var deleting = await fetch(delURL, {
Ryan C 505.2 280 method:'DELETE', headers:{'XWiki-Form-Token': token}, credentials:'same-origin'
Ryan C 505.1 281 });
Ryan C 505.2 282 if(!(deleting.status===204)){ console.warn('Delete original failed', deleting.status); }
Ryan C 505.1 283 return true;
Ryan C 504.1 284 }
Ryan C 499.1 285
Ryan C 505.2 286 /* ---------- Move button: resolve -> confirm -> move ---------- */
Ryan C 505.1 287 document.addEventListener('click', function(e){
288 var btn = e.target.closest('.move-go'); if(!btn) return;
289 var box = btn.closest('.move-box');
290 var inp = box.querySelector('.move-input');
Ryan C 505.2 291 (async function(){
292 try{
293 var ref = await resolveReference(inp);
294 var filename = btn.getAttribute('data-filename');
Ryan C 499.1 295
Ryan C 505.2 296 var notice = document.createElement('div');
297 notice.className = 'move-notice';
298 notice.textContent = 'Moving “' + filename + '” to ' + ref + ' …';
299 box.appendChild(notice);
Ryan C 499.2 300
Ryan C 505.2 301 await moveAttachment({
302 srcSpace: window.SOURCE_SPACE,
303 srcPage: window.SOURCE_PAGE,
304 filename: filename,
305 dstFull: ref
306 });
307
308 notice.textContent = 'Moved ✔ — reloading…';
309 setTimeout(function(){ location.reload(); }, 600);
310 }catch(err){
311 var notice = box.querySelector('.move-notice') || document.createElement('div');
312 notice.className = 'move-notice';
313 notice.style.color = '#b00020';
314 notice.textContent = 'Move failed: ' + (err && err.message ? err.message : err);
315 box.appendChild(notice);
316 }
317 })();
Ryan C 504.1 318 });
Ryan C 505.1 319
Ryan C 494.1 320 })();
Ryan C 493.1 321 </script>
322
323 <style>
Ryan C 503.1 324 .video-container:hover {
325 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
326 transition: box-shadow .25s;
327 }
328
329 .btn {
330 padding: 4px 8px;
331 border: 1px solid #ddd;
332 background: #f8f9fa;
333 border-radius: 4px;
334 cursor: pointer;
335 text-decoration: none;
336 display: inline-block;
337 }
338
339 .btn:hover {
340 background: #e9ecef;
341 }
342
343 .btn-primary {
344 background: #007bff;
345 color: #fff;
346 border-color: #007bff;
347 }
348
349 .btn-secondary {
350 background: #6c757d;
351 color: #fff;
352 border-color: #6c757d;
353 }
354
355 .btn-success {
356 background: #28a745;
357 color: #fff;
358 border-color: #28a745;
359 }
360
361 .btn-sm {
362 font-size: 12px;
363 padding: 2px 6px;
364 }
365
366 @media (max-width:768px) {
367 .video-display-grid {
368 grid-template-columns: 1fr
369 }
370 }
Ryan C 493.1 371 </style>
372 {{/html}}
Ryan C 494.1 373 {{/cache}}
Ryan C 501.1 374 {{/velocity}}