Merge pull request #691 from bamdadfr/next/bamdad

bamdadfr · Aug 23, 2024 · bd5dc2a · bd5dc2a
2 parents 2af88d6 + 4ea0757
commit bd5dc2a
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 119 deletions.
diff --git a/src/app/components/with-time-loop/with-time-loop.tsx b/src/app/components/with-time-loop/with-time-loop.tsx
diff --git a/src/components/texture/plane.component.tsx b/src/components/texture/plane.component.tsx
@@ -0,0 +1,45 @@
+import {useFrame} from '@react-three/fiber';
+import React, {useMemo} from 'react';
+import fragmentShader from 'src/components/texture/texture.fragment.glsl';
+import vertexShader from 'src/components/texture/texture.vertex.glsl';
+import {ShaderMaterial, Texture} from 'three';
+
+interface Props {
+  size: number;
+  texture: Texture;
+  ratio: number;
+}
+
+export function PlaneComponent({size, texture, ratio}: Props) {
+  const material = useMemo(
+    () =>
+      new ShaderMaterial({
+        uniforms: {
+          u_texture: {value: texture},
+          u_ratio: {value: ratio},
+          u_time: {value: 0},
+        },
+        vertexShader,
+        fragmentShader,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useFrame(({clock}) => {
+    material.uniforms.u_time.value = clock.getElapsedTime();
+    material.uniforms.u_ratio.value = ratio;
+  });
+
+  return (
+    <mesh>
+      <planeGeometry args={[size, size]} />
+      <shaderMaterial
+        attach="material"
+        vertexShader={material.vertexShader}
+        fragmentShader={material.fragmentShader}
+        uniforms={material.uniforms}
+      />
+    </mesh>
+  );
+}
diff --git a/src/components/texture/texture.component.tsx b/src/components/texture/texture.component.tsx
@@ -1,68 +1,24 @@
-import {Canvas, useFrame} from '@react-three/fiber';
+import {Canvas} from '@react-three/fiber';
 import React, {ReactElement, useMemo} from 'react';
 import {p} from 'src/app/shared.styles';
+import {PlaneComponent} from 'src/components/texture/plane.component';
 import {mapRange} from 'src/utils/map-range/map-range';
-import {ShaderMaterial, TextureLoader} from 'three';
-
-import fragmentShader from './texture.shaders.fragment.glsl';
+import {TextureLoader} from 'three';
 
 interface Props {
   image: string;
   dryWet: number;
   width: number;
 }
 
-const vertexShader = `
-  varying vec2 v_uv;
-
-  void main() {
-    v_uv = uv;
-    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-  }
-`;
-
-function Plane({size, texture, ratio}) {
-  const material = useMemo(
-    () =>
-      new ShaderMaterial({
-        uniforms: {
-          u_texture: {value: texture},
-          u_ratio: {value: ratio},
-          u_time: {value: 0},
-        },
-        vertexShader,
-        fragmentShader,
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  useFrame(({clock}) => {
-    material.uniforms.u_time.value = clock.getElapsedTime();
-    material.uniforms.u_ratio.value = ratio;
-  });
-
-  return (
-    <mesh>
-      <planeGeometry args={[size, size]} />
-      <shaderMaterial
-        attach="material"
-        vertexShader={material.vertexShader}
-        fragmentShader={material.fragmentShader}
-        uniforms={material.uniforms}
-      />
-    </mesh>
-  );
-}
-
 export function TextureComponent({image, dryWet, width}: Props): ReactElement {
   const texture = new TextureLoader().load(image);
   const size = useMemo(() => width / 100 - (p / 100) * 2, [width]);
   const ratio = 0.005 + mapRange(dryWet, 0.5, 1.5, 1.6, -1.6, true);
 
   return (
     <Canvas>
-      <Plane
+      <PlaneComponent
         size={size}
         texture={texture}
         ratio={ratio}

diff --git a/...nts/texture/texture.shaders.fragment.glsl → src/components/texture/texture.fragment.glsl b/...nts/texture/texture.shaders.fragment.glsl → src/components/texture/texture.fragment.glsl
diff --git a/src/components/texture/texture.vertex.glsl b/src/components/texture/texture.vertex.glsl
@@ -0,0 +1,6 @@
+varying vec2 v_uv;
+
+void main() {
+    v_uv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
diff --git a/src/modules/player/player.module.tsx b/src/modules/player/player.module.tsx
@@ -1,10 +1,8 @@
 import {ResizeObserver} from '@juggle/resize-observer';
 import React, {ReactElement, useMemo} from 'react';
-import {isDesktop} from 'react-device-detect';
 import useMeasure from 'react-use-measure';
 import {p} from 'src/app/shared.styles';
 import {IndicatorsComponent} from 'src/components/indicators/indicators.component';
-import {NativeComponent} from 'src/modules/player/components/artwork/native.component';
 import {WebGlComponent} from 'src/modules/player/components/artwork/web-gl.component';
 
 import {PlayPauseButtonComponent} from './components/play-pause-button/play-pause-button.component';
@@ -36,11 +34,7 @@ export function PlayerModule(): ReactElement {
   return (
     <>
       <ImageContainer ref={ref}>
-        {isDesktop ? (
-          <WebGlComponent width={imageWidth} />
-        ) : (
-          <NativeComponent width={imageWidth} />
-        )}
+        <WebGlComponent width={imageWidth} />
       </ImageContainer>
 
       <PlayerContainer>