Hide fullscreen button if it's not available
This commit is contained in:
parent
08d02f6013
commit
7c9c07a4cf
|
@ -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} />
|
||||||
<Route path='/(|search)' render={() => !document.fullscreenElement ?
|
{fullScreenAvailable &&
|
||||||
<button className='fullscreen' onClick={() => this.goFullScreen()}>Enter Fullscreen</button>
|
<Route path='/(|search)' render={() => !document.fullscreenElement ?
|
||||||
:
|
<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} />} />
|
||||||
|
|
|
@ -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%);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user