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"