ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lock screen to landscape on fullscreen, unlock on exit

Browse Source 
On mobile, entering fullscreen now also locks the screen orientation to
landscape via the Screen Orientation API. Exiting fullscreen unlocks it,
allowing the device to return to portrait. Applied to both the video
player and audio player. Gracefully ignored on browsers that don't
support screen.orientation.lock (e.g. iOS Safari).

Also includes the playlist auto-scroll fix (committed separately).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ghassan 2026-05-16 23:14:28 +03:00
parent 6e7d5d178a
commit 4887d0c517
5 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/components/video-player.blade.php
View File

@ -1118,6 +1118,10 @@ document.addEventListener('fullscreenchange', () => {
const exit = fsBtn.querySelector('.ytp-svg-fs-exit'); const exit = fsBtn.querySelector('.ytp-svg-fs-exit');
enter.style.display = isFullscreen ? 'none' : ''; enter.style.display = isFullscreen ? 'none' : '';
exit.style.display = isFullscreen ? '' : 'none'; exit.style.display = isFullscreen ? '' : 'none';
if (screen.orientation && screen.orientation.lock) {
if (isFullscreen) screen.orientation.lock('landscape').catch(function(){});
else screen.orientation.unlock();
}
}); });
// ── Theater mode ────────────────────────────────────── // ── Theater mode ──────────────────────────────────────

4
resources/views/videos/partials/audio-player.blade.php
View File

@ -513,6 +513,10 @@ document.addEventListener('fullscreenchange', () => {
wrap.classList.toggle('ytp-fullscreen', fs); wrap.classList.toggle('ytp-fullscreen', fs);
fsBtn.querySelector('.ytp-svg-fs-enter').style.display = fs ? 'none' : ''; fsBtn.querySelector('.ytp-svg-fs-enter').style.display = fs ? 'none' : '';
fsBtn.querySelector('.ytp-svg-fs-exit').style.display = fs ? '' : 'none'; fsBtn.querySelector('.ytp-svg-fs-exit').style.display = fs ? '' : 'none';
if (screen.orientation && screen.orientation.lock) {
if (fs) screen.orientation.lock('landscape').catch(function(){});
else screen.orientation.unlock();
}
}); });
// ── Keyboard shortcuts ──────────────────────────────────────── // ── Keyboard shortcuts ────────────────────────────────────────

9
resources/views/videos/types/generic.blade.php
View File

@ -546,7 +546,7 @@
PL_CURRENT=d.id; PL_CURRENT=d.id;
plRender(); plRender();
plHighlight(d.id); plHighlight(d.id, true);
if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url); if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url);
plSwapContent(url); plSwapContent(url);
@ -584,12 +584,11 @@
} catch(e){ console.warn('plSwapContent',e); } } catch(e){ console.warn('plSwapContent',e); }
} }
function plHighlight(activeId){ function plHighlight(activeId, scroll){
document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){ document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){
c.classList.toggle('current-video',parseInt(c.dataset.plId)===activeId); c.classList.toggle('current-video',parseInt(c.dataset.plId)===activeId);
}); });
var a=document.querySelector('.sidebar-video-card.current-video'); if(scroll){ var a=document.querySelector('.sidebar-video-card.current-video'); if(a) a.scrollIntoView({behavior:'smooth',block:'nearest'}); }
if(a) a.scrollIntoView({behavior:'smooth',block:'nearest'});
} }
function plRender(){ function plRender(){
@ -628,7 +627,7 @@
var v=document.getElementById('videoPlayer'); var v=document.getElementById('videoPlayer');
if(v&&plLoop==='one') v.loop=true; if(v&&plLoop==='one') v.loop=true;
plRender(); plRender();
plHighlight(PL_CURRENT); plHighlight(PL_CURRENT, false);
} }
if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit(); if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit();
})(); })();

9
resources/views/videos/types/match.blade.php
View File

@ -2619,7 +2619,7 @@
PL_CURRENT=d.id; PL_CURRENT=d.id;
plRender(); plRender();
plHighlight(d.id); plHighlight(d.id, true);
if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url); if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url);
plSwapContent(url); plSwapContent(url);
@ -2657,12 +2657,11 @@
} catch(e){ console.warn('plSwapContent',e); } } catch(e){ console.warn('plSwapContent',e); }
} }
function plHighlight(activeId){ function plHighlight(activeId, scroll){
document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){ document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){
c.classList.toggle('current-video',parseInt(c.dataset.plId)===activeId); c.classList.toggle('current-video',parseInt(c.dataset.plId)===activeId);
}); });
var a=document.querySelector('.sidebar-video-card.current-video'); if(scroll){ var a=document.querySelector('.sidebar-video-card.current-video'); if(a) a.scrollIntoView({behavior:'smooth',block:'nearest'}); }
if(a) a.scrollIntoView({behavior:'smooth',block:'nearest'});
} }
function plRender(){ function plRender(){
@ -2700,7 +2699,7 @@
var v=document.getElementById('videoPlayer'); var v=document.getElementById('videoPlayer');
if(v&&plLoop==='one') v.loop=true; if(v&&plLoop==='one') v.loop=true;
plRender(); plRender();
plHighlight(PL_CURRENT); plHighlight(PL_CURRENT, false);
} }
if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit(); if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit();
})(); })();

12
resources/views/videos/types/music.blade.php
View File

@ -566,7 +566,7 @@
PL_CURRENT = d.id; PL_CURRENT = d.id;
if(audio&&plLoop==='one') audio.loop=true; else if(audio) audio.loop=false; if(audio&&plLoop==='one') audio.loop=true; else if(audio) audio.loop=false;
plRender(); plRender();
plHighlight(d.id); plHighlight(d.id, true);
// history // history
if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url); if(pushHist!==false) history.pushState({plVideoId:d.id,url:url},'',url);
@ -615,12 +615,14 @@
} }
// ── sidebar highlight ──────────────────────────────────── // ── sidebar highlight ────────────────────────────────────
function plHighlight(activeId) { function plHighlight(activeId, scroll) {
document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){ document.querySelectorAll('.sidebar-video-card[data-pl-id]').forEach(function(c){
c.classList.toggle('current-video', parseInt(c.dataset.plId)===activeId); c.classList.toggle('current-video', parseInt(c.dataset.plId)===activeId);
}); });
var active=document.querySelector('.sidebar-video-card.current-video'); if(scroll) {
if(active) active.scrollIntoView({behavior:'smooth',block:'nearest'}); var active=document.querySelector('.sidebar-video-card.current-video');
if(active) active.scrollIntoView({behavior:'smooth',block:'nearest'});
}
} }
// ── render control button states ───────────────────────── // ── render control button states ─────────────────────────
@ -658,7 +660,7 @@
var a=document.getElementById('audioEl'); var a=document.getElementById('audioEl');
if(a&&plLoop==='one') a.loop=true; if(a&&plLoop==='one') a.loop=true;
plRender(); plRender();
plHighlight(PL_CURRENT); plHighlight(PL_CURRENT, false);
} }
if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit(); if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',plInit); else plInit();
})(); })();