blob: 84483bcffbfaaa8fb83b50b5d635469879d2da03 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
/**
* Instruction to rotate the phone to landscape
*/
import React, { Component } from 'react'
import './landscape.warning.css'
import { isMobile, isiPhone } from 'app/utils'
import { LastMuseumLogoNoBlur } from '../icons'
const PhoneIcon = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="phone-icon">
<path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/>
</svg>
)
const RotateIcon = (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="rotate-icon">
<path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
</svg>
)
export default class LandscapeWarning extends Component {
state = {
landscape: !isMobile || window.innerWidth > window.innerHeight,
}
constructor(props) {
super(props)
this.handleResize = this.handleResize.bind(this)
if (isMobile) {
window.addEventListener("resize", this.handleResize)
setTimeout(this.handleResize, 100)
}
}
handleResize() {
const landscape = !isMobile || window.innerWidth > window.innerHeight
if (landscape !== this.state.landscape) {
this.setState({ landscape })
}
}
render() {
const { landscape } = this.state
if (landscape) return null
return (
<div className="landscape-warning">
{RotateIcon}
{PhoneIcon}
{LastMuseumLogoNoBlur}
{isiPhone && <div className="landscape-message">{'Please tap '}<small>A</small>{'A and Hide Toolbar'}{ToolbarSymbol}<br/>{'then rotate your device.'}</div>}
{!isiPhone && <div className="landscape-message">{'Please rotate your device'}</div>}
</div>
)
}
}
const ToolbarSymbol = (
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAMAAADM4ogkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEX/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3////VdBauAAAAT3RSTlMAI7z14jOM9vnH1eTy/vA8jgIOEQP4mqYE1pixB+UBo7kI8666Bra7CQ+3Erjf77AshDf8r/qQkzgF8b0WtBSyq6Hnlteoi8icj0DjxpE1VSRjywAAAAFiS0dEUONuTLwAAAAHdElNRQflBB4UJQFLwE0gAAABKUlEQVQ4y7XUbTPDQBAH8JVQWg3SBqERPdomaGlpkVL1/FTs9/82/kkwedPbGGPf3M7cb5LZu9sl+peYMUz+jtk5DTQ4EwUNnMf+QrG0WLaYl5Y1MPnSChK7UnVIC1ch12yxGOZiAXLdleEGbULWPBFukb8NWVcS3CFydiEbSoCMYpstrEEowD0s3r4ksX8Qr14bmaGRHT5Mz1nVIY+mw27v+CtTDeYT+eARYX9wmsch/Jzud/ps0Fd5nGtlbvO8150uazildvpCoiF3NLVfQLYSeYmMBDlqIrvSw1SOI/xagBTGrXntJJ1Hsrzx6VaCpEaQd3QvQooeIB+fZEj2MyedrDNutYLX5r8ks0HjXofMVnlSeosng6mB79mxFWjgx+SHmYEO/iE+AdeHRiu0e9zXAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA0LTMwVDE4OjM3OjExKzAyOjAw3aDYlgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNC0zMFQxODozNzowMSswMjowMGBXYLQAAAAASUVORK5CYII="
style={{ width: '14px', height: '14px', marginLeft: '4px', }}
/>
)
|
