-
Notifications
You must be signed in to change notification settings - Fork 90
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Add video tag support for context #87
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,6 +7,7 @@ import styles from './test.css'; | |
|
||
const cx = classNames.bind(styles); | ||
|
||
const videoRegEx = /(?:mp4|webm)$/i; | ||
const imgRegEx = /(?:png|jpe?g|gif)$/i; | ||
const protocolRegEx = /^(?:(?:https?|ftp):\/\/)/i; | ||
const urlRegEx = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/ // eslint-disable-line | ||
|
@@ -24,6 +25,19 @@ class TestContext extends Component { | |
]) | ||
}; | ||
|
||
renderVideo = (ctx, title) => { | ||
const isUrl = urlRegEx.test(ctx); | ||
const hasProtocol = protocolRegEx.test(ctx); | ||
const linkUrl = (isUrl && !hasProtocol) ? `http://${ctx}` : ctx; | ||
|
||
return ( | ||
<video controls src={ linkUrl } className={ cx('video') }> | ||
<track kind='captions' /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The accessibility checker flags video tags without captions even though there is caption source file. I didn't know what would be better - disabling the lint rule or fooling it. Either way there are no captions. |
||
{title} | ||
</video> | ||
); | ||
} | ||
|
||
renderImage = (ctx, title) => { | ||
const isUrl = urlRegEx.test(ctx); | ||
const hasProtocol = protocolRegEx.test(ctx); | ||
|
@@ -56,6 +70,11 @@ class TestContext extends Component { | |
} | ||
|
||
renderContextContent = (content, title, highlight = false) => { | ||
// Videos | ||
if (videoRegEx.test(content)) { | ||
return this.renderVideo(content, title); | ||
} | ||
|
||
// Images | ||
if (imgRegEx.test(content)) { | ||
return this.renderImage(content, title); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -264,3 +264,9 @@ | |
max-width: 100%; | ||
height: auto; | ||
} | ||
|
||
.video { | ||
display: block; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as img CSS. Makes the video scale responsively like the image tag does. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should be combined with the |
||
max-width: 100%; | ||
height: auto; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More extensions could be added here. These are common and non-ambiguous.