.

transitive-bullshit · Dec 2, 2018 · 1cb4253 · 1cb4253
1 parent 276a3cd
commit 1cb4253
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 15 deletions.
diff --git 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
@@ -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 (
       <FluidGallery
         style={{ width: '100vw', height: '100vh' }}
-        slides={[ image1, image2, video3 ]}
+        slides={[ image1, image2, video ]}
       />
     )
   }
@@ -42,12 +42,12 @@ export default class App extends Component {
 
 ## Props
 
-| Property      | Type               | Default                               | Description                                                                                                                                  |
-|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
-| `slides`    | `Array<string>`           | **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<string>`  | **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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"