Skip to content

Commit

Permalink
everything fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
matiasperz committed Dec 2, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 92a93ca commit c3bad0b
Showing 4 changed files with 126 additions and 17 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -34,6 +34,7 @@
"graphql-request": "^4.3.0",
"gsap": "./src/lib/gsap/gsap-bonus.tgz",
"hls.js": "1.1.5",
"howler": "^2.2.3",
"lamina": "^1.1.20",
"leva": "^0.9.34",
"lodash": "^4.17.21",
@@ -60,6 +61,7 @@
"devDependencies": {
"@next/bundle-analyzer": "^12.1.2",
"@types/css-font-loading-module": "0.0.7",
"@types/howler": "^2.2.7",
"@types/lodash": "^4.14.182",
"@types/mousetrap": "1.6.9",
"@types/node": "17.0.21",
Binary file added public/audio/flauta-loop.ogg
Binary file not shown.
131 changes: 114 additions & 17 deletions src/experiments/39.ffflauta-scene.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Howl } from 'howler'
import { gsap } from 'lib/gsap'
import Image from 'next/image'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -184,19 +185,7 @@ const Dialog = ({ text, side }) => {
)
}

const Background = ({ muted }) => {
const videoRef = useRef()

useEffect(() => {
if (!muted) {
gsap.to(videoRef.current, {
volume: 0.5,
duration: 1,
ease: 'none'
})
}
}, [muted])

const Background = () => {
return (
<div style={{ position: 'absolute', inset: 0 }}>
<div style={{ width: '100%', height: '100%' }}>
@@ -208,9 +197,8 @@ const Background = ({ muted }) => {
playsInline
autoPlay
src="/video/ffflauta-scene/tv-bg.mp4"
muted={muted}
muted={true}
loop
ref={videoRef}
/>
</div>
</div>
@@ -297,6 +285,7 @@ const ScanLines = () => {
</div>
<style jsx>{`
.scanlines-container {
pointer-events: none;
position: absolute;
inset: 0;
zindex: 1;
@@ -373,6 +362,102 @@ const ScanLines = () => {
)
}

const AudioButton = ({ interacted }) => {
const [muted, setMuted] = useState(false)

const shouldBeMuted = !interacted || muted

var music = useMemo(
() =>
new Howl({
src: '/audio/flauta-loop.ogg',
autoplay: true,
loop: true,
mute: true,
volume: 0
}),
[]
)

useEffect(() => {
music.mute(shouldBeMuted)

const fromTo = [0, 0.5]

shouldBeMuted && fromTo.reverse()

music.fade(...fromTo, 2000)

if (!music.playing() && !shouldBeMuted) {
music.play()
}
}, [music, shouldBeMuted])

useEffect(() => {
const musicRef = music

return () => {
musicRef.unload()
}
}, [music])

const toggleMute = useCallback((e) => {
e.stopPropagation()
setMuted((muted) => !muted)
}, [])

return (
<button
style={{
aspectRatio: 1,
width: '8%',
// background: '#00000060',
pointerEvents: 'all'
// mixBlendMode: 'multiply'
}}
onClick={toggleMute}
>
{shouldBeMuted ? (
<svg
width="100%"
height="21"
viewBox="0 0 21 21"
fill="white"
xmlns="http://www.w3.org/2000/svg"
style={{ filter: 'drop-shadow(0px 0px 2px #000000)' }}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 2H8V4H6V6H4V8H0V13H4V15H6V17H8V19H10V2Z"
/>
</svg>
) : (
<svg
width="100%"
height="21"
viewBox="0 0 21 21"
fill="white"
xmlns="http://www.w3.org/2000/svg"
style={{ filter: 'drop-shadow(0px 0px 2px #000000)' }}
>
<rect x="14" y="7" width="2" height="7" />
<rect x="19" y="5" width="2" height="11" />
<rect x="12" y="5" width="2" height="2" />
<rect x="17" y="3" width="2" height="2" />
<rect x="12" y="14" width="2" height="2" />
<rect x="17" y="16" width="2" height="2" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 2H8V4H6V6H4V8H0V13H4V15H6V17H8V19H10V2Z"
/>
</svg>
)}
</button>
)
}

const FFFlautaScene = () => {
const [hasInteracted, setHasInteracted] = useState(false)
const [scene, setScene] = useState(0)
@@ -457,7 +542,7 @@ const FFFlautaScene = () => {
}}
>
<TV>
<Background muted={!hasInteracted} />
<Background />
{/* Content */}
<div
style={{
@@ -468,7 +553,19 @@ const FFFlautaScene = () => {
}}
ref={contentRef}
>
<div style={{ position: 'absolute', top: '10%', right: '10%' }}>
<div
style={{
position: 'absolute',
top: '10%',
left: 0,
padding: '0 10%',
width: '100%',
display: 'flex',
justifyContent: 'space-between'
}}
>
<AudioButton interacted={hasInteracted} />

<p style={{ fontSize: '1.6em' }}>
{scene + 1}/{parsedScript.length}
</p>
10 changes: 10 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -932,6 +932,11 @@
resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz#2f98ede46acc0975de85c0b7b0ebe06041d24601"
integrity sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==

"@types/howler@^2.2.7":
version "2.2.7"
resolved "https://registry.yarnpkg.com/@types/howler/-/howler-2.2.7.tgz#5acfbed57f9e1d99b8dabe1b824729e1c1ea1fae"
integrity sha512-PEZldwZqJJw1PWRTpupyC7ajVTZA8aHd8nB/Y0n6zRZi5u8ktYDntsHj13ltEiBRqWwF06pASxBEvCTxniG8eA==

"@types/json-schema@^7.0.7":
version "7.0.11"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -3166,6 +3171,11 @@ hosted-git-info@^4.0.1:
dependencies:
lru-cache "^6.0.0"

howler@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.3.tgz#a2eff9b08b586798e7a2ee17a602a90df28715da"
integrity sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg==

html-encoding-sniffer@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"

1 comment on commit c3bad0b

@vercel
Copy link

@vercel vercel bot commented on c3bad0b Dec 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.