Skip to content

Disco video #443

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
May 25, 2016
Merged

Disco video #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
73326c5
Disco video (fixes #314)
mstriemer May 24, 2016
1b53253
Update video loader
mstriemer May 24, 2016
dde420f
Update border radius and video dimensions
mstriemer May 24, 2016
17a2aaa
Fix the tests
mstriemer May 24, 2016
c514e48
Get coverage to 100%
mstriemer May 24, 2016
33fbff1
Update CSS classes
mstriemer May 25, 2016
f281089
Move arrow into CSS
mstriemer May 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,15 @@ const newWebpackConfig = Object.assign({}, webpackConfigProd, {
}, {
test: /\.svg$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.jpg$/,
loader: 'url?limit=10000&mimetype=image/jpeg',
}, {
test: /\.webm$/,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think for the videos you could use the file-loader directly since these should never be inlined. The url-loader hands-off to the file-loader if the size is over the limit param.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we had a small video wouldn't we want it inlined though? I feel like the benefits would be the same as for images. I doubt we'll have a video that small but none the less.

loader: 'url?limit=10000&mimetype=video/webm',
}, {
test: /\.mp4$/,
loader: 'url?limit=10000&mimetype=video/mp4',
}],
},
output: undefined,
Expand Down
57 changes: 45 additions & 12 deletions src/disco/containers/DiscoPane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,62 @@ import { gettext as _, camelCaseProps } from 'core/utils';

import Addon from 'disco/components/Addon';

import videoPoster from 'disco/img/AddOnsPoster.jpg';
import videoMp4 from 'disco/video/AddOns.mp4';
import videoWebm from 'disco/video/AddOns.webm';


