Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| <title>أجيج - Pro Player</title> | |
| <link rel="preload" href="https://raw.githubusercontent.com/atalan67/mykoko.github.io/18ff46d3b5288809ffb94b85fc469d650b196ecc/arabswell_1%20(1).ttf" as="font" type="font/ttf" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| @font-face{font-family:'Arabswell';src:url('https://raw.githubusercontent.com/atalan67/mykoko.github.io/18ff46d3b5288809ffb94b85fc469d650b196ecc/arabswell_1%20(1).ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;} | |
| :root{--primary:#ff4500;--neon-blue:#00d2ff;--bg:#000;--card-bg:#111;--text:#fff} | |
| *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} | |
| body,input,button,.username-label,.tab-item,.player-desc,.time-display,.creator-share,.mini-name{font-family:'Poppins','Arabswell','Tajawal',sans-serif;} | |
| .english-text,.time-display,.control-icon,.share-btn-sm,.back-home-btn,.close-player-btn{font-family:'Poppins',monospace;font-weight:500;letter-spacing:0.5px;} | |
| [lang="ar"],.username-label,.player-desc,.search-box::placeholder,.tab-item,.mini-name{font-family:'Arabswell','Poppins','Tajawal',sans-serif;font-weight:400;} | |
| body{background:var(--bg);color:var(--text);overflow-x:hidden;overflow-y:auto;position:relative;} | |
| .tabs-nav{display:flex;justify-content:space-around;background:#111;padding:15px 0;border-bottom:1px solid #222;position:sticky;top:0;z-index:80;} | |
| .tab-item{cursor:pointer;font-weight:bold;color:#777;transition:0.3s;font-size:18px;letter-spacing:0.5px;} | |
| .tab-item.active{color:var(--primary);border-bottom:3px solid var(--primary);padding-bottom:5px;} | |
| .home-screen{padding:20px;min-height:100vh;display:none;} | |
| .home-screen.active{display:block;} | |
| .header-section{margin-bottom:30px} | |
| .search-box{width:100%;padding:14px 20px;border-radius:30px;background:#1a1a1a;border:1px solid var(--primary);color:#fff;margin-bottom:25px;outline:none;font-size:16px;} | |
| .search-box::placeholder{font-family:'Arabswell','Poppins',sans-serif;font-size:15px;} | |
| .capsules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} | |
| .creator-capsule{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;} | |
| .avatar{width:75px;height:75px;border-radius:50%;background:linear-gradient(45deg,var(--primary),#ffb300);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:bold;border:3px solid #222;box-shadow:0 4px 12px rgba(255,69,0,.3);overflow:hidden} | |
| .avatar img{width:100%;height:100%;object-fit:cover} | |
| .username-label{font-size:14px;font-weight:600;text-align:center;word-break:break-word;max-width:85px;letter-spacing:0.3px;} | |
| .user-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);z-index:150;display:none;overflow-y:auto} | |
| .top-nav{position:sticky;top:0;background:rgba(0,0,0,.92);backdrop-filter:blur(10px);padding:8px 15px;display:flex;align-items:center;gap:15px;z-index:160;border-bottom:1px solid #222} | |
| .back-home-btn{font-size:20px;cursor:pointer;background:#222;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:0.2s;} | |
| .back-home-btn:hover{background:var(--primary);} | |
| .video-grid{display:flex;flex-direction:column;gap:15px;padding:15px} | |
| .video-card{background:#111;border-radius:16px;overflow:hidden;cursor:pointer;border:2px solid var(--neon-blue);position:relative;transition:transform 0.2s;} | |
| .card-header{position:absolute;top:0;left:0;right:0;z-index:10;padding:10px;background:linear-gradient(to bottom,rgba(0,0,0,0.8),transparent);display:flex;align-items:center;gap:10px;} | |
| .mini-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--neon-blue);} | |
| .mini-name{font-family:'Poppins','Arabswell',sans-serif;font-weight:600;font-size:14px;text-shadow:0 1px 2px black;} | |
| .share-video-btn{position:absolute;bottom:10px;right:10px;z-index:15;background:rgba(0,0,0,0.6);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(5px);border:1px solid var(--neon-blue);transition:0.2s;} | |
| .share-video-btn:hover{background:var(--neon-blue);} | |
| .share-video-btn svg{width:18px;height:18px;fill:white;} | |
| .video-wrapper{position:relative;width:100%;background:#000} | |
| .video-wrapper video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block} | |
| /* شاشة التشغيل - معزولة تماماً */ | |
| .player-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:1000;display:none;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;touch-action:none;-webkit-overflow-scrolling:none;} | |
| .player-container{width:100%;height:100%;max-width:none;display:flex;flex-direction:column;position:relative;background:#000;overflow:hidden;touch-action:none;} | |
| .player-layout{width:100%;height:100%;display:flex;flex-direction:column;background:#000;overflow:hidden;position:relative;touch-action:none;} | |
| .video-container{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;pointer-events:none;touch-action:none;user-select:none;-webkit-touch-callout:none;} | |
| #mainVideo{width:100%;height:100%;object-fit:contain;pointer-events:none;touch-action:none;} | |
| /* الأزرار داخل حاوية الفيديو في الأعلى */ | |
| .player-top-buttons{position:absolute;top:10px;left:10px;right:10px;z-index:400;display:flex;justify-content:space-between;align-items:center;pointer-events:none;} | |
| .player-top-buttons .btn-group{display:flex;gap:10px;pointer-events:auto;} | |
| .player-top-buttons .control-btn{background:rgba(0,0,0,0.6);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--neon-blue);transition:0.2s;backdrop-filter:blur(5px);} | |
| .player-top-buttons .control-btn:hover{background:var(--primary);border-color:var(--primary);} | |
| .player-top-buttons .control-btn svg{width:20px;height:20px;fill:none;stroke:white;stroke-width:2;} | |
| .player-top-buttons .share-btn-sm{background:rgba(0,0,0,0.6);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--neon-blue);transition:0.2s;backdrop-filter:blur(5px);} | |
| .player-top-buttons .share-btn-sm:hover{background:var(--neon-blue);} | |
| .player-top-buttons .share-btn-sm svg{width:20px;height:20px;fill:white;stroke:none;} | |
| .player-details{background:#0a0a0a;border-top:1px solid #222;width:100%;position:relative;max-height:200px;overflow-y:auto;touch-action:pan-y;} | |
| #adContainer{width:100%;padding:10px;text-align:center;display:none;min-height:320px;display:flex;justify-content:center;align-items:center;} | |
| .player-desc{padding:15px;font-size:15px;color:#eee;width:100%;line-height:1.6;letter-spacing:0.3px;} | |
| .custom-controls{position:absolute;bottom:20px;left:10px;right:10px;background:rgba(20,20,20,0.9);backdrop-filter:blur(15px);border-radius:35px;padding:10px 18px;display:flex;align-items:center;gap:12px;z-index:305;border:1px solid rgba(0,210,255,0.3);pointer-events:auto;touch-action:auto;} | |
| .control-icon{width:24px;height:24px;fill:white;cursor:pointer;transition:0.2s;pointer-events:auto;} | |
| .control-icon:hover{fill:var(--neon-blue);transform:scale(1.05);} | |
| .progress-bar{flex:1;height:5px;accent-color:var(--neon-blue);cursor:pointer;pointer-events:auto;} | |
| .time-display{font-size:12px;color:var(--neon-blue);font-weight:600;min-width:80px;letter-spacing:0.5px;font-family:'Poppins',monospace;pointer-events:none;} | |
| #toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:var(--neon-blue);color:#000;padding:10px 24px;border-radius:40px;display:none;z-index:2000;font-size:14px;font-weight:bold;font-family:'Poppins','Arabswell',sans-serif;pointer-events:none;} | |
| .creator-share{background:rgba(0,0,0,0.5);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--neon-blue);transition:0.2s;} | |
| .creator-share:hover{background:var(--neon-blue);} | |
| .creator-share svg{width:16px;height:16px;fill:white;} | |
| ::placeholder{font-family:'Arabswell','Poppins',sans-serif;} | |
| .player-screen *{-webkit-tap-highlight-color:transparent;} | |
| /* منع تمرير الصفحة خلف المشغل */ | |
| body.player-open{overflow:hidden;position:fixed;width:100%;height:100%;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="toast"></div> | |
| <div class="tabs-nav"><div id="tabFeed" class="tab-item active" onclick="switchTab('feed')">جديد</div><div id="tabCreators" class="tab-item" onclick="switchTab('creators')">المبدعين</div></div> | |
| <div id="feedTab" class="home-screen active"><div id="feedGrid" class="video-grid"></div></div> | |
| <div id="creatorsTab" class="home-screen"><div class="header-section" style="padding:20px"><input type="text" id="searchBox" class="search-box" placeholder="بحث عن مبدع..." oninput="filterCreators()"><div id="capsulesGrid" class="capsules-grid"></div></div></div> | |
| <div id="userScreen" class="user-screen"><div class="top-nav"><div class="back-home-btn" onclick="goHome()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></div><span id="targetUserTitle" style="font-weight:bold;color:var(--neon-blue);font-family:'Poppins','Arabswell',sans-serif;"></span><div class="creator-share" style="margin-right:auto;" onclick="shareCreatorLink()"><svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg></div></div><div id="videoGrid" class="video-grid"></div></div> | |
| <div id="playerScreen" class="player-screen"><div class="player-container"><div class="player-layout"><div class="video-container"><video id="mainVideo" playsinline loop></video><div class="player-top-buttons"><div class="btn-group"><div class="control-btn" onclick="closePlayer()"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></div></div><div class="btn-group"><div class="share-btn-sm" onclick="shareCurrentVideoLink()"><svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg></div></div></div><div id="controls" class="custom-controls"><div id="playPauseBtn" class="control-icon"><svg id="playIcon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg><svg id="pauseIcon" style="display:none" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg></div><input type="range" id="progressBar" class="progress-bar" value="0"><div class="time-display"><span id="currTime">0:00</span> / <span id="totalTime">0:00</span></div></div></div><div class="player-details"><div id="adContainer"></div><div id="mainDesc" class="player-desc"></div></div></div></div></div> | |
| <script> | |
| const REPO="monsefkoko/my_reels_storage",BASE_URL=`https://huggingface.co/datasets/${REPO}/resolve/main/`,API_URL=`https://huggingface.co/api/datasets/${REPO}/tree/main?recursive=true`; | |
| let creators={},allVideos=[],currentVideoData=null,currentAdTimeout=null; | |
| function preventVideoTouch(){const v=document.getElementById('mainVideo');if(v){v.addEventListener('touchstart',(e)=>{e.preventDefault();e.stopPropagation();return false},{passive:false});v.addEventListener('touchmove',(e)=>{e.preventDefault();e.stopPropagation();return false},{passive:false});v.addEventListener('touchend',(e)=>{e.preventDefault();e.stopPropagation();return false},{passive:false});v.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();return false});v.addEventListener('mousedown',(e)=>{e.preventDefault();e.stopPropagation();return false});}} | |
| function preventBackButton(){window.history.pushState(null,null,window.location.href);window.addEventListener('popstate',function(e){if(document.getElementById('playerScreen').style.display==='flex'){window.history.pushState(null,null,window.location.href);return false}});} | |
| function preventBodyScroll(disable){if(disable){document.body.classList.add('player-open');}else{document.body.classList.remove('player-open');}} | |
| async function loadAdForCreator(c){const a=document.getElementById('adContainer');if(currentAdTimeout)clearTimeout(currentAdTimeout);a.style.display='none';a.innerHTML='';const f=c.replace(/ /g,'_'),u=`${BASE_URL}${f}/ad.html`;try{const r=await fetch(u);if(!r.ok){console.log(`لا يوجد إعلان للمبدع: ${c}`);return}const t=await r.text();a.innerHTML=t;const s=a.querySelectorAll('script');s.forEach(os=>{const ns=document.createElement('script');if(os.src)ns.src=os.src;else ns.textContent=os.textContent;document.body.appendChild(ns)});a.style.display='flex';currentAdTimeout=setTimeout(()=>{a.style.display='none'},4000)}catch(e){console.log(`فشل تحميل الإعلان للمبدع ${c}:`,e);a.style.display='none'}} | |
| async function init(){try{const r=await fetch(API_URL),d=await r.json(),meta={};d.forEach(f=>{const p=f.path;if(p.toLowerCase().endsWith('avatar.jpg')||p.toLowerCase().endsWith('avatar.png'))meta[p.split('/')[0]+'_img']=p;if(p.endsWith('description.txt'))meta[p.substring(0,p.lastIndexOf('/'))+'_desc']=p});d.filter(f=>f.path.endsWith('.mp4')).forEach(v=>{const cN=v.path.split('/')[0].replace(/_/g,' '),fd=v.path.substring(0,v.path.lastIndexOf('/')),obj={path:v.path,creator:cN,avatar:meta[v.path.split('/')[0]+'_img'],desc:meta[fd+'_desc']};if(!creators[cN])creators[cN]=[];creators[cN].push(obj);allVideos.push(obj)});renderHome();renderFeed();checkUrlParams();preventVideoTouch();preventBackButton();}catch(e){console.error(e)}} | |
| function showToast(m){const t=document.getElementById('toast');t.innerText=m;t.style.display='block';setTimeout(()=>t.style.display='none',2000);} | |
| function shareCreatorLink(){const n=document.getElementById('targetUserTitle').innerText,u=`${window.location.origin}${window.location.pathname}?creator=${encodeURIComponent(n)}`;copyToClipboard(u);showToast(`✅ تم نسخ رابط المبدع: ${n}`);} | |
| function shareCurrentVideoLink(){if(currentVideoData){const u=`${window.location.origin}${window.location.pathname}?video=${encodeURIComponent(currentVideoData.path)}&creator=${encodeURIComponent(currentVideoData.creator)}`;copyToClipboard(u);showToast(`✅ تم نسخ رابط الفيديو`);}} | |
| function shareVideoFromCard(v,e){e.stopPropagation();const u=`${window.location.origin}${window.location.pathname}?video=${encodeURIComponent(v.path)}&creator=${encodeURIComponent(v.creator)}`;copyToClipboard(u);showToast(`✅ تم نسخ رابط الفيديو`);} | |
| function copyToClipboard(t){navigator.clipboard.writeText(t).catch(()=>{const a=document.createElement('textarea');a.value=t;document.body.appendChild(a);a.select();document.execCommand('copy');document.body.removeChild(a)});} | |
| function filterCreators(){const s=document.getElementById('searchBox').value.toLowerCase();document.querySelectorAll('#capsulesGrid .creator-capsule').forEach(c=>{const n=c.querySelector('.username-label').innerText.toLowerCase();c.style.display=n.includes(s)?'flex':'none'});} | |
| function checkUrlParams(){const p=new URLSearchParams(window.location.search),cP=p.get('creator'),vP=p.get('video');if(cP&&creators[cP])setTimeout(()=>openUserScreen(cP),500);else if(vP){const fV=allVideos.find(v=>v.path===vP);if(fV)setTimeout(()=>openPlayer(fV),500);}} | |
| function createVideoCard(v){const c=document.createElement('div');c.className='video-card';const e=JSON.stringify(v).replace(/"/g,'"');c.innerHTML=`<div class="card-header"><img class="mini-avatar" src="${v.avatar?BASE_URL+v.avatar:'https://ui-avatars.com/api/?name='+v.creator}"><span class="mini-name" style="font-family:'Poppins','Arabswell',sans-serif;font-weight:600;font-size:14px;">${v.creator}</span></div><div class="video-wrapper"><video src="${BASE_URL+v.path}" muted playsinline preload="metadata"></video></div><div class="share-video-btn" onclick="shareVideoFromCard(${e}, event)"><svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg></div>`;c.onclick=(e)=>{if(e.target.closest('.share-video-btn'))return;openPlayer(v)};return c;} | |
| function renderFeed(){const g=document.getElementById('feedGrid');g.innerHTML='';allVideos.sort(()=>Math.random()-0.5).forEach(v=>g.appendChild(createVideoCard(v)));} | |
| function renderHome(){const g=document.getElementById('capsulesGrid');g.innerHTML='';Object.keys(creators).forEach(n=>{const c=document.createElement('div');c.className='creator-capsule';c.innerHTML=`<div class="avatar">${creators[n][0].avatar?`<img src="${BASE_URL+creators[n][0].avatar}">`:n[0]}</div><div class="username-label">${n}</div>`;c.onclick=()=>openUserScreen(n);g.appendChild(c)});} | |
| function switchTab(t){document.querySelectorAll('.tab-item').forEach(i=>i.classList.remove('active'));document.querySelectorAll('.home-screen').forEach(s=>s.classList.remove('active'));document.getElementById(t+'Tab').classList.add('active');document.getElementById('tab'+t.charAt(0).toUpperCase()+t.slice(1)).classList.add('active');} | |
| const vPlayer=document.getElementById('mainVideo'),progBar=document.getElementById('progressBar'); | |
| async function openPlayer(v){currentVideoData=v;const p=document.getElementById('playerScreen'),d=document.getElementById('mainDesc');p.style.display='flex';preventBodyScroll(true);vPlayer.src=BASE_URL+v.path;d.innerText="جاري التحميل...";if(v.desc){fetch(BASE_URL+v.desc).then(r=>r.text()).then(t=>d.innerText=t).catch(()=>d.innerText="");}else{d.innerText="لا يوجد وصف.";}await loadAdForCreator(v.creator);vPlayer.play();updateIcon(true);preventVideoTouch();} | |
| vPlayer.ontimeupdate=()=>{if(vPlayer.duration){progBar.value=(vPlayer.currentTime/vPlayer.duration)*100;document.getElementById('currTime').innerText=Math.floor(vPlayer.currentTime/60)+":"+("0"+Math.floor(vPlayer.currentTime%60)).slice(-2);}}; | |
| vPlayer.onloadedmetadata=()=>{document.getElementById('totalTime').innerText=Math.floor(vPlayer.duration/60)+":"+("0"+Math.floor(vPlayer.duration%60)).slice(-2);}; | |
| function updateIcon(p){document.getElementById('playIcon').style.display=p?'none':'block';document.getElementById('pauseIcon').style.display=p?'block':'none';} | |
| document.getElementById('playPauseBtn').onclick=()=>{if(vPlayer.paused){vPlayer.play();updateIcon(true);}else{vPlayer.pause();updateIcon(false);}}; | |
| progBar.oninput=()=>{vPlayer.currentTime=(progBar.value/100)*vPlayer.duration;}; | |
| function closePlayer(){vPlayer.pause();vPlayer.src="";document.getElementById('playerScreen').style.display='none';preventBodyScroll(false);currentVideoData=null;if(currentAdTimeout)clearTimeout(currentAdTimeout);} | |
| function openUserScreen(n){document.getElementById('creatorsTab').style.display='none';document.getElementById('userScreen').style.display='block';document.getElementById('targetUserTitle').innerText=n;const g=document.getElementById('videoGrid');g.innerHTML='';creators[n].forEach(v=>g.appendChild(createVideoCard(v)));} | |
| function goHome(){document.getElementById('userScreen').style.display='none';document.getElementById('creatorsTab').style.display='block';} | |
| init(); | |
| </script> | |
| </body> | |
| </html> |