diff --git a/package.json b/package.json
index 76032d9..42dd823 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"deploy": "gh-pages -d example/build"
},
"dependencies": {
+ "is-video": "^1.0.1",
"raf": "^3.4.1",
"react-sizeme": "^2.5.2",
"react-swipeable": "^4.3.0",
diff --git a/readme.md b/readme.md
index 08f6d72..1dedbf5 100644
--- a/readme.md
+++ b/readme.md
@@ -25,14 +25,14 @@ import FluidGallery from 'react-fluid-gallery'
import image1 from './1.jpg'
import image2 from './2.jpg'
-import video3 from './3.mp4'
+import video from './video.mp4'
export default class App extends Component {
render () {
return (
)
}
@@ -42,12 +42,12 @@ export default class App extends Component {
## Props
-| Property | Type | Default | Description |
-|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
-| `slides` | `Array` | **required** | Array of image / video URLs to use for the gallery slides. |
-| `startAt` | number | random | Default slide to show. |
+| Property | Type | Default | Description |
+|:------------|:-----------------|:---------|:------------|
+| `slides` | `Array` | **required** | Array of image / video URLs to use for the gallery slides. |
+| `startAt` | number | random | Default slide to show. |
| `onChange` | function(index: number) | undefined | Optional callback when the active slide is changed. |
-| `...` | ... | undefined | Any other props are applied to the root canvas element. |
+| `...` | ... | undefined | Any other props are applied to the root canvas element. |
## Credits
diff --git a/src/fluid-gallery.js b/src/fluid-gallery.js
index 6341e53..27f4838 100644
--- a/src/fluid-gallery.js
+++ b/src/fluid-gallery.js
@@ -1,8 +1,8 @@
// TODO: allow overriding constants
// TODO: support cleanup?
-// TODO: better video texture detection than mp4 regex
import * as THREE from 'three'
+import isVideo from 'is-video'
import fragmentShader from './frag'
import vertexShader from './vert'
@@ -90,7 +90,7 @@ export default class FluidGallery {
}
_initTexture = (src) => {
- if (/\.mp4$/.test(src)) {
+ if (isVideo(src)) {
const video = document.createElement('video')
video.muted = true
video.loop = true
@@ -106,7 +106,7 @@ export default class FluidGallery {
video.load()
const play = video.play()
if (play) {
- play.catch((err) => undefined)
+ play.catch(() => undefined)
}
return texture
@@ -117,6 +117,7 @@ export default class FluidGallery {
}
_updateTextureOnResize = (texture) => {
+ /*
let texWidth
let texHeight
@@ -140,6 +141,7 @@ export default class FluidGallery {
texture.repeat.set(repeatX, repeatY)
texture.offset.x = (repeatX - 1) / 2 * -1
}
+ */
}
get currentSlideIndex() {
diff --git a/src/frag.js b/src/frag.js
index 492e03d..9970aff 100644
--- a/src/frag.js
+++ b/src/frag.js
@@ -9,7 +9,6 @@ uniform vec2 accel;
varying vec2 vUv;
varying vec2 vUv1;
-varying vec4 vPosition;
vec2 mirrored(vec2 v) {
vec2 m = mod(v, 2.0);
diff --git a/src/index.js b/src/index.js
index 0db1662..8a57cd7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -38,11 +38,13 @@ class ReactFluidGallery extends Component {
}
componentDidMount() {
+ window.addEventListener('resize', this._onResize)
this._reset(this.props)
this._tick()
}
componentWillUnmount() {
+ window.removeEventListener('resize', this._onResize)
if (this._tickRaf) {
raf.cancel(this._tickRaf)
this._tickRaf = null
diff --git a/src/vert.js b/src/vert.js
index 98974b9..8092a08 100644
--- a/src/vert.js
+++ b/src/vert.js
@@ -7,14 +7,11 @@ uniform vec2 uvRate1;
varying vec2 vUv;
varying vec2 vUv1;
-varying vec4 vPosition;
void main() {
vUv = uv;
- vec2 _uv = uv - 0.5;
- vUv1 = _uv;
+ vUv1 = uv - 0.5;
vUv1 *= uvRate1.xy;
-
vUv1 += 0.5;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
diff --git a/yarn.lock b/yarn.lock
index f0158b9..99011c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4578,6 +4578,13 @@ is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+is-video@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/is-video/-/is-video-1.0.1.tgz#7bc67760b0103d402bc1f10bb542f16a3687773b"
+ integrity sha1-e8Z3YLAQPUArwfELtULxajaHdzs=
+ dependencies:
+ video-extensions "^1.0.0"
+
is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -7912,6 +7919,11 @@ verror@1.10.0:
core-util-is "1.0.2"
extsprintf "^1.2.0"
+video-extensions@^1.0.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/video-extensions/-/video-extensions-1.1.0.tgz#eaa86b45f29a853c2b873e9d8e23b513712997d6"
+ integrity sha1-6qhrRfKahTwrhz6djiO1E3Epl9Y=
+
vm-browserify@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"