react-device-detect#isIOS JavaScript Examples
The following examples show how to use
react-device-detect#isIOS.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ButtonDrawer.jsx From v3-ui with MIT License | 6 votes |
|
export function ButtonDrawer(props) {
const { children } = props
return (
<>
<div className='hidden sm:flex items-center justify-between mt-12 sm:mt-0 w-full'>
{children}
</div>
<div
className={classnames(
'flex items-center justify-between sm:hidden h-20 l-0 r-0 b-0 fixed w-full mx-auto px-4',
{
'pb-8': isIOS
}
)}
id='button-portal'
style={{
zIndex: 123141241
}}
>
{children}
</div>
</>
)
}
Example #2
| Source File: index.js From DMS_React with GNU Affero General Public License v3.0 | 6 votes |
|
Vertical =(props)=> {
const { drawerType } = useSelector(({settings})=>settings);
const drawerStyle = drawerType.includes(FIXED_DRAWER) ? "fixed-drawer" : drawerType.includes(COLLAPSED_DRAWER) ? "collapsible-drawer" : "mini-drawer";
//set default height and overflow for iOS mobile Safari 10+ support.
if (isIOS && isMobile) {
document.body.classList.add("ios-mobile-view-height");
} else if (document.body.classList.contains("ios-mobile-view-height")) {
document.body.classList.remove("ios-mobile-view-height");
}
return (
<div className={`app-container ${drawerStyle}`} data-test="drawerComp">
{/* <Tour/> */}
<SideBar/>
<div className="app-main-container">
<div className="app-header">
<Header/>
</div>
<main className="app-main-content-wrapper">
<div className="app-main-content">
{props.children}
</div>
{/* <Footer/> */}
</main>
</div>
{/* <ColorOption/> */}
</div>
);
}
Example #3
| Source File: DownloadContainer.js From website with MIT License | 5 votes |
|
DownloadContainer = props => {
const [device, setDevice] = React.useState('')
const { appExtensions } = props
React.useEffect(() => {
if (isMobile) {
if (isAndroid) {
setDevice('android')
} else if (isIOS) {
setDevice('ios')
} else {
setDevice('browser')
}
} else {
setDevice('browser')
}
}, [])
if (isEmpty(appExtensions)) return null
const isSSR = typeof window === 'undefined'
const tabs = Object.keys(appExtensions).map(item => ({
label: appExtensions[item]['label'],
id: item,
content: !isSSR && (
<React.Suspense fallback={<Loading />}>
<TabContentDownload {...appExtensions[item]} id={item} />
</React.Suspense>
),
}))
return (
<Container>
<ContentWrapper>
{!isSSR && device ? (
<React.Suspense fallback={<div />}>
<TabWrapper tabs={tabs} activeTabDefault={device}></TabWrapper>
</React.Suspense>
) : null}
</ContentWrapper>
</Container>
)
}
Example #4
| Source File: AddToHomeScreenModal.js From pwa with MIT License | 5 votes |
|
export default function AddToHomeScreenModal() {
const intl = useIntl();
const [modalShow, setModalShow] = useState(true);
const handleOnCloseButtonClick = () => {
setModalShow(false);
};
const renderInThisDevice =
(process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_ANDROID === 'true' &&
isAndroid) ||
(process.env.REACT_APP_ADD_TO_HOME_SCREEN_MODAL_IOS === 'true' &&
(isMobile || isIPad13));
const shouldRender = renderInThisDevice && modalShow && !isInStandaloneMode();
//TODO Add time for modal show again
return (
<div>
{shouldRender && (
<Dialog fullScreen open={modalShow} className="add-to-home-screen">
<div className="logo">
<img src={logo} alt="logo" />
</div>
<h3 className="flex-column perfect-center">
{isAndroid && intl.formatMessage('add-to-home.android.title')}
{(isIOS || isIPad13) && intl.formatMessage('add-to-home.ios.title')}
</h3>
<Paper className="steps flex-column perfect-center">
<span>
{(isIOS || isIPad13) &&
intl.formatMessage('add-to-home.ios.step1.first')}
{(isIOS || isIPad13) && (
<img className="share-icon" src={ShareIcon} alt="Share" />
)}
{isAndroid &&
intl.formatMessage('add-to-home.android.step1.first')}
{isAndroid && (
<img
className="chrome-menu"
src={AndroidChromeMenu}
alt="Menu"
/>
)}
{intl.formatMessage('add-to-home.ios.step1.end')}
</span>
<span>
{intl.formatMessage('add-to-home.step2.first')}
{(isIOS || isIPad13) && (
<img
className="add-to-home-screen-icon"
src={AddToHomeScreenIcon}
alt="Add To Home Screen"
/>
)}
{isAndroid && (
<span className="add-to-home-screen-icon">
{intl.formatMessage(
'add-to-home.android.step2.add-to-home-screen'
)}
</span>
)}
{intl.formatMessage('add-to-home.step2.end')}
</span>
<span>{intl.formatMessage('add-to-home.step3.first')}</span>
</Paper>
<Button
variant="contained"
color="primary"
onClick={handleOnCloseButtonClick}
>
{intl.formatMessage('add-to-home.add-later')}
</Button>
</Dialog>
)}
</div>
);
}
Example #5
| Source File: MovieSidebar.js From gophie-web with MIT License | 4 votes |
|
export default function MovieSidebar(props) {
let refLi = useRef([]);
let refSidebarContent = useRef(null);
let sidebarTimeline = useRef();
const { toggle, movie, ip_address } = props;
const ratings_api = API_ENDPOINTS.ocena;
// const [ratings, setRating] = useState({});
const [ipRating, setIpRating] = useState(0);
const [play, setPlay] = useState(false);
const [referralID, setReferralID] = useState(null);
// eslint-disable-next-line
const [error, setError] = useState(false);
const [episodeLink, setEpisodeLink] = useState([]);
const [description, setDescription] = useState();
const [fullDescription, setFullDescription] = useState();
const [readMore, setReadMore] = useState(false);
const [loadingReferralID, setLoadingReferralID] = useState(false);
const handlePlayRequest = (e) => {
e.preventDefault();
setPlay(true);
};
const rateMovie = (value) => {
axios
.post(ratings_api + "/rate", {
referral_id: movie.referral_id,
ip_address: ip_address,
score: value,
})
.then((res) => {
if (res.data !== null) {
setIpRating(res.data.score);
}
})
.catch((err) => {
if (err) {
setError({
error: true,
});
}
});
};
const getShareID = (action) => {
axios
.post(ratings_api + "/referral", {
ip_address: ip_address,
referral_id: movie.referral_id,
})
.then((res) => {
const { data } = res;
if (action) {
setLoadingReferralID(false);
}
setReferralID(data, () => {
if (action) {
shareMovie();
}
});
})
.catch(() => {
setLoadingReferralID(false);
});
};
const truncate = () => {
if (fullDescription) {
if (fullDescription.length > 350) {
setDescription(fullDescription);
setReadMore(false);
}
}
};
const addDownload = () => {
axios
.post(ratings_api + "/download", {
ip_address: ip_address,
referral_id: movie.referral_id,
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err);
});
};
const shareMovie = () => {
if (referralID) {
props.shareMovie({
...movie,
referralID: referralID,
});
} else {
setLoadingReferralID(true);
getShareID("share");
}
};
useEffect(() => {
const getShareID = (action) => {
axios
.post(ratings_api + "/referral", {
ip_address: ip_address,
referral_id: movie.referral_id,
})
.then((res) => {
const { data } = res;
if (action) {
setLoadingReferralID(false);
}
setReferralID(data, action ? shareMovie() : null);
})
.catch(() => {
setLoadingReferralID(false);
setReferralID(movie.referral_id, action ? shareMovie() : null);
});
};
getShareID();
// eslint-disable-next-line
}, []);
useEffect(() => {
if (movie.is_series && movie.s_download_link) {
const episodeLinkArray = [];
const SDownloadLink = movie.s_download_link;
for (const [downloadTxt, downloadLink] of Object.entries(SDownloadLink)) {
const downloadTxtStrip = downloadTxt
.replace("[AnimeOut]", "")
.replace("[Erai-raws]", "");
episodeLinkArray.push(
<div
key={`${movie.Index}${downloadLink}`}
className="sidebar-footer-download"
>
<p>{downloadTxtStrip}</p>
<a
href={sanitizeUrl(downloadLink)}
target="_blank"
rel="noopener noreferrer"
className="gbtn gbtn-primary align-items-center"
>
<span className="mr-1">
<DownloadIcon />
</span>
download
</a>
</div>
);
}
setEpisodeLink([...episodeLinkArray]);
}
if (movie.description) {
if (movie.description.length > 350) {
const truncatedText = movie.description
.substring(0, 350)
.replace(/\w+$/, "");
setDescription(truncatedText);
setFullDescription(movie.description);
setReadMore(true);
} else {
setDescription(movie.description);
setReadMore(false);
}
}
}, [movie]);
useEffect(() => {
if (toggle === false) {
gsap.to(refLi, {
duration: 0.4,
scaleX: 0,
transformOrigin: "right",
stagger: 0.1,
});
} else {
sidebarTimeline.current = gsap.timeline();
sidebarTimeline.current.to(refLi.current, {
duration: 0.4,
scaleX: 1,
transformOrigin: "right",
stagger: 0.2,
});
sidebarTimeline.current.to(refSidebarContent, {
duration: 0.1,
opacity: 1,
});
}
}, [toggle]);
return (
<MovieSidebarPortal>
<Style.MovieOverlayStyle className={toggle ? "isOnOverlay" : ""} />{" "}
<Style.MovieSidebarStyle>
<div className="moviesidenav">
<ul className="transition">
<li ref={(el) => (refLi.current[0] = el)}> </li>{" "}
<li ref={(el) => (refLi.current[1] = el)}> </li>{" "}
<li ref={(el) => (refLi.current[2] = el)}> </li>{" "}
<li ref={(el) => (refLi.current[3] = el)}> </li>{" "}
<li ref={(el) => (refLi.current[4] = el)}> </li>{" "}
</ul>
<div
className="sidebar-content"
ref={(el) => {
refSidebarContent = el;
}}
>
<button onClick={toggle} className={"cancel-btn"}>
<FontAwesomeIcon icon={faTimes} />
</button>
<div className="siderbar-header mt-4">
<h3> {movie.name} </h3>
<Rating
value={ipRating}
max={5}
onChange={(value) => rateMovie(value)}
/>
</div>
{movie.is_series ? (
<img
src={
movie.cover_photo_link === ""
? "https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png"
: movie.cover_photo_link
}
alt={movie.name}
className="sidebar-image-cover mt-4"
/>
) : play ? (
<div>
{greekFromEnglish(movie.engine) === "Server5" ? (
<div className="player-error-alert">
<p className="player-error-message">
Streaming from alpha is problematic, suggest{" "}
<a
className="gophie-link"
href={movie.DownloadLink}
target="_blank"
rel="noopener noreferrer"
>
downloading
</a>{" "}
instead
</p>
</div>
) : null}
{isIOS ? (
<div className="player-error-alert">
<p className="player-error-message">
{" "}
iOS 10+ users might have to disable{" "}
<i>
<em>Low Power Mode</em>
</i>{" "}
to stream
</p>
</div>
) : null}
<div className="player-wrapper">
<ReactPlayer
url={movie.download_link}
className="react-player"
playing
playsinline
pip
controls
width="100%"
height="90%"
/>
</div>
</div>
) : (
<div className="position-relative">
<img
src={
movie.cover_photo_link === ""
? "https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png"
: movie.cover_photo_link
}
alt={movie.name}
className="sidebar-image-cover mt-4"
/>
<a
id="stop-video"
className="video-play-button"
href="/"
onClick={handlePlayRequest}
>
<span></span>
</a>
</div>
)}
{/* sidebar movie description */}
<div className="sidebar-description mt-4">
{movie.description === "" || movie.description === null ? (
"Seems like the description for this movie is missing"
) : (
<p>
{description}
<span
className={readMore === true ? "" : "hidden"}
onClick={truncate}
onKeyDown={truncate}
role="button"
tabIndex={0}
>
... Read more
</span>
</p>
)}
</div>
<div className="sidebar-footer mt-4">
{/* if AnimeOut or kdramahood engine add the download link */}
{!movie.is_series ? (
<div>
<a
href={movie.download_link}
onClick={addDownload}
target="_blank"
rel="noopener noreferrer"
className="gbtn gbtn-secondary mr-3"
>
<span className="mr-1">
<DownloadIcon />
</span>
download
</a>
<button className="sidebar-share-btn" onClick={shareMovie}>
{loadingReferralID ? (
<FontAwesomeIcon icon={faSpinner} />
) : (
<ShareIcon />
)}
</button>
</div>
) : (
<>
<div className="sidebar-footer-header d-flex justify-content-between align-items-center">
<p>Episodes</p>
<button className="sidebar-share-btn" onClick={shareMovie}>
{loadingReferralID ? (
<FontAwesomeIcon icon={faSpinner} />
) : (
<ShareIcon />
)}
</button>
</div>
{episodeLink}
</>
)}
</div>
</div>
</div>
</Style.MovieSidebarStyle>{" "}
</MovieSidebarPortal>
);
}
Example #6
| Source File: Popup.js From gophie-web with MIT License | 4 votes |
|
render() {
const { server } = this.props;
return (
<Modal
show={this.props.show}
onHide={() => this.props.onHide()}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
dialogClassName="dialog-theme"
data-tour="my-fifth-step"
centered
>
<Modal.Body className="gophie-modal">
<section className="gophie-modal__img">
<img
src={
this.props.movie.cover_photo_link === ""
? "No image"
: this.props.movie.cover_photo_link
}
alt={this.props.movie.name}
/>
{/* Video Stream Play Icon */}
{this.state.play ? (
<a
id="stop-video"
className="video-stop-button"
href="/"
onClick={this.handleStopRequest.bind(this)}
>
<span></span>{" "}
</a>
) : (
<div>
{greekFromEnglish(server) === "Server2" ? null : (
<a
id="play-video"
className="video-play-button"
href="/"
onClick={this.handlePlayRequest.bind(this)}
>
<span> </span>{" "}
</a>
)}
</div>
)}
{/* Video Stream Play Icon */}
</section>
<section className="gophie-modal__body">
<Modal.Header className="gophie-modal__body--header" closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{this.props.movie.name}
</Modal.Title>
</Modal.Header>
{this.state.play ? (
<div>
<div className="player-wrapper">
<ReactPlayer
url={this.props.movie.download_link}
className="react-player"
playing
playsinline
pip
controls
width="100%"
height="90%"
/>
</div>
{greekFromEnglish(this.props.movie.engine) === "Alpha" ? (
<div className="player-error-alert">
<p className="player-error-message">
Streaming from alpha is problematic, suggest{" "}
<a
className="gophie-link"
href={this.props.movie.download_link}
target="_blank"
rel="noopener noreferrer"
>
downloading
</a>{" "}
instead
</p>
</div>
) : null}
{isIOS ? (
<div className="player-error-alert">
<p className="player-error-message">
{" "}
iOS 10+ users might have to disable{" "}
<i>
<em>Low Power Mode</em>
</i>{" "}
to stream
</p>
</div>
) : null}
</div>
) : (
<section className="gophie-modal__body--body">
<div className="gophie-modal-rating-container">
<div
className="gophie-modal-rating-container__average"
data-tour="my-seventh-step"
>
<div className="gophie-modal-rating-container__average--container">
<div className="gophie-modal-rating-container__average--container-item-1">
<p>
{this.state.ratings.average_ratings
? Math.round(
this.state.ratings.average_ratings * 10
) / 10
: 0}
</p>
<p>/5</p>
</div>
<p className="em-rate">
<span className="em-span">by</span>
{this.state.ratings.by
? Math.round(this.state.ratings.by)
: 0}
</p>
</div>
</div>
<div
className="gophie-modal-rating-container__rate"
data-tour="my-sixth-step"
>
<p>Rate Movie</p>
<Rating
value={this.state.ip_rating}
max={5}
onChange={(value) => this.rateMovie(value)}
/>
</div>
</div>
<div className="gophie-modal__body--description scollable-container">
{this.props.movie.description === ""
? "Seems like the description for this movie is missing"
: this.props.movie.description}
</div>
<div>
<div></div>
{this.props.movie.name !== "AnimeOut" ? null : (
<div>
<div className="d-flex justify-content-between align-items-center w-100 mt-3">
<div>Episodes</div>
<FontAwesomeIcon icon={faArrowDown} />
</div>
<div className="scollable-container d-flex flex-column">
{this.state.episodeLink}
</div>
</div>
)}
</div>
</section>
)}
</section>
</Modal.Body>
</Modal>
);
}
Example #7
| Source File: shared.js From gophie-web with MIT License | 4 votes |
|
render() {
const { theme } = this.state;
const selectedTheme = theme !== 'light' ? lightTheme : darkTheme;
return (
<div className="movie-shared-detail">
<ThemeProvider theme={selectedTheme}>
<GlobalStyles />
<NavBar sharedPage theme={theme} switchTheme={() => this.switchTheme(this.state.theme)} />
<div className="container">
<div style={{ marginTop: '10em' }}>
<div className="gophie-modal shared-detail-content mt-5">
<section className="gophie-modal__img">
<img
src={
this.state.movie.cover_photo_link === ''
? 'No image'
: this.state.movie.cover_photo_link
}
alt={this.state.movie.name}
/>
{/* Video Stream Play Icon */}
{this.state.play ? (
<a
id="stop-video"
className="video-stop-button"
href="/"
onClick={this.handleStopRequest.bind(this)}
>
<span></span>{' '}
</a>
) : (
<a
id="play-video"
className="video-play-button"
href="/"
onClick={this.handlePlayRequest.bind(this)}
>
<span> </span>{' '}
</a>
)}
{/* Video Stream Play Icon */}
</section>
<section
className="gophie-modal__body"
style={{
borderBottomRightRadius: '.5em',
borderTopRightRadius: '.5em',
}}
>
<div className="gophie-modal__body--header">
<div id="contained-modal-title-vcenter">{this.state.movie.name}</div>
</div>
{this.state.play ? (
<div>
<div className="player-wrapper">
<ReactPlayer
url={this.state.movie.download_link}
className="react-player"
playing
playsinline
pip
controls
width="100%"
height="90%"
/>
</div>
{isIOS ? (
<div className="player-error-alert">
<p className="player-error-message">
{' '}
iOS 10+ users might have to disable{' '}
<i>
<em>Low Power Mode</em>
</i>{' '}
to stream
</p>
</div>
) : null}
</div>
) : (
<section className="gophie-modal__body--body">
<div className="gophie-modal-rating-container">
<div
className="gophie-modal-rating-container__average"
data-tour="my-seventh-step"
>
<div className="gophie-modal-rating-container__average--container">
<div className="gophie-modal-rating-container__average--container-item-1">
<p>
{this.state.ratings.average_ratings
? Math.round(
this.state.ratings.average_ratings * 10
) / 10
: 0}
</p>
<p>/5</p>
</div>
<p className="em-rate">
<span className="em-span">by</span>
{this.state.ratings.by
? Math.round(this.state.ratings.by)
: 0}
</p>
</div>
</div>
<div
className="gophie-modal-rating-container__rate"
data-tour="my-sixth-step"
>
<p>Rate Movie</p>
<Rating
value={this.state.ip_rating}
max={5}
onChange={(value) => this.rateMovie(value)}
/>
</div>
</div>
<div className="gophie-modal__body--description mb-5">
{this.state.movie.description === ''
? 'Seems like the description for this movie is missing'
: this.state.movie.description}
</div>
<a href={this.state.movie.download_link}>
<button className="btn btn-info w-100 mt-5">download</button>
</a>
</section>
)}
</section>
</div>
</div>
<div className="mb-5 position-relative">
<TrendingCarousel style={{ background: 'green' }} ip_address={this.state.ip_address} />
</div>
</div>
</ThemeProvider>
</div>
);
}
Example #8
| Source File: CTA.js From website with MIT License | 4 votes |
|
CTA = props => {
const {
link: linkDefault,
text: textDefault,
align = 'left',
newTab,
iconConfig,
color,
button = false,
showRightArrow = false,
showLeftArrow = false,
typeLayout = '',
buttonSize,
customClick,
buttonDisplay,
fontSize,
buttonGradient,
downloadBrowsers,
eventCategory,
eventLabel,
hubSpotForm,
buttonSecondary,
socialLink,
} = props
const [keyBrowser, setKeyBrowser] = React.useState('chrome')
const isButton = buttonDisplay || button
const defaultIconConfig = { width: '1.5em', height: '0.5em', fill: 'black' }
const icon = { ...defaultIconConfig, fill: color, ...iconConfig }
const isDownloadBrowser = !isEmpty(downloadBrowsers)
const [delayShow, setDelayShow] = React.useState(isDownloadBrowser)
const [showPopup, setShowPopup] = React.useState(false)
let text = textDefault,
link = linkDefault,
label = eventLabel,
lowerBrowserName = lowerCase(browserName),
iconBrowser = ''
if (isDownloadBrowser && keyBrowser && downloadBrowsers[keyBrowser]) {
label = eventLabel.replace('$browser', downloadBrowsers[keyBrowser]?.text)
text = textDefault.replace('$browser', downloadBrowsers[keyBrowser]?.text)
if (['ios', 'android', 'not-supported'].includes(keyBrowser)) {
text = downloadBrowsers[keyBrowser]?.text
}
link = downloadBrowsers[keyBrowser]?.link
iconBrowser = downloadBrowsers[keyBrowser]?.icon
}
const onClosePopup = () => {
setShowPopup(false)
}
const handleCustomClick = e => {
if (hubSpotForm) {
setShowPopup(true)
return
}
if (customClick) {
e.preventDefault()
customClick()
}
if (eventCategory && eventLabel) {
trackCustomEvent({
category: eventCategory,
action: 'Click',
label: label,
})
}
}
React.useEffect(() => {
if (isDownloadBrowser) {
if (
isMobile &&
((isAndroid && downloadBrowsers['android']) ||
(isIOS && downloadBrowsers['ios']))
) {
if (isAndroid && downloadBrowsers['android']) {
setKeyBrowser('android')
} else if (isIOS && downloadBrowsers['ios']) {
setKeyBrowser('ios')
}
} else {
if (typeof navigator?.brave !== 'undefined') {
lowerBrowserName = 'brave'
}
if (downloadBrowsers[lowerBrowserName]) {
setKeyBrowser(lowerBrowserName)
} else if (downloadBrowsers['not-supported']) {
setKeyBrowser('not-supported')
} else {
setKeyBrowser('chrome')
}
}
setDelayShow(false)
}
}, [downloadBrowsers, isDownloadBrowser, lowerBrowserName])
let ele = (
<CTAContainer
className={classnames('ctaModuleContainer', {
socialLink: socialLink,
})}
align={align}
>
<ContentWrapper
to={link}
newTab={newTab || isDownloadBrowser}
color={color}
typeLayout={typeLayout}
onClick={handleCustomClick}
>
{socialLink ? <SocialIcon name={socialLink} /> : null}
<LinkTitle
className={classnames({
[`leftArrow`]: showLeftArrow,
[`rightArrow`]: showRightArrow || socialLink,
})}
>
{showLeftArrow ? <Arrow {...icon} transform={'rotate(180)'} /> : null}
{text}
{showRightArrow || socialLink ? <Arrow {...icon} /> : null}
</LinkTitle>
</ContentWrapper>
</CTAContainer>
)
if (isButton) {
ele = (
<Button
size={buttonSize}
link={link}
text={text}
className={keyBrowser}
newTab={newTab || isDownloadBrowser}
color={buttonSecondary ? 'secondary' : color}
customClick={handleCustomClick}
fontSize={fontSize}
buttonGradient={buttonGradient}
eventCategory={eventCategory}
eventLabel={eventLabel}
iconUrl={!delayShow ? iconBrowser : ''}
iconPosition={['ios', 'android'].includes(keyBrowser) ? 'start' : 'end'}
hide={delayShow}
/>
)
}
if (
isDownloadBrowser &&
!Object.keys(downloadBrowsers).includes(lowerBrowserName) &&
downloadBrowsers['browsers-supported']
) {
ele = (
<BrowserWrapper>
<BrowserInfo>
<BrowserInfoTitle>
{downloadBrowsers['browsers-supported'].text}
</BrowserInfoTitle>
<BrowserInfoDesc>
{downloadBrowsers['browsers-supported'].description}
</BrowserInfoDesc>
</BrowserInfo>
<BrowserList>
{Object.keys(downloadBrowsers).map(key => {
const { link, icon, text } = downloadBrowsers[key]
if (['chrome', 'firefox', 'brave', 'edge'].includes(key)) {
return (
<BrowserItem key={text} to={link} newTab>
<Image src={icon} />
<BrowserName>{text}</BrowserName>
</BrowserItem>
)
}
return null
})}
</BrowserList>
</BrowserWrapper>
)
}
return (
<>
{ele}
{hubSpotForm ? (
<Popup showPopup={showPopup} onClosePopup={onClosePopup}>
{contentfulModuleToComponent({
...hubSpotForm,
})}
</Popup>
) : null}
</>
)
}
Example #9
| Source File: MovieShowOverview.js From petio with MIT License | 4 votes |
|
render() {
let criticRating = this.props.mediaData.vote_average;
let director = this.findNested(
this.props.mediaData.credits.crew,
"job",
"Director"
);
let screenplay = this.findNested(
this.props.mediaData.credits.crew,
"job",
"Screenplay"
);
let userRating = "Not Reviewed";
let userRatingVal = 0;
let typeRequest = this.props.mediaData.episode_run_time
? this.props.season
? `season ${this.props.season}`
: "show"
: "";
let requestBtn = this.props.requestPending ? (
<button className="btn btn__square pending">
<Spinner />
Request
</button>
) : this.props.mediaData.on_server ? (
isIOS ? (
<a
href={`plex://preplay/?metadataKey=%2Flibrary%2Fmetadata%2F${this.props.mediaData.on_server.ratingKey}&metadataType=1&server=${this.props.mediaData.on_server.serverKey}`}
target="_blank"
rel="noreferrer"
className="btn btn__square good"
>
<CheckIcon />
Watch now
</a>
) : (
<a
href={`https://app.plex.tv/desktop#!/server/${this.props.mediaData.on_server.serverKey}/details?key=%2Flibrary%2Fmetadata%2F${this.props.mediaData.on_server.ratingKey}`}
target="_blank"
rel="noreferrer"
className="btn btn__square good"
>
<CheckIcon />
Watch now
</a>
)
) : this.props.requested ? (
<button className="btn btn__square blue" onClick={this.props.request}>
{`Requested by ${this.props.requested}
${this.props.requested > 1 ? "users" : "user"}`}
</button>
) : (
<button className="btn btn__square" onClick={this.props.request}>
<RequestIcon />
Request {typeRequest}
</button>
);
let reportBtn = this.props.mediaData.on_server ? (
<button className="btn btn__square" onClick={this.props.openIssues}>
<ReportIcon />
Report an issue
</button>
) : null;
let hasReviewed = false;
if (this.props.user.reviews) {
if (
this.props.user.reviews[this.props.match.params.id] ||
this.props.externalReviews
) {
let ratingsUser = 0;
let ignore = 0;
let total = 0;
if (this.props.user.reviews[this.props.match.params.id]) {
for (
var i = 0;
i < this.props.user.reviews[this.props.match.params.id].length;
i++
) {
if (
this.props.user.reviews[this.props.match.params.id][i].user ==
this.props.user.current.id
) {
hasReviewed =
this.props.user.reviews[this.props.match.params.id][i];
}
}
if (
Object.keys(this.props.user.reviews[this.props.match.params.id])
.length > 0
) {
Object.keys(
this.props.user.reviews[this.props.match.params.id]
).map((r) => {
ratingsUser +=
(this.props.user.reviews[this.props.match.params.id][r].score /
10) *
100;
});
}
total += Object.keys(
this.props.user.reviews[this.props.match.params.id]
).length;
}
if (this.props.externalReviews) {
this.props.externalReviews.map((r) => {
if (r.author_details.rating === null) {
ignore++;
} else {
ratingsUser += (r.author_details.rating / 10) * 100;
}
});
total += this.props.externalReviews.length;
}
userRating = ratingsUser
? `${(ratingsUser / (total - ignore)).toFixed(0)}% (${
total - ignore
} reviews)`
: "Not Reviewed";
userRatingVal = ratingsUser / (total - ignore);
}
}
let reviewBtn = (
<button
className="btn btn__square"
onClick={!hasReviewed ? this.props.openReview : null}
>
{!hasReviewed ? (
<>
<StarIcon />
Review
</>
) : (
<>
<StarIcon />
Reviewed {(hasReviewed.score / 10) * 100}%
</>
)}
</button>
);
let trailerBtn = this.props.video ? (
<button onClick={this.props.showTrailer} className="btn btn__square">
<TrailerIcon />
{this.props.trailer ? "Close Trailer" : "Trailer"}
</button>
) : null;
return (
<section>
<div className="quick-view">
<div className="side-content">
<div className="media-action">
{trailerBtn}
{reviewBtn}
{this.props.mediaData.available_resolutions ? (
<div className="resolutions">
{this.props.mediaData.available_resolutions.includes("4k") ? (
<ResIconUHd />
) : null}
{this.props.mediaData.available_resolutions.includes(
"1080"
) ? (
<ResIconFHd />
) : null}
{this.props.mediaData.available_resolutions.includes(
"720"
) ? (
<ResIconHd />
) : null}
</div>
) : null}
</div>
</div>
<div className="detail--wrap">
<div className="detail--content">
<div className="detail--bar">
<p>
{this.props.mediaData.release_date
? new Date(this.props.mediaData.release_date).getFullYear()
: null}
{this.props.mediaData.first_air_date
? new Date(
this.props.mediaData.first_air_date
).getFullYear()
: null}
{!this.props.mediaData.release_date &&
!this.props.mediaData.first_air_date
? "Unknown"
: null}
</p>
<div className="detail--bar--sep">·</div>
<p className="runtime" title="Running Time">
{this.props.mediaData.runtime
? this.timeConvert(this.props.mediaData.runtime)
: this.props.mediaData.episode_run_time
? this.props.mediaData.episode_run_time.length > 0
? this.timeConvert(
Array.isArray(this.props.mediaData.episode_run_time)
? this.props.mediaData.episode_run_time[0]
: this.props.mediaData.episode_run_time
)
: "Unknown"
: "Not Available"}
</p>
<div className="detail--bar--sep">·</div>
<p>
<a
href={`https://www.themoviedb.org/${
this.props.mediaData.seasons ? "tv" : "movie"
}/${this.props.mediaData.id}`}
className="rating-icon"
target="_blank"
rel="noreferrer"
>
<TmdbIcon />
</a>
<span
className={`rating color-${
criticRating > 7.9
? "green"
: criticRating > 6.9
? "blue"
: criticRating > 4.9
? "orange"
: "red"
}`}
>
{criticRating}
</span>
</p>
{this.props.mediaData.imdb_data.rating ? (
<>
<div className="detail--bar--sep">·</div>
<p>
<a
href={`https://www.imdb.com/title/${this.props.mediaData.imdb_id}`}
target="_blank"
rel="noreferrer"
className="rating-icon"
>
<ImdbIcon />
</a>
<span
className={`rating color-${
this.props.mediaData.imdb_data.rating.ratingValue >
7.9
? "green"
: this.props.mediaData.imdb_data.rating
.ratingValue > 6.9
? "blue"
: this.props.mediaData.imdb_data.rating
.ratingValue > 4.9
? "orange"
: "red"
}`}
>
{this.props.mediaData.imdb_data.rating.ratingValue}
</span>
</p>
</>
) : null}
<div className="detail--bar--sep">·</div>
<p>
<span
className="desktop-only"
style={{ cursor: "help" }}
title="Petio reviews are a combination of Petio users on this server and external user reviews."
>
Petio:{" "}
</span>
<span
className={`rating d-nm color-${
userRatingVal > 79
? "green"
: userRatingVal > 69
? "blue"
: userRatingVal > 49
? "orange"
: "red"
}`}
>
{userRating}
</span>
</p>
{this.props.mediaData.original_language_format ? (
<>
<div className="detail--bar--sep">·</div>
<p>
<span className="desktop-only">Language: </span>
<span className="item-val">
{this.props.mediaData.original_language_format}
</span>
</p>
</>
) : null}
{this.props.mediaData.age_rating ? (
<>
<div className="detail--bar--sep">·</div>
<p>
<span className="desktop-only">Rated </span>
<span className="item-val">
{this.props.mediaData.age_rating}
</span>
</p>
</>
) : null}
</div>
<div className="genre--wrap">
{this.props.mediaData.genres.map((genre) => {
return (
<Link
to={`/genre/${
this.props.mediaData.seasons ? "tv" : "movie"
}/${genre.id}`}
key={`genre_${genre.name}`}
className="genre--item"
>
{this.genreIcon(genre.name)}
{genre.name}
</Link>
);
})}
{Object.keys(this.props.mediaData.keywords.results).length > 0
? this.props.mediaData.keywords.results.map((genre) => {
let customGenres = [210024];
if (customGenres.includes(genre.id))
return (
<Link
to={`/genre/${
this.props.mediaData.seasons ? "tv" : "movie"
}/${genre.id}`}
key={`genre_${genre.name}`}
className="genre--item"
style={{ textTransform: "capitalize" }}
>
{this.genreIcon(genre.name)}
{genre.name}
</Link>
);
})
: null}
</div>
<div className="media--actions__mob">
{requestBtn}
{reportBtn}
{reviewBtn}
{trailerBtn}
</div>
<div className="companies--wrap">
{this.props.mediaData.production_companies
? this.props.mediaData.production_companies.length > 0
? this.props.mediaData.production_companies.map((co) => {
if (!co.logo_path) return;
return (
<div className="companies--item" key={`co__${co.id}`}>
<Link to={`/company/${co.id}`} title={co.name}>
<img
src={`https://image.tmdb.org/t/p/w185_filter(duotone,ffffff,868c96)${co.logo_path}`}
/>
</Link>
</div>
);
})
: null
: null}
</div>
<div className="networks--wrap">
{this.props.mediaData.networks
? this.props.mediaData.networks.length > 0
? this.props.mediaData.networks.map((network) => {
if (!network.logo_path) return;
return (
<div
className="networks--item"
key={`net__${network.id}`}
>
<Link
to={`/networks/${network.id}`}
title={network.name}
>
<img
src={`https://image.tmdb.org/t/p/w185_filter(duotone,ffffff,868c96)${network.logo_path}`}
/>
</Link>
</div>
);
})
: null
: null}
</div>
<div className="media-crew">
{this.props.mediaData.created_by
? this.props.mediaData.created_by.map((creator) => {
return (
<div
key={`cb__${creator.id}`}
className="media-crew--item"
>
<p className="sub-title">Created By</p>
<Link
to={`/person/${creator.id}`}
className="crew-credit"
>
{creator.name}
</Link>
</div>
);
})
: null}
{director ? (
<div className="media-crew--item">
<p className="sub-title">Director</p>
<Link to={`/person/${director.id}`} className="crew-credit">
{director.name}
</Link>
</div>
) : null}
{screenplay ? (
<div className="media-crew--item">
<p className="sub-title">Screenplay</p>
<Link
to={`/person/${screenplay.id}`}
className="crew-credit"
>
{screenplay.name}
</Link>
</div>
) : null}
</div>
<p className="sub-title mb--1">Synopsis</p>
<p className="overview">{this.props.mediaData.overview}</p>
</div>
</div>
</div>
</section>
);
}
Example #10
| Source File: Season.js From petio with MIT License | 4 votes |
|
render() {
let id = this.props.match.params.id;
let season = this.props.match.params.season;
let seriesData = Object.assign({}, this.props.api.series_lookup[id]);
let seasonData = this.props.api.series_lookup[id]
? this.props.api.series_lookup[id].seasonData[season]
: false;
let onServer = false;
let seasonNumber = false;
if (seriesData) {
seasonNumber = seasonData.season_number;
seriesData.poster_path =
seasonData && seasonData.poster_path
? seasonData.poster_path
: seriesData.poster_path;
onServer =
seriesData.server_seasons && seriesData.server_seasons[seasonNumber]
? seriesData.server_seasons[seasonNumber]
: false;
}
let now = new Date();
now.setHours(0, 0, 0, 0);
if (!seriesData || !seasonData) {
return (
<div className="page-wrap">
<div className="spinner">
<Spinner />
</div>
</div>
);
} else {
let requestBtn = this.props.requestPending ? (
<button className="btn btn__square pending">
<Spinner />
Request
</button>
) : onServer ? (
isIOS ? (
<a
href={`plex://preplay/?metadataKey=%2Flibrary%2Fmetadata%2F${seriesData.on_server.ratingKey}&metadataType=1&server=${seriesData.on_server.serverKey}`}
target="_blank"
rel="noreferrer"
className="btn btn__square good"
>
<CheckIcon />
Watch now
</a>
) : (
<a
href={`https://app.plex.tv/desktop#!/server/${seriesData.on_server.serverKey}/details?key=%2Flibrary%2Fmetadata%2F${seriesData.on_server.ratingKey}`}
target="_blank"
rel="noreferrer"
className="btn btn__square good"
>
<CheckIcon />
Watch now
</a>
)
) : this.state.requested ? (
<button className="btn btn__square blue" onClick={this.props.request}>
{`Requested by ${this.state.requested}
${this.state.requested > 1 ? "users" : "user"}`}
</button>
) : (
<button className="btn btn__square" onClick={this.request}>
<RequestIcon />
Request season {seasonNumber}
</button>
);
return (
<div
className="media-wrap"
data-id={seriesData.imdb_id}
key={`${seriesData.title}__wrap`}
>
<Review
id={this.props.match.params.id}
user={this.props.user.current}
active={this.state.reviewOpen}
closeReview={this.closeReview}
getReviews={this.getReviews}
item={seriesData}
/>
<MovieShowTop
mediaData={seriesData}
season={seasonNumber}
trailer={this.state.trailer}
requested={this.state.requested}
request={this.request}
openIssues={this.props.openIssues}
/>
<div className="media-content">
<section>
<div className="quick-view">
<div className="side-content">
<div className="media-action">
<Link to={`/series/${id}`} className="btn btn__square">
<BackIcon />
Back to show
</Link>
</div>
</div>
<div className="detail--wrap">
<div className="detail--content">
<div className="media--actions__mob">
<Link to={`/series/${id}`} className="btn btn__square">
<BackIcon />
Back to show
</Link>
{requestBtn}
</div>
<div className="detail--bar">
<p>
{seasonData.air_date
? new Date(seasonData.air_date).getFullYear()
: "Unknown"}
</p>
<div className="detail--bar--sep">·</div>
<p>{seasonData.name}</p>
</div>
<p className="sub-title mb--1">Overview</p>
<p className="overview">
{seasonData.overview
? seasonData.overview
: seriesData.overview}
</p>
</div>
</div>
</div>
</section>
<section>
<h3 className="sub-title mb--1">{`${seasonData.episodes.length} Episodes`}</h3>
<div className="season-episodes">
{seasonData.episodes.map((episode) => {
let airDate = episode.air_date
? Date.parse(episode.air_date)
: false;
let epOnServer =
onServer &&
onServer.episodes &&
onServer.episodes[episode.episode_number]
? onServer.episodes[episode.episode_number]
: false;
return (
<div
key={`ep__s${episode.season_number}e${episode.episode_number}`}
className={`season-episode ${
airDate < now ? "aired" : "not-aired"
} ${epOnServer ? "on-server" : ""}`}
>
<div className="season-episode--img">
<img
src={`https://image.tmdb.org/t/p/w500${
episode.still_path
? episode.still_path
: seriesData.poster_path
}`}
/>
</div>
<div className="season-episode--info">
<p className="upper small ep-num">
Season {episode.season_number}: Episode{" "}
{episode.episode_number} - {this.daysTillAir(airDate)}
</p>
<h4 className="sub-title">{episode.name}</h4>
<p className="small detail">{episode.overview}</p>
</div>
</div>
);
})}
</div>
</section>
</div>
</div>
);
}
}