class DiscoPane extends React.Component {
static propTypes = {
results: PropTypes.arrayOf(PropTypes.object),
}

constructor() {
super();
this.state = {showVideo: false};
}

showVideo = (e) => {
e.preventDefault();
this.setState({showVideo: true});
this.refs.video.play();
}

closeVideo = (e) => {
e.preventDefault();
this.setState({showVideo: false});
this.refs.video.pause();
}

render() {
const { results } = this.props;
const { showVideo } = this.state;

return (
<div id="app-view" ref="container">
<header>
<div className="content">
<h1>{_('Personalize Your Firefox')}</h1>
<p>{_(dedent`There are thousands of add-ons that let you make Firefox all your
own—everything from fun visual themes to powerful tools and features.
Here are a few great ones to check out.`)}</p>
<header className={showVideo ? 'show-video' : ''}>
<div className="disco-header">
<div className="disco-content">
<h1>{_('Personalize Your Firefox')}</h1>
<p>{_(dedent`There are thousands of add-ons that let you make Firefox all your
own—everything from fun visual themes to powerful tools and features.
Here are a few great ones to check out.`)}</p>
</div>
<div className="video-wrapper">
<a className="play-video" href="#play" onClick={this.showVideo}>
<span className="play-video-text">{_('Click to play')}</span>
<span className="visually-hidden">{_('to find out more about add-ons')}</span>
</a>
<video poster={videoPoster} controls={showVideo} width="512" height="288"
className="disco-video" ref="video">
<source src={videoWebm} type="video/webm" />
<source src={videoMp4} type="video/mp4" />
</video>
<div className="close-video">
<a href="#close" onClick={this.closeVideo}>{_('Close video')}</a>
</div>
</div>
</div>
<a href="#" className="play-video">
<p>
<span>{_('Click to play')}</span>
<span className="visually-hidden">{_('to find out more about add-ons')}</span>
</p>
</a>
</header>
{results.map((item, i) => <Addon {...camelCaseProps(item)} key={i} />)}
</div>
Expand Down
123 changes: 94 additions & 29 deletions src/disco/css/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,16 @@ img {

.disco-pane {
box-sizing: content-box;
padding: 50px 20px;
margin: 0 auto;
max-width: 680px;
padding: 50px 20px;
}

header {
display: flex;
border-bottom: 1px solid $header-border-color;
flex-direction: row;
margin-bottom: 40px;
padding-bottom: 40px;

.content {
flex-grow: 1;
}

h1 {
color: $primary-font-color;
display: block;
Expand All @@ -47,38 +41,109 @@ header {
line-height: 1.5;
margin: 0 0 20px;
}
}

p {
color: $header-copy-font-color;
font-size: 14px;
line-height: 1.28;
}
.disco-content {
color: $header-copy-font-color;
font-size: 14px;
line-height: 1.28;
margin-right: 50px;
width: 415px;

p:last-child {
&:last-child {
display: block;
margin-bottom: 0;
}
}

.play-video {
background: #ccc;
.disco-header,
.disco-content,
.disco-video {
transition: 300ms;
}

.disco-header {
display: flex;
width: 100%;

.disco-video {
border-radius: 5px;
height: 120px;
width: 215px;
}
}

.show-video {
padding-bottom: 0;

.disco-header {
transform: translateX(-465px);
width: 1145px;
}
.disco-content {
opacity: 0;
visibility: hidden;
}

.disco-video {
margin: 0 84px;
height: 288px;
width: 512px;
}

.play-video {
display: none;
}

.close-video {
display: block;
flex-grow: 0;
margin-left: 50px;
min-height: 120px;
min-width: 215px;
}
}

&:hover {
color: #fff;
background: #666;
}
.video-wrapper {
position: relative;
}

p {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin-top: 0;
.play-video {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-decoration: none;
top: 0;
}

.play-video-text {
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: inline-block;
padding: 10px;
transition: background 300ms;

&::before {
content: "\25BA ";
}
}

.play-video:hover .play-video-text {
background: rgba(0, 0, 0, 0.3);
}

.close-video {
display: none;
text-align: center;

a {
color: #0996F8;
height: 40px;
line-height: 40px;
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}
Binary file added src/disco/img/AddOnsPoster.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/disco/video/AddOns.mp4
View file
Open in desktop
Binary file not shown.
Binary file added src/disco/video/AddOns.webm
View file
Open in desktop
Binary file not shown.
26 changes: 20 additions & 6 deletions tests/client/disco/containers/TestDiscoPane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { renderIntoDocument } from 'react-addons-test-utils';
import { Simulate, renderIntoDocument } from 'react-addons-test-utils';
import { findDOMNode } from 'react-dom';
import { Provider } from 'react-redux';
import createStore from 'disco/store';
Expand All @@ -11,11 +11,10 @@ describe('AddonPage', () => {
stubAddonManager();
});

function render({props, state}) {
const store = createStore(state);
function render() {
return findDOMNode(renderIntoDocument(
<Provider store={store} key="provider">
<DiscoPane {...props} />
<Provider store={createStore()} key="provider">
<DiscoPane />
</Provider>
));
}
Expand All @@ -24,11 +23,26 @@ describe('AddonPage', () => {
let root;

beforeEach(() => {
root = render({state: {}, props: {}});
root = render();
});

it('renders an addon', () => {
assert.ok(root.querySelector('.addon'));
});
});

describe('video', () => {
it('is small by default', () => {
const root = render();
assert.notOk(root.querySelector('.show-video'));
});

it('gets bigger and smaller when clicked', () => {
const root = render();
Simulate.click(root.querySelector('.play-video'));
assert.ok(root.querySelector('.show-video'));
Simulate.click(root.querySelector('.close-video a'));
assert.notOk(root.querySelector('.show-video'));
});
});
});
7 changes: 7 additions & 0 deletions webpack-isomorphic-tools-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,5 +60,12 @@ module.exports = {
}
},
},
videos: {
extensions: [
'mp4',
'webm',
],
parser: WebpackIsomorphicToolsPlugin.url_loader_parser,
},
},
};
9 changes: 9 additions & 0 deletions webpack.dev.config.babel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,15 @@ export default Object.assign({}, webpackConfig, {
}, {
test: /\.svg$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.jpg$/,
loader: 'url?limit=10000&mimetype=image/jpeg',
}, {
test: /\.webm$/,
loader: 'url?limit=10000&mimetype=video/webm',
}, {
test: /\.mp4$/,
loader: 'url?limit=10000&mimetype=video/mp4',
}],
},
plugins: [
Expand Down
9 changes: 9 additions & 0 deletions webpack.prod.config.babel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,15 @@ export default {
}, {
test: /\.svg$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.jpg$/,
loader: 'url?limit=10000&mimetype=image/jpeg',
}, {
test: /\.webm$/,
loader: 'url?limit=10000&mimetype=video/webm',
}, {
test: /\.mp4$/,
loader: 'url?limit=10000&mimetype=video/mp4',
},
],
},
Expand Down