This repository has been archived by the owner on Feb 29, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(content): show inline video players for youtube and vimeo
- Loading branch information
Showing
9 changed files
with
173 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
const React = require("react"); | ||
const classNames = require("classnames"); | ||
|
||
const MediaPreview = React.createClass({ | ||
getInitialState() { | ||
return { | ||
showPlayer: false | ||
}; | ||
}, | ||
|
||
getDefaultProps() { | ||
return { | ||
site: {}, | ||
height: null, | ||
width: null, | ||
type: "", | ||
thumbnail: null, | ||
previewURL: null | ||
}; | ||
}, | ||
|
||
onPreviewClick(evt) { | ||
evt.preventDefault(); | ||
this.setState({showPlayer: true}); | ||
}, | ||
|
||
render() { | ||
const site = this.props.site; | ||
|
||
let player; | ||
if (this.state.showPlayer) { | ||
player = (<iframe className="video-preview-player" width="525" height="295" type="text/html" src={site.previewURL} frameborder="0" allowFullScreen></iframe>); | ||
} | ||
|
||
const style = {backgroundImage: `url(${site.thumbnail.url})`}; | ||
return (<div className={classNames("video-preview", {isPlaying: this.state.showPlayer})} | ||
style={style} onClick={this.onPreviewClick}> | ||
{player} | ||
</div>); | ||
} | ||
}); | ||
|
||
module.exports = MediaPreview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
.video-preview { | ||
position: relative; | ||
background: $black no-repeat center center; | ||
width: 525px; | ||
height: 295px; | ||
opacity: 0.9; | ||
transition: 0.2s opacity; | ||
box-shadow: 0 2px 2px $faint-black; | ||
overflow: hidden; | ||
} | ||
|
||
.video-preview:hover { | ||
opacity: 1; | ||
} | ||
|
||
.video-preview::after { | ||
content: ''; | ||
width: 80px; | ||
height: 80px; | ||
background: url('img/glyph-play.svg') no-repeat center center; | ||
display: block; | ||
left: 50%; | ||
top: 50%; | ||
position: absolute; | ||
margin-left: -25px; | ||
margin-top: -25px; | ||
transition: 0.2s opacity; | ||
} | ||
|
||
.video-preview:hover::after { | ||
opacity: 0.8; | ||
} | ||
|
||
.video-preview.isPlaying::after { | ||
display: none; | ||
} | ||
|
||
.video-preview-player { | ||
width: 100%; | ||
height: 100%; | ||
display: block; | ||
border: 0; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
module.exports = function getVideoPreview(site) { | ||
switch (site.provider_url) { | ||
case "https://www.youtube.com/": | ||
return getVideoURL.youtube(site); | ||
case "https://vimeo.com/": | ||
return getVideoURL.vimeo(site); | ||
default: | ||
return null; | ||
} | ||
|
||
}; | ||
|
||
const getVideoURL = { | ||
youtube: function(site) { | ||
const youtubeIdSearch = /(v=|embed\/)([\w-]{11})\??/; | ||
let idMatches = site.url.match(youtubeIdSearch); | ||
if (!idMatches || idMatches.length < 3) { | ||
return null; | ||
} | ||
let videoId = idMatches[2]; | ||
|
||
return `https://www.youtube.com/embed/${videoId}?autoplay=1`; | ||
}, | ||
|
||
vimeo: function(site) { | ||
const vimeoIdSearch = /\/([0-9]+)/; | ||
let idMatches = site.url.match(vimeoIdSearch); | ||
if (!idMatches || idMatches.length < 2) { | ||
return null; | ||
} | ||
let videoId = idMatches[1]; | ||
|
||
return `https://player.vimeo.com/video/${videoId}?autoplay=1`; | ||
} | ||
}; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.