Skip to content

Commit 866d8a6

Browse files
mshickmshick
committed
now multi mode is an option
1 parent be51164 commit 866d8a6

9 files changed

+321
-22
lines changed

‎dist/react-drive-in-multi.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.drive-in-wrap {
2+
overflow: hidden;
3+
position: absolute;
4+
height: 100%;
5+
width: 100%;
6+
top: 0;
7+
left: 0;
8+
z-index: -10000;
9+
}
10+
.drive-in-media {
11+
position: absolute;
12+
}
13+
.drive-in-media video,
14+
.drive-in-media img {
15+
-webkit-transition: opacity 0.5s ease-in-out;
16+
transition: opacity 0.5s ease-in-out;
17+
position: relative;
18+
}

‎dist/react-drive-in.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
#drive-in-wrap {
1+
html,
2+
body {
3+
height: 100%;
4+
}
5+
.drive-in-wrap {
26
overflow: hidden;
37
position: fixed;
48
height: 100%;

‎dist/react-drive-in.js

+18-17
Original file line numberDiff line numberDiff line change
@@ -539,22 +539,22 @@ var DriveIn = (function (_Jvent) {
539539
},
540540
_prepareContainer: {
541541
value: function _prepareContainer() {
542-
var containerH = getHeight();
543-
544-
if (document.body.offsetHeight < containerH) {
545-
setStyles(document.body, {
546-
height: "auto"
547-
});
548-
549-
if (containerH > document.body.offsetHeight) {
550-
setStyles(document.body, {
551-
height: "100%"
552-
});
553-
setStyles(document.documentElement, {
554-
height: "100%"
555-
});
556-
}
557-
}
542+
// var containerH = getHeight();
543+
544+
// if (document.body.offsetHeight < containerH) {
545+
// setStyles(document.body, {
546+
// height: "auto"
547+
// });
548+
549+
// if (containerH > document.body.offsetHeight) {
550+
// setStyles(document.body, {
551+
// height: "100%"
552+
// });
553+
// setStyles(document.documentElement, {
554+
// height: "100%"
555+
// });
556+
// }
557+
// }
558558
}
559559
},
560560
init: {
@@ -731,6 +731,7 @@ var DriveIn = (function (_Jvent) {
731731
})(Jvent);
732732

733733
module.exports = DriveIn;
734+
734735
},{"./playlist":3,"./timer":4,"./utils":5,"jvent":6}],3:[function(require,module,exports){
735736
"use strict";
736737

@@ -1339,7 +1340,7 @@ var ReactDriveIn = (function (_React$Component) {
13391340
value: function render() {
13401341
return _react2['default'].createElement(
13411342
'div',
1342-
{ ref: 'wrap', id: 'drive-in-wrap', className: this.props.className },
1343+
{ ref: 'wrap', className: this.props.className + ' drive-in-wrap' },
13431344
_react2['default'].createElement('div', { ref: 'media', className: 'drive-in-media' })
13441345
);
13451346
}

‎example/custom.css

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/* Shared
2+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
3+
.button {
4+
border-radius: 100px;
5+
}
6+
7+
/* Sections
8+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
9+
.section {
10+
position: relative;
11+
padding: 8rem 0 7rem;
12+
text-align: center;
13+
}
14+
.section-heading,
15+
.section-description {
16+
margin-bottom: 1.2rem;
17+
}
18+
19+
/* Hero
20+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
21+
.phones {
22+
position: relative;
23+
}
24+
.phone {
25+
position: relative;
26+
max-width: 80%;
27+
margin: 3rem auto -12rem;
28+
}
29+
.phone + .phone {
30+
display: none;
31+
}
32+
33+
/* Values
34+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
35+
.values {
36+
color: #fff;
37+
padding-bottom: 5rem;
38+
}
39+
.value-multiplier {
40+
margin-bottom: .5rem;
41+
color: #11DFC7;
42+
}
43+
.value-heading {
44+
margin-bottom: .3rem;
45+
}
46+
.value-description {
47+
opacity: .8;
48+
font-weight: 300;
49+
}
50+
51+
/* Help
52+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
53+
.get-help {
54+
border-bottom: 1px solid #ddd;
55+
}
56+
57+
/* Categories
58+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
59+
.categories {
60+
color: #fff;
61+
}
62+
.categories .section-description {
63+
margin-bottom: 4rem;
64+
}
65+
66+
/* Bigger than 550 */
67+
@media (min-width: 550px) {
68+
.section {
69+
padding: 12rem 0 11rem;
70+
}
71+
.hero {
72+
padding-bottom: 12rem;
73+
text-align: left;
74+
height: 165px;
75+
}
76+
.phone {
77+
position: absolute;
78+
top: -7rem;
79+
right: 3rem;
80+
max-height: 362px;
81+
z-index: 3;
82+
}
83+
.phone + .phone {
84+
top: -6rem;
85+
display: block;
86+
max-width: 73.8%;
87+
right: 0;
88+
z-index: 2;
89+
max-height: 338px;
90+
}
91+
.hero-heading {
92+
font-size: 2.4rem;
93+
}
94+
}
95+
96+
/* Bigger than 750 */
97+
@media (min-width: 750px) {
98+
.hero {
99+
height: 190px;
100+
}
101+
.hero-heading {
102+
font-size: 2.6rem;
103+
}
104+
.section {
105+
padding: 14rem 0 15rem;
106+
}
107+
.hero {
108+
padding: 16rem 0 14rem;
109+
}
110+
.section-description {
111+
max-width: 60%;
112+
margin-left: auto;
113+
margin-right: auto;
114+
}
115+
.phone {
116+
top: -14rem;
117+
right: 5rem;
118+
max-height: 510px;
119+
}
120+
.phone + .phone {
121+
top: -12rem;
122+
max-height: 472px;
123+
}
124+
.categories {
125+
padding: 15rem 0 8rem;
126+
}
127+
}
128+
129+
/* Bigger than 1000 */
130+
@media (min-width: 1000px) {
131+
.section {
132+
padding: 20rem 0 19rem;
133+
}
134+
.hero {
135+
padding: 22rem 0;
136+
}
137+
.hero-heading {
138+
font-size: 3.0rem;
139+
}
140+
.phone {
141+
top: -16rem;
142+
max-height: 615px;
143+
}
144+
.phone + .phone {
145+
top: -14rem;
146+
max-height: 570px;
147+
}
148+
}

‎example/multi.html

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Multi-Instance | React Drive-In</title>
7+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" />
8+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
9+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway:400,300,600" />
10+
<link rel="stylesheet" type="text/css" href="/react-drive-in-multi.css" />
11+
<link rel="stylesheet" type="text/css" href="/custom.css" />
12+
</head>
13+
<body>
14+
15+
<div class="section hero">
16+
<div class="container">
17+
<div class="row">
18+
<div class="one-half column">
19+
<h4 class="hero-heading">Using multiple instances of Drive-In is easy!</h4>
20+
<p>I was able to adapt it to this Skeleton demo in no time.</p>
21+
<a class="button button-primary" href="http://getskeleton.com">Try Skeleton</a>
22+
</div>
23+
<div class="one-half column phones">
24+
<img class="phone" src="https://raw.githubusercontent.com/dhg/Skeleton/gh-pages/examples/landing/images/iphone.png?raw=true">
25+
<img class="phone" src="https://raw.githubusercontent.com/dhg/Skeleton/gh-pages/examples/landing/images/iphone.png?raw=true">
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<div class="section values">
32+
<div id="video1"></div>
33+
<div class="container">
34+
<div class="row">
35+
<div class="one-third column value">
36+
<h2 class="value-multiplier">90%</h2>
37+
<h5 class="value-heading">Ride Bikes</h5>
38+
<p class="value-description">Right! I wish...</p>
39+
</div>
40+
<div class="one-third column value">
41+
<h2 class="value-multiplier">10%</h2>
42+
<h5 class="value-heading">Watch Game of Thrones</h5>
43+
<p class="value-description">R + L = J. No doubt about it.</p>
44+
</div>
45+
<div class="one-third column value">
46+
<h2 class="value-multiplier">99%</h2>
47+
<h5 class="value-heading">Have No Idea What That Last Stat Means</h5>
48+
<p class="value-description">Good for them, they aren't wasting their time.</p>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<div class="section get-help">
55+
<div class="container">
56+
<h3 class="section-heading">Don't forget to use the -multi css file!</h3>
57+
<p class="section-description">The difference between filling up your background or keeping Drive-In contained is just a few small styles.</p>
58+
<a class="button button-primary" href="https://github.com/ronik-design/react-drive-in/blob/master/dist/react-drive-in-multi.css">View Multi CSS</a>
59+
</div>
60+
</div>
61+
62+
<div class="section categories">
63+
<div id="video2"></div>
64+
<div class="container">
65+
<h3 class="section-heading">Use Drive-In. It's Wicked Awesome</h3>
66+
<p class="section-description">And I'm not even from Boston.</p>
67+
<div class="row">
68+
<div class="one-half column category">
69+
<img class="u-max-full-width" src="https://raw.githubusercontent.com/dhg/Skeleton/gh-pages/examples/landing/images/placeholder.png?raw=true">
70+
</div>
71+
<div class="one-half column category">
72+
<img class="u-max-full-width" src="https://raw.githubusercontent.com/dhg/Skeleton/gh-pages/examples/landing/images/placeholder.png?raw=true">
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
78+
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react-with-addons.min.js"></script>
79+
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
80+
<script src="/react-drive-in.js"></script>
81+
82+
<script type="text/jsx">
83+
var video1 = [
84+
'https://github.com/ronik-design/react-drive-in/blob/master/example/pelo.mp4?raw=true',
85+
'https://github.com/ronik-design/react-drive-in/blob/master/example/pelo.ogv?raw=true',
86+
'https://github.com/ronik-design/react-drive-in/blob/master/example/pelo.jpg?raw=true'
87+
];
88+
89+
var video2 = [
90+
'https://github.com/ronik-design/react-drive-in/blob/master/example/kaledo.mp4?raw=true',
91+
'https://github.com/ronik-design/react-drive-in/blob/master/example/kaledo.ogv?raw=true',
92+
'https://github.com/ronik-design/react-drive-in/blob/master/example/kaledo.jpg?raw=true'
93+
];
94+
95+
React.render(
96+
<ReactDriveIn show={video1} />,
97+
document.getElementById('video1')
98+
);
99+
100+
React.render(
101+
<ReactDriveIn show={video2} />,
102+
document.getElementById('video2')
103+
);
104+
105+
</script>
106+
</body>
107+
</html>

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "react-drive-in",
3-
"version": "1.4.1",
3+
"version": "1.5.0",
44
"description": "React component supporting background videos and playlists.",
55
"main": "lib/react-drive-in.js",
66
"scripts": {
77
"build": "npm run lint; npm run transpile; npm run build-browser; npm run build-browser-min; npm run styles",
88
"transpile": "babel src --out-dir lib --stage 0",
9-
"styles": "lessc --autoprefix='last 5 versions' src/react-drive-in.less > dist/react-drive-in.css",
9+
"styles": "lessc --autoprefix='last 5 versions' src/react-drive-in.less > dist/react-drive-in.css && lessc --autoprefix='last 5 versions' src/react-drive-in-multi.less > dist/react-drive-in-multi.css",
1010
"build-browser": "browserify src/react-drive-in.jsx -t [envify --NODE_ENV production ] -t babelify --outfile dist/react-drive-in.js --standalone ReactDriveIn",
1111
"build-browser-min": "browserify src/react-drive-in.jsx -t [envify --NODE_ENV production ] -t babelify --standalone ReactDriveIn | uglifyjs -mc > dist/react-drive-in.min.js",
1212
"server": "browser-sync start --server example --server dist",

‎src/react-drive-in-multi.less

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.drive-in-wrap {
2+
overflow: hidden;
3+
position: absolute;
4+
height: 100%;
5+
width: 100%;
6+
top: 0;
7+
left: 0;
8+
z-index: -10000;
9+
}
10+
.drive-in-media {
11+
position: absolute;
12+
}
13+
.drive-in-media video,
14+
.drive-in-media img {
15+
transition: opacity .5s ease-in-out;
16+
position: relative;
17+
}

‎src/react-drive-in.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ class ReactDriveIn extends React.Component {
149149

150150
render() {
151151
return (
152-
<div ref="wrap" id="drive-in-wrap" className={this.props.className}>
152+
<div ref="wrap" className={this.props.className + ' drive-in-wrap'}>
153153
<div ref="media" className="drive-in-media"></div>
154154
</div>
155155
);

‎src/react-drive-in.less

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
#drive-in-wrap {
1+
html, body {
2+
height: 100%;
3+
}
4+
5+
.drive-in-wrap {
26
overflow: hidden;
37
position: fixed;
48
height: 100%;

0 commit comments

Comments
 (0)