jason/qotnews
1
0
Fork 0
forked from tanner/qotnews
Code Issues Pull Requests Releases Wiki Activity

Hide fullscreen button if it's not available

Browse Source
This commit is contained in:
Tanner Collin 2022-08-10 04:05:25 +00:00
parent 08d02f6013
commit 7c9c07a4cf
3 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webclient/src/App.js
View File

@ -73,6 +73,10 @@ class App extends React.Component {
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';
const fullScreenAvailable = document.fullscreenEnabled ||
document.mozFullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
return ( return (
<div className={theme}> <div className={theme}>
@ -87,11 +91,13 @@ 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} />
{fullScreenAvailable &&
<Route path='/(|search)' render={() => !document.fullscreenElement ? <Route path='/(|search)' render={() => !document.fullscreenElement ?
<button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button> <button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button>
: :
<button className='fullscreen' onClick={() => this.exitFullScreen()}>Exit 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} />} />

1
webclient/src/Style-dark.css
View File

@ -43,6 +43,7 @@
text-decoration: none; text-decoration: none;
} }
.dark .story-text video,
.dark .story-text img { .dark .story-text img {
filter: brightness(50%); filter: brightness(50%);
} }

1
webclient/src/Style-red.css
View File

@ -59,6 +59,7 @@
text-decoration: none; text-decoration: none;
} }
.red .story-text video,
.red .story-text img { .red .story-text img {
filter: grayscale(100%) brightness(20%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8); filter: grayscale(100%) brightness(20%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
} }