Add fullscreen mode

This commit is contained in:
Tanner Collin 2022-08-08 23:21:49 +00:00
parent 1b54342702
commit 08d02f6013
6 changed files with 101 additions and 22 deletions

View File

@ -5,7 +5,7 @@ import './Style-light.css';
import './Style-dark.css';
import './Style-red.css';
import './fonts/Fonts.css';
import { ForwardDot } from './utils.js';
import { BackwardDot, ForwardDot } from './utils.js';
import Feed from './Feed.js';
import Article from './Article.js';
import Comments from './Comments.js';
@ -53,6 +53,23 @@ class App extends React.Component {
}
}
goFullScreen() {
if ('wakeLock' in navigator) {
navigator.wakeLock.request('screen');
}
document.body.requestFullscreen({ navigationUI: 'hide' }).then(() => {
window.addEventListener('resize', () => this.forceUpdate());
this.forceUpdate();
});
};
exitFullScreen() {
document.exitFullscreen().then(() => {
this.forceUpdate();
});
};
render() {
const theme = this.state.theme;
document.body.style.backgroundColor = theme ? '#000' : '#eeeeee';
@ -70,6 +87,11 @@ class App extends React.Component {
</p>
<Route path='/(|search)' component={Search} />
<Route path='/(|search)' component={Submit} />
<Route path='/(|search)' render={() => !document.fullscreenElement ?
<button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button>
:
<button className='fullscreen' onClick={() => this.exitFullScreen()}>Exit Fullscreen</button>
} />
</div>
<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />
@ -79,6 +101,7 @@ class App extends React.Component {
</Switch>
<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
<BackwardDot />
<ForwardDot />
<ScrollToTop />

View File

@ -15,6 +15,7 @@ class ScrollToTop extends React.Component {
}
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
render() {

View File

@ -2,9 +2,30 @@ body {
text-rendering: optimizeLegibility;
font: 1rem/1.3 sans-serif;
color: #000000;
margin-bottom: 100vh;
word-break: break-word;
font-kerning: normal;
margin: 0;
}
::backdrop {
background-color: rgba(0,0,0,0);
}
body:fullscreen {
overflow-y: scroll !important;
}
body:-ms-fullscreen {
overflow-y: scroll !important;
}
body:-webkit-full-screen {
overflow-y: scroll !important;
}
body:-moz-full-screen {
overflow-y: scroll !important;
}
#root {
margin: 8px 8px 100vh 8px !important;
}
a {
@ -22,6 +43,12 @@ input {
border-radius: 4px;
}
.fullscreen {
margin: 0.25rem;
padding: 0.25rem;
}
pre {
overflow: auto;
}
@ -185,16 +212,20 @@ span.source {
cursor: pointer;
}
.toggleDot {
.dot {
cursor: pointer;
position: fixed;
bottom: 1rem;
left: 1rem;
height: 3rem;
width: 3rem;
background-color: #828282;
border-radius: 50%;
}
.toggleDot {
bottom: 1rem;
left: 1rem;
}
.toggleDot .button {
font: 2rem/1 'icomoon';
position: relative;
@ -203,21 +234,27 @@ span.source {
}
.forwardDot {
cursor: pointer;
position: fixed;
bottom: 1rem;
right: 1rem;
height: 3rem;
width: 3rem;
background-color: #828282;
border-radius: 50%;
}
.forwardDot .button {
font: 2.5rem/1 'icomoon';
font: 2rem/1 'icomoon';
position: relative;
top: 0.25rem;
left: 0.3rem;
top: 0.5rem;
left: 0.5rem;
}
.backwardDot {
bottom: 1rem;
right: 5rem;
}
.backwardDot .button {
font: 2rem/1 'icomoon';
position: relative;
top: 0.5rem;
left: 0.5rem;
}
.search form {

View File

@ -76,10 +76,6 @@
border-left: 1px solid #440000;
}
.red .toggleDot {
background-color: #440000;
}
.red .forwardDot {
.red .dot {
background-color: #440000;
}

Binary file not shown.

View File

@ -25,8 +25,9 @@ export class ToggleDot extends React.Component {
render() {
const id = this.props.id;
const article = this.props.article;
return (
<div className='toggleDot'>
<div className='dot toggleDot'>
<div className='button'>
<Link to={'/' + id + (article ? '' : '/c')}>
{article ? '' : ''}
@ -37,6 +38,27 @@ export class ToggleDot extends React.Component {
}
}
export class BackwardDot extends React.Component {
goBackward() {
localStorage.setItem('scrollLock', 'True');
window.history.back();
}
render() {
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (!isMobile) return null;
if (!document.fullscreenElement) return null;
return (
<div className='dot backwardDot' onClick={this.goBackward}>
<div className='button'>
</div>
</div>
);
}
}
export class ForwardDot extends React.Component {
goForward() {
localStorage.setItem('scrollLock', 'True');
@ -48,9 +70,9 @@ export class ForwardDot extends React.Component {
if (!isMobile) return null;
return (
<div className='forwardDot' onClick={this.goForward}>
<div className='dot forwardDot' onClick={this.goForward}>
<div className='button'>
</div>
</div>
);