feat: simplify player controls - remove hotkeys

- Remove all keyboard shortcuts (not working properly)
- Remove play/pause/volume visual controls
- Keep only Fullscreen button (actually works)
- Keep overlay for click-blocking (protects from ads)
- Simpler, cleaner UI
- Users should use browser's popup blocker + AdBlocker
This commit is contained in:
Cursor Agent
2025-10-04 22:53:50 +00:00
parent d47b4fd0a8
commit 39c8366ae1

View File

@@ -557,7 +557,7 @@ func (h *PlayersHandler) GetVidlinkTVPlayer(w http.ResponseWriter, r *http.Reque
log.Printf("Successfully served Vidlink TV player: %s S%sE%s", tmdbId, season, episode) log.Printf("Successfully served Vidlink TV player: %s S%sE%s", tmdbId, season, episode)
} }
// getPlayerWithControlsHTML возвращает HTML с плеером, overlay и кастомными контролами // getPlayerWithControlsHTML возвращает HTML с плеером и overlay для блокировки кликов
func getPlayerWithControlsHTML(playerURL, title string) string { func getPlayerWithControlsHTML(playerURL, title string) string {
return fmt.Sprintf(`<!DOCTYPE html> return fmt.Sprintf(`<!DOCTYPE html>
<html> <html>
@@ -570,14 +570,10 @@ html,body{margin:0;height:100%%;overflow:hidden;background:#000;font-family:Aria
#player-iframe{position:absolute;top:0;left:0;width:100%%;height:100%%;border:none;} #player-iframe{position:absolute;top:0;left:0;width:100%%;height:100%%;border:none;}
#overlay{position:absolute;top:0;left:0;width:100%%;height:100%%;z-index:10;pointer-events:none;} #overlay{position:absolute;top:0;left:0;width:100%%;height:100%%;z-index:10;pointer-events:none;}
#controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.8));padding:20px;opacity:0;transition:opacity 0.3s;pointer-events:auto;z-index:20;} #controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.8));padding:20px;opacity:0;transition:opacity 0.3s;pointer-events:auto;z-index:20;}
#container:hover #controls,#controls.show{opacity:1;} #container:hover #controls{opacity:1;}
.btn{background:rgba(255,255,255,0.2);border:none;color:#fff;padding:10px 15px;margin:0 5px;border-radius:5px;cursor:pointer;font-size:16px;transition:background 0.2s;} .btn{background:rgba(255,255,255,0.2);border:none;color:#fff;padding:12px 20px;margin:0 5px;border-radius:5px;cursor:pointer;font-size:16px;transition:background 0.2s;}
.btn:hover{background:rgba(255,255,255,0.4);} .btn:hover{background:rgba(255,255,255,0.4);}
.btn:active{background:rgba(255,255,255,0.6);} .btn:active{background:rgba(255,255,255,0.6);}
#volume-slider{width:100px;vertical-align:middle;margin:0 10px;}
#hotkeys{position:absolute;top:50%%;left:50%%;transform:translate(-50%%,-50%%);background:rgba(0,0,0,0.9);color:#fff;padding:20px 30px;border-radius:10px;display:none;z-index:30;}
#hotkeys.show{display:block;}
.key{display:inline-block;background:#333;padding:5px 10px;border-radius:3px;margin:0 5px;font-weight:bold;}
</style> </style>
</head> </head>
<body> <body>
@@ -585,66 +581,17 @@ html,body{margin:0;height:100%%;overflow:hidden;background:#000;font-family:Aria
<iframe id="player-iframe" src="%s" allowfullscreen allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe> <iframe id="player-iframe" src="%s" allowfullscreen allow="autoplay; encrypted-media; fullscreen; picture-in-picture"></iframe>
<div id="overlay"></div> <div id="overlay"></div>
<div id="controls"> <div id="controls">
<button class="btn" id="btn-play" title="Play/Pause (Space)">▶️</button> <button class="btn" id="btn-fullscreen" title="Fullscreen">⛶ Fullscreen</button>
<button class="btn" id="btn-volume" title="Mute/Unmute (M)">🔊</button>
<input type="range" id="volume-slider" min="0" max="100" value="100" title="Volume"/>
<button class="btn" id="btn-rewind" title="Rewind 10s (←)">⏪ 10s</button>
<button class="btn" id="btn-forward" title="Forward 10s (→)">⏩ 10s</button>
<button class="btn" id="btn-fullscreen" title="Fullscreen (F)">⛶</button>
<button class="btn" id="btn-help" title="Hotkeys (?)">❓</button>
</div>
<div id="hotkeys">
<h3 style="margin-top:0;">⌨️ Горячие клавиши:</h3>
<p><span class="key">Space</span> - Play/Pause</p>
<p><span class="key">M</span> - Mute/Unmute</p>
<p><span class="key">←</span> - Перемотка назад 10s</p>
<p><span class="key">→</span> - Перемотка вперед 10s</p>
<p><span class="key">↑</span> - Увеличить громкость</p>
<p><span class="key">↓</span> - Уменьшить громкость</p>
<p><span class="key">F</span> - Fullscreen</p>
<p><span class="key">?</span> - Показать/скрыть подсказки</p>
<button class="btn" onclick="toggleHotkeys()" style="margin-top:10px;">Закрыть</button>
</div> </div>
</div> </div>
<script> <script>
const iframe=document.getElementById('player-iframe');
const overlay=document.getElementById('overlay'); const overlay=document.getElementById('overlay');
const controls=document.getElementById('controls');
const hotkeysDiv=document.getElementById('hotkeys');
let isPlaying=false;
let isMuted=false;
let volume=100;
// Блокируем клики на iframe (защита от рекламы) // Блокируем клики на iframe (защита от рекламы)
overlay.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();}); overlay.addEventListener('click',(e)=>{e.preventDefault();e.stopPropagation();});
overlay.addEventListener('mousedown',(e)=>{e.preventDefault();e.stopPropagation();}); overlay.addEventListener('mousedown',(e)=>{e.preventDefault();e.stopPropagation();});
// Кнопки // Fullscreen
document.getElementById('btn-play').addEventListener('click',()=>{
isPlaying=!isPlaying;
document.getElementById('btn-play').textContent=isPlaying?'⏸️':'▶️';
showNotification(isPlaying?'Play':'Pause');
});
document.getElementById('btn-volume').addEventListener('click',()=>{
isMuted=!isMuted;
document.getElementById('btn-volume').textContent=isMuted?'🔇':'🔊';
showNotification(isMuted?'Muted':'Unmuted');
});
document.getElementById('volume-slider').addEventListener('input',(e)=>{
volume=e.target.value;
showNotification('Volume: '+volume+'%%');
});
document.getElementById('btn-rewind').addEventListener('click',()=>{
showNotification('⏪ Rewind 10s');
});
document.getElementById('btn-forward').addEventListener('click',()=>{
showNotification('⏩ Forward 10s');
});
document.getElementById('btn-fullscreen').addEventListener('click',()=>{ document.getElementById('btn-fullscreen').addEventListener('click',()=>{
if(!document.fullscreenElement){ if(!document.fullscreenElement){
document.getElementById('container').requestFullscreen(); document.getElementById('container').requestFullscreen();
@@ -652,77 +599,6 @@ document.getElementById('btn-fullscreen').addEventListener('click',()=>{
document.exitFullscreen(); document.exitFullscreen();
} }
}); });
document.getElementById('btn-help').addEventListener('click',()=>{
toggleHotkeys();
});
function toggleHotkeys(){
hotkeysDiv.classList.toggle('show');
}
// Hotkeys
document.addEventListener('keydown',(e)=>{
if(e.target.tagName==='INPUT')return;
switch(e.key){
case' ':
e.preventDefault();
document.getElementById('btn-play').click();
break;
case'm':
case'M':
e.preventDefault();
document.getElementById('btn-volume').click();
break;
case'ArrowLeft':
e.preventDefault();
document.getElementById('btn-rewind').click();
break;
case'ArrowRight':
e.preventDefault();
document.getElementById('btn-forward').click();
break;
case'ArrowUp':
e.preventDefault();
volume=Math.min(100,volume+10);
document.getElementById('volume-slider').value=volume;
showNotification('Volume: '+volume+'%%');
break;
case'ArrowDown':
e.preventDefault();
volume=Math.max(0,volume-10);
document.getElementById('volume-slider').value=volume;
showNotification('Volume: '+volume+'%%');
break;
case'f':
case'F':
e.preventDefault();
document.getElementById('btn-fullscreen').click();
break;
case'?':
e.preventDefault();
toggleHotkeys();
break;
}
});
// Показываем уведомления
function showNotification(text){
const notif=document.createElement('div');
notif.textContent=text;
notif.style.cssText='position:fixed;top:20px;left:50%%;transform:translateX(-50%%);background:rgba(0,0,0,0.8);color:#fff;padding:15px 30px;border-radius:10px;z-index:1000;font-size:18px;';
document.body.appendChild(notif);
setTimeout(()=>notif.remove(),1500);
}
// Показываем контролы при движении мыши
let hideTimeout;
document.getElementById('container').addEventListener('mousemove',()=>{
controls.classList.add('show');
clearTimeout(hideTimeout);
hideTimeout=setTimeout(()=>controls.classList.remove('show'),3000);
});
</script> </script>
</body> </body>
</html>`, title, playerURL) </html>`, title, playerURL)