convert external-video-player modal component
This commit is contained in:
Ramón Souza
parent
c5c28c3aa8
commit
0eea1e7cea
@ -1,12 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import { withModalMounter } from '/imports/ui/components/modal/service';
|
||||
import Modal from '/imports/ui/components/modal/simple/component';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { isUrlValid } from '../service';
|
||||
|
||||
import { styles } from './styles';
|
||||
import Settings from '/imports/ui/services/settings';
|
||||
import Styled from './styles';
|
||||
|
||||
const intlMessages = defineMessages({
|
||||
start: {
|
||||
@ -75,15 +72,16 @@ class ExternalVideoModal extends Component {
|
||||
renderUrlError() {
|
||||
const { intl } = this.props;
|
||||
const { url } = this.state;
|
||||
const { animations } = Settings.application;
|
||||
|
||||
const valid = (!url || url.length <= 3) || isUrlValid(url);
|
||||
|
||||
return (
|
||||
!valid
|
||||
? (
|
||||
<div className={styles.urlError}>
|
||||
<Styled.UrlError animations={animations}>
|
||||
{intl.formatMessage(intlMessages.urlError)}
|
||||
</div>
|
||||
</Styled.UrlError>
|
||||
)
|
||||
: null
|
||||
);
|
||||
@ -92,23 +90,22 @@ class ExternalVideoModal extends Component {
|
||||
render() {
|
||||
const { intl, closeModal } = this.props;
|
||||
const { url, sharing } = this.state;
|
||||
const { animations } = Settings.application;
|
||||
|
||||
const startDisabled = !isUrlValid(url);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
overlayClassName={styles.overlay}
|
||||
className={styles.modal}
|
||||
<Styled.ExternalVideoModal
|
||||
onRequestClose={closeModal}
|
||||
contentLabel={intl.formatMessage(intlMessages.title)}
|
||||
hideBorder
|
||||
>
|
||||
<header data-test="videoModalHeader" className={styles.header}>
|
||||
<h3 className={styles.title}>{intl.formatMessage(intlMessages.title)}</h3>
|
||||
</header>
|
||||
<Styled.Header data-test="videoModalHeader">
|
||||
<Styled.Title>{intl.formatMessage(intlMessages.title)}</Styled.Title>
|
||||
</Styled.Header>
|
||||
|
||||
<div className={styles.content}>
|
||||
<div className={styles.videoUrl}>
|
||||
<Styled.Content>
|
||||
<Styled.VideoUrl animations={animations}>
|
||||
<label htmlFor="video-modal-input">
|
||||
{intl.formatMessage(intlMessages.input)}
|
||||
<input
|
||||
@ -120,23 +117,22 @@ class ExternalVideoModal extends Component {
|
||||
aria-describedby="exernal-video-note"
|
||||
/>
|
||||
</label>
|
||||
<div className={styles.externalVideoNote} id="external-video-note">
|
||||
<Styled.ExternalVideoNote id="external-video-note">
|
||||
{intl.formatMessage(intlMessages.note)}
|
||||
</div>
|
||||
</div>
|
||||
</Styled.ExternalVideoNote>
|
||||
</Styled.VideoUrl>
|
||||
|
||||
<div>
|
||||
{this.renderUrlError()}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className={styles.startBtn}
|
||||
<Styled.StartButton
|
||||
label={intl.formatMessage(intlMessages.start)}
|
||||
onClick={this.startWatchingHandler}
|
||||
disabled={startDisabled}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</Styled.Content>
|
||||
</Styled.ExternalVideoModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,136 @@
|
||||
import styled from 'styled-components';
|
||||
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
|
||||
import {
|
||||
borderSize,
|
||||
borderRadius,
|
||||
smPaddingY,
|
||||
} from '/imports/ui/stylesheets/styled-components/general';
|
||||
import {
|
||||
colorText,
|
||||
colorGrayLighter,
|
||||
colorGray,
|
||||
colorWhite,
|
||||
colorLink,
|
||||
colorBlueLight,
|
||||
colorPrimary,
|
||||
} from '/imports/ui/stylesheets/styled-components/palette';
|
||||
import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
|
||||
import Modal from '/imports/ui/components/modal/simple/component';
|
||||
import Button from '/imports/ui/components/button/component';
|
||||
|
||||
const UrlError = styled.div`
|
||||
color: red;
|
||||
padding: 1em 0 2.5em 0;
|
||||
|
||||
${({ animations }) => animations && `
|
||||
transition: 1s;
|
||||
`}
|
||||
`;
|
||||
|
||||
const ExternalVideoModal = styled(Modal)`
|
||||
padding: 1.5rem;
|
||||
min-height: 23rem;
|
||||
`;
|
||||
|
||||
const Header = styled.header`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 2rem;
|
||||
`;
|
||||
|
||||
const Title = styled.h3`
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem;
|
||||
white-space: normal;
|
||||
|
||||
@media ${smallOnly} {
|
||||
font-size: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const VideoUrl = styled.div`
|
||||
margin: 0 ${borderSize} 0 ${borderSize};
|
||||
|
||||
& > label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > label input {
|
||||
display: block;
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 0.4em;
|
||||
color: ${colorText};
|
||||
line-height: 2rem;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
border: 1px solid ${colorGrayLighter};
|
||||
border-radius: ${borderRadius};
|
||||
|
||||
${({ animations }) => animations && `
|
||||
transition: box-shadow .2s;
|
||||
`}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-radius: ${borderSize};
|
||||
box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
`;
|
||||
|
||||
const ExternalVideoNote = styled.div`
|
||||
color: ${colorGray};
|
||||
font-size: ${fontSizeSmall};
|
||||
font-style: italic;
|
||||
padding-top: ${smPaddingY};
|
||||
`;
|
||||
|
||||
const StartButton = styled(Button)`
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
& > i {
|
||||
color: #3c5764;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
width: 40%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
color: ${colorWhite} !important;
|
||||
background-color: ${colorLink} !important;
|
||||
`;
|
||||
|
||||
export default {
|
||||
UrlError,
|
||||
ExternalVideoModal,
|
||||
Header,
|
||||
Title,
|
||||
Content,
|
||||
VideoUrl,
|
||||
ExternalVideoNote,
|
||||
StartButton,
|
||||
};
|
||||
@ -1,147 +0,0 @@
|
||||
@import "/imports/ui/stylesheets/variables/breakpoints";
|
||||
@import "/imports/ui/components/modal/simple/styles";
|
||||
@import "/imports/ui/stylesheets/mixins/focus";
|
||||
|
||||
.header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.videoOptions {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
@extend .overlay;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@extend .modal;
|
||||
padding: 1.5rem;
|
||||
min-height: 23rem;
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
position: relative;
|
||||
background-color: var(--color-white);
|
||||
|
||||
i {
|
||||
color: var(--color-gray-light);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
background-color: var(--color-gray-lighter);
|
||||
i{
|
||||
color: var(--color-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
.warning{
|
||||
text-align: center;
|
||||
font-weight: var(--headings-font-weight);
|
||||
font-size: 5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
.text{
|
||||
margin: var(--line-height-computed);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: var(--line-height-computed);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
.startBtn {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
i{
|
||||
color: #3c5764;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
width: 40%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
color: var(--color-white) !important;
|
||||
background-color: var(--color-link) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 1.3rem;
|
||||
white-space: normal;
|
||||
|
||||
@include mq(var(--small-only)) {
|
||||
font-size: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.videoUrl {
|
||||
margin: 0 var(--border-size) 0 var(--border-size);
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
@include inputFocus(var(--color-blue-light));
|
||||
display: block;
|
||||
margin: 10px 0 10px 0;
|
||||
padding: 0.4em;
|
||||
color: var(--color-text);
|
||||
line-height: 2rem;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
border: 1px solid var(--color-gray-lighter);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
:global(.animationsEnabled) & {
|
||||
transition: box-shadow .2s;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.urlError {
|
||||
color: red;
|
||||
padding: 1em 0 2.5em 0;
|
||||
|
||||
:global(.animationsEnabled) & {
|
||||
transition: 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.externalVideoNote {
|
||||
color: var(--color-gray);
|
||||
font-size: var(--font-size-small);
|
||||
font-style: italic;
|
||||
padding-top: var(--sm-padding-y);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user