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-dark.css';
import './Style-red.css'; import './Style-red.css';
import './fonts/Fonts.css'; import './fonts/Fonts.css';
import { ForwardDot } from './utils.js'; import { BackwardDot, ForwardDot } from './utils.js';
import Feed from './Feed.js'; import Feed from './Feed.js';
import Article from './Article.js'; import Article from './Article.js';
import Comments from './Comments.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() { render() {
const theme = this.state.theme; const theme = this.state.theme;
document.body.style.backgroundColor = theme ? '#000' : '#eeeeee'; document.body.style.backgroundColor = theme ? '#000' : '#eeeeee';
@ -70,6 +87,11 @@ class App extends React.Component {
</p> </p>
<Route path='/(|search)' component={Search} /> <Route path='/(|search)' component={Search} />
<Route path='/(|search)' component={Submit} /> <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> </div>
<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} /> <Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />
@ -79,6 +101,7 @@ class App extends React.Component {
</Switch> </Switch>
<Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} /> <Route path='/:id/c' exact render={(props) => <Comments {...props} cache={this.cache} />} />
<BackwardDot />
<ForwardDot /> <ForwardDot />
<ScrollToTop /> <ScrollToTop />

View File

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

View File

@ -2,9 +2,30 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font: 1rem/1.3 sans-serif; font: 1rem/1.3 sans-serif;
color: #000000; color: #000000;
margin-bottom: 100vh;
word-break: break-word; word-break: break-word;
font-kerning: normal; 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 { a {
@ -22,6 +43,12 @@ input {
border-radius: 4px; border-radius: 4px;
} }
.fullscreen {
margin: 0.25rem;
padding: 0.25rem;
}
pre { pre {
overflow: auto; overflow: auto;
} }
@ -185,16 +212,20 @@ span.source {
cursor: pointer; cursor: pointer;
} }
.toggleDot { .dot {
cursor: pointer;
position: fixed; position: fixed;
bottom: 1rem;
left: 1rem;
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
background-color: #828282; background-color: #828282;
border-radius: 50%; border-radius: 50%;
} }
.toggleDot {
bottom: 1rem;
left: 1rem;
}
.toggleDot .button { .toggleDot .button {
font: 2rem/1 'icomoon'; font: 2rem/1 'icomoon';
position: relative; position: relative;
@ -203,21 +234,27 @@ span.source {
} }
.forwardDot { .forwardDot {
cursor: pointer;
position: fixed;
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;
height: 3rem;
width: 3rem;
background-color: #828282;
border-radius: 50%;
} }
.forwardDot .button { .forwardDot .button {
font: 2.5rem/1 'icomoon'; font: 2rem/1 'icomoon';
position: relative; position: relative;
top: 0.25rem; top: 0.5rem;
left: 0.3rem; left: 0.5rem;
}
.backwardDot {
bottom: 1rem;
right: 5rem;
}
.backwardDot .button {
font: 2rem/1 'icomoon';
position: relative;
top: 0.5rem;
left: 0.5rem;
} }
.search form { .search form {

View File

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

Binary file not shown.

View File

@ -25,8 +25,9 @@ export class ToggleDot extends React.Component {
render() { render() {
const id = this.props.id; const id = this.props.id;
const article = this.props.article; const article = this.props.article;
return ( return (
<div className='toggleDot'> <div className='dot toggleDot'>
<div className='button'> <div className='button'>
<Link to={'/' + id + (article ? '' : '/c')}> <Link to={'/' + id + (article ? '' : '/c')}>
{article ? '' : ''} {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 { export class ForwardDot extends React.Component {
goForward() { goForward() {
localStorage.setItem('scrollLock', 'True'); localStorage.setItem('scrollLock', 'True');
@ -48,9 +70,9 @@ export class ForwardDot extends React.Component {
if (!isMobile) return null; if (!isMobile) return null;
return ( return (
<div className='forwardDot' onClick={this.goForward}> <div className='dot forwardDot' onClick={this.goForward}>
<div className='button'> <div className='button'>
</div> </div>
</div> </div>
); );