{"id":10,"date":"2025-12-02T18:57:14","date_gmt":"2025-12-02T18:57:14","guid":{"rendered":"https:\/\/publicidad.qlu.ac.pa\/?page_id=10"},"modified":"2025-12-02T21:43:25","modified_gmt":"2025-12-02T21:43:25","slug":"player","status":"publish","type":"page","link":"https:\/\/publicidad.qlu.ac.pa\/index.php\/player\/","title":{"rendered":"player"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b7ae81 e-flex e-con-boxed e-con e-parent\" data-id=\"9b7ae81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ccf2a04 elementor-widget elementor-widget-shortcode\" data-id=\"ccf2a04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div id=\"ds_player_box\"><\/div>\n        <script>\n        (function(){\n            const screen = 7;\n            const endpoint = 'https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/digital-signage\/v1\/playlist?screen=' + screen;\n            const monitorEndpoint = 'https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/digital-signage\/v1\/monitor';\n            const container = document.getElementById('ds_player_box');\n            let playlist = [];\n            let idx = -1;\n            const transitionSpeed = parseInt('600',10);\n\n            async function fetchPlaylist(){\n                try{ const r = await fetch(endpoint); if(!r.ok) throw r; playlist = await r.json(); }\n                catch(e){ console.error('fetch playlist error',e); playlist = []; }\n            }\n\n            function clear(){ while(container.firstChild) container.removeChild(container.firstChild); }\n\n            function prefetch(url){ try{ const link = document.createElement('link'); link.rel='preload'; link.as = url.endsWith('.mp4')? 'video' : 'image'; link.href = url; document.head.appendChild(link);}catch(e){} }\n\n            function applyEffect(el, effect){\n                el.classList.remove('ds-fade','ds-slide','ds-zoom','ds-kenburns');\n                void el.offsetWidth; \/\/ force reflow\n                if(effect==='fade') el.classList.add('ds-fade');\n                if(effect==='slide') el.classList.add('ds-slide');\n                if(effect==='zoom') el.classList.add('ds-zoom');\n                if(effect==='kenburns') el.classList.add('ds-kenburns');\n            }\n\n            function showItem(it){\n                clear(); if(!it) return;\n                const ext = it.url.split('.').pop().toLowerCase();\n                const isVideo = ['mp4','mov','webm','m4v'].indexOf(ext)!==-1;\n                const wrap = document.createElement('div');\n                wrap.style.width='100%'; wrap.style.height='100%'; wrap.style.position='absolute'; wrap.style.left=0; wrap.style.top=0;\n                container.appendChild(wrap);\n\n                if(isVideo){\n                    const v = document.createElement('video');\n                    v.src = it.url;\n                    v.autoplay = true; v.muted = true; v.playsInline = true;\n                    v.style.width='100%'; v.style.height='100%'; v.style.objectFit='cover';\n                    wrap.appendChild(v);\n                    applyEffect(wrap, it.effect);\n                    v.onended = next; v.onerror = next; v.play().catch(()=>{});\n                } else {\n                    const img = document.createElement('img');\n                    img.src = it.url; img.style.width='100%'; img.style.height='100%'; img.style.objectFit='cover';\n                    wrap.appendChild(img);\n                    applyEffect(wrap, it.effect);\n                    \/\/ kenburns handled by CSS class\n                    setTimeout(next, Math.max(3000, (it.duration||8)*1000));\n                }\n                reportMonitor(it);\n            }\n\n            function next(){ if(playlist.length===0) return showEmpty(); idx = (idx+1)%playlist.length; showItem(playlist[idx]); }\n\n            function showEmpty(){ clear(); const d = document.createElement('div'); d.style.color='#fff'; d.style.fontSize='36px'; d.style.textAlign='center'; d.style.paddingTop='40vh'; d.innerText='Sin anuncios'; container.appendChild(d); }\n\n            async function reportMonitor(it){ try{ await fetch(monitorEndpoint, { method:'POST', headers:{'Content-Type':'application\/json'}, body: JSON.stringify({screen:screen, playing: it ? it.id : '', time: new Date().toISOString()}) }); }catch(e){} }\n\n            async function start(){ await fetchPlaylist(); if(!playlist.length){ showEmpty(); setTimeout(start, 120*1000); return; } playlist.forEach(p=>prefetch(p.url)); idx=-1; next(); \/\/ refresh playlist periodically\n                setInterval(async ()=>{ await fetchPlaylist(); }, 120*1000);\n\n                \/\/ fullscreenchange handling to adjust object-fit\n                document.addEventListener('fullscreenchange', function(){\n                    var el = container.querySelector('img, video');\n                    if(!el) return;\n                    if(document.fullscreenElement){ el.style.objectFit = 'contain'; }\n                    else { el.style.objectFit = 'cover'; }\n                });\n            }\n\n            \/\/ try to register service worker for offline caching (optional)\n            if('serviceWorker' in navigator){ try{ navigator.serviceWorker.register('https:\/\/publicidad.qlu.ac.pa\/wp-content\/plugins\/wp-digital-signage\/ds-sw.js').catch(()=>{}); }catch(e){} }\n            start();\n        })();\n        <\/script>\n        <style>\n        \/* transition classes *\/\n        #ds_player_box > div { transition: opacity 600ms ease, transform 600ms ease; }\n        .ds-fade { opacity: 0; animation: ds-fade-in 600ms forwards; }\n        @keyframes ds-fade-in { from { opacity: 0; } to { opacity: 1; } }\n        .ds-slide { transform: translateX(100%); animation: ds-slide-in 600ms forwards; }\n        @keyframes ds-slide-in { from { transform: translateX(100%); } to { transform: translateX(0%); } }\n        .ds-zoom { transform: scale(1.15); animation: ds-zoom-in 600ms forwards; }\n        @keyframes ds-zoom-in { from { transform: scale(1.15); } to { transform: scale(1.0); } }\n        .ds-kenburns img { animation: ds-ken 20s linear both; }\n        @keyframes ds-ken { from { transform: scale(1) translate(0,0); } to { transform: scale(1.1) translate(-5%, -5%); } }\n        \/* ensure full viewport *\/\n        html, body { margin:0 !important; padding:0 !important; width:100vw; height:100vh; overflow:hidden; background:black; }\n        #ds_player_box, #ds-player-container { width:100vw; height:100vh; position:fixed; inset:0; background:black; z-index:99999; }\n        #ds_player_box img, #ds_player_box video, #ds-player-container img, #ds-player-container video { width:100vw; height:100vh; object-fit:cover !important; object-position:center center !important; display:block; background:black; }\n        <\/style>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":5,"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/publicidad.qlu.ac.pa\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}