summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/site/actions.js2
-rw-r--r--frontend/site/audio/audio.actions.js9
-rw-r--r--frontend/site/audio/audio.icons.js13
-rw-r--r--frontend/site/audio/audio.player.js15
-rw-r--r--frontend/site/audio/audio.reducer.js15
-rw-r--r--frontend/site/audio/mute.button.js18
-rw-r--r--frontend/site/projects/museum/views/counter.js11
-rw-r--r--frontend/site/projects/museum/views/nav.css23
-rw-r--r--frontend/site/projects/museum/views/nav.overlay.js24
-rw-r--r--frontend/site/types.js1
10 files changed, 111 insertions, 20 deletions
diff --git a/frontend/site/actions.js b/frontend/site/actions.js
index 2e3d7a6..f68fbbc 100644
--- a/frontend/site/actions.js
+++ b/frontend/site/actions.js
@@ -2,6 +2,7 @@ import { bindActionCreators } from 'redux'
// import { actions as crudActions } from './api'
import * as siteActions from 'site/site/site.actions'
+import * as audioActions from 'site/audio/audio.actions'
import { dispatch } from 'site/store'
@@ -11,6 +12,7 @@ export default
// .concat(
[
['site', siteActions],
+ ['audio', audioActions],
] //)
.map(p => [p[0], bindActionCreators(p[1], dispatch)])
.concat([
diff --git a/frontend/site/audio/audio.actions.js b/frontend/site/audio/audio.actions.js
new file mode 100644
index 0000000..0b0b44b
--- /dev/null
+++ b/frontend/site/audio/audio.actions.js
@@ -0,0 +1,9 @@
+import * as types from 'site/types'
+
+export const mute = () => dispatch => {
+ dispatch({ type: types.site.mute_audio })
+}
+
+export const unmute = () => dispatch => {
+ dispatch({ type: types.site.unmute_audio })
+} \ No newline at end of file
diff --git a/frontend/site/audio/audio.icons.js b/frontend/site/audio/audio.icons.js
new file mode 100644
index 0000000..1e1b251
--- /dev/null
+++ b/frontend/site/audio/audio.icons.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export const VolumeOn = (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
+ </svg>
+)
+
+export const VolumeOff = (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
+ </svg>
+)
diff --git a/frontend/site/audio/audio.player.js b/frontend/site/audio/audio.player.js
index d036347..fcdcb6f 100644
--- a/frontend/site/audio/audio.player.js
+++ b/frontend/site/audio/audio.player.js
@@ -37,9 +37,14 @@ export default class AudioPlayer {
delete this.players[id]
}
+ toggleMuted(muted) {
+ this.muted = muted
+ Object.keys(this.players).forEach(id => this.players[id].toggleMuted(muted))
+ }
+
playPage(page) {
const { background_audio_id, restart_audio, stop_all_sounds } = page.settings
- console.log('playPage', page)
+ // console.log('playPage', page)
if (stop_all_sounds && this.current_background_id !== background_audio_id) {
Object.keys(this.players).forEach(id => this.stop(id))
} else if (
@@ -86,8 +91,9 @@ export default class AudioPlayer {
item,
tile,
type,
- done: this.done
+ done: this.done,
})
+ this.players[id].toggleMuted(this.muted)
this.players[id].play()
return this.players[id]
}
@@ -100,6 +106,7 @@ export default class AudioPlayer {
type: "url",
done: this.done
})
+ this.players[id].toggleMuted(this.muted)
this.players[id].play()
return this.players[id]
}
@@ -120,6 +127,10 @@ class Player {
this.audio.src = item.url
}
+ toggleMuted(muted) {
+ this.audio.muted = muted
+ }
+
release() {
if (this.type === 'click' && this.tile && this.tile.settings.navigate_when_audio_finishes) {
history.push(this.tile.href)
diff --git a/frontend/site/audio/audio.reducer.js b/frontend/site/audio/audio.reducer.js
index f0bf0e9..9cdda54 100644
--- a/frontend/site/audio/audio.reducer.js
+++ b/frontend/site/audio/audio.reducer.js
@@ -3,6 +3,7 @@ import * as types from 'site/types'
const initialState = {
player: new AudioPlayer(),
+ muted: false,
}
export default function audioReducer(state = initialState, action) {
@@ -12,6 +13,20 @@ export default function audioReducer(state = initialState, action) {
state.player.load(action.data.graph)
return state
+ case types.site.mute_audio:
+ state.player.toggleMuted(true)
+ return {
+ ...state,
+ muted: true,
+ }
+
+ case types.site.unmute_audio:
+ state.player.toggleMuted(false)
+ return {
+ ...state,
+ muted: false,
+ }
+
default:
return state
}
diff --git a/frontend/site/audio/mute.button.js b/frontend/site/audio/mute.button.js
new file mode 100644
index 0000000..c2606d3
--- /dev/null
+++ b/frontend/site/audio/mute.button.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import { VolumeOn, VolumeOff } from './audio.icons'
+
+import actions from 'site/actions'
+
+const MuteButton = ({ muted }) => (
+ <div className="mute" onClick={muted ? actions.audio.unmute : actions.audio.mute}>
+ {muted ? VolumeOff : VolumeOn}
+ </div>
+)
+
+const mapStateToProps = state => ({
+ muted: state.audio.muted,
+})
+
+export default connect(mapStateToProps)(MuteButton)
diff --git a/frontend/site/projects/museum/views/counter.js b/frontend/site/projects/museum/views/counter.js
index f930b85..270e61f 100644
--- a/frontend/site/projects/museum/views/counter.js
+++ b/frontend/site/projects/museum/views/counter.js
@@ -66,14 +66,3 @@ const commatize = (n, radix) => {
while (n)
return nums.join("")
}
-
-const JAKRAWAL_TEXTS = [
- "Wildfires occur frequently during the dry season in northern Thailand’s high mountains. The source of fire is not natural but arson.",
- "In the past it was hypothesized that local people set the fires to clear land for agricultural use, or for hunting.",
- "There were efforts to solve the problem at the community level, but the fires only became more severe.",
- "Strangely, the blazes often occurred in the national park—an area difficult for villagers to access.",
- "During the wildfire suppression efforts of May 2020, a group of scholars and volunteers discovered important evidence that would change the original hypothesis: They found several instances of improvised devices made of clothes pegs connected to a small battery by a power cable.",
- "Combustion was triggered by a small clod of clay positioned in the middle between the pegs, acting as a timer—after melting in the heat the wires attached to the batteries would ignite.",
- "Villagers who were interviewed said that this was not a technique that they were familiar with.",
- "Although we cannot know the intention of the burners, it is likely that the park’s natural resources are being used to benefit some group of people. And the poor have always been condemned.",
-]
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index bd584a6..c4d6f8e 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -1,6 +1,13 @@
-.museum-nav .home-link {
+/* home corner */
+
+.museum-nav .home-corner {
position: fixed;
top: 0; left: 0;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+.museum-nav .home-link {
padding: 1rem;
color: rgba(255, 121, 13, 1.0);
font-family: 'Helvetica', sans-serif;
@@ -12,6 +19,20 @@
.museum-nav .home-link:hover {
color: white;
}
+.museum-nav .mute {
+ padding: 0.5rem 0.5rem 0.375rem 0.5rem;
+ cursor: pointer;
+}
+.museum-nav .mute svg {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+.museum-nav .mute path {
+ fill: #FF790D;
+}
+.museum-nav .mute:hover path {
+ fill: #ffffff;
+}
/* footer */
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index f9ece7a..d3951cf 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -9,6 +9,7 @@ import JakrawalLinks from './jakrawal.links'
import TitlesOverlay from './titles.overlay'
import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/constants"
import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
+import MuteButton from "site/audio/mute.button"
import { history } from "site/store"
import Counter from './counter'
@@ -19,6 +20,7 @@ export default class NavOverlay extends Component {
showFooter: false,
showArtist: false,
showCounter: false,
+ showMuteButton: false,
artist: {},
}
@@ -54,6 +56,7 @@ export default class NavOverlay extends Component {
showArtist: false,
showCounter: false,
currentArtist: null,
+ showMuteButton: false,
artist: {},
})
}
@@ -64,6 +67,7 @@ export default class NavOverlay extends Component {
showArtist: false,
showCounter: false,
currentArtist: null,
+ showMuteButton: true,
artist: {},
})
}
@@ -73,6 +77,7 @@ export default class NavOverlay extends Component {
showFooter: false,
showArtist: false,
showCounter: false,
+ showMuteButton: false,
})
}
else if (pathkey in ARTISTS) {
@@ -81,6 +86,7 @@ export default class NavOverlay extends Component {
showHome: true,
showFooter: true,
showArtist: true,
+ showMuteButton: true,
showCounter: pathkey === 'nilthamrong' && path_chapter !== "home",
currentArtist: pathkey,
artist: ARTISTS[pathkey],
@@ -91,6 +97,7 @@ export default class NavOverlay extends Component {
showFooter: false,
showCounter: false,
showArtist: false,
+ showMuteButton: false,
currentArtist: null,
artist: {},
})
@@ -129,15 +136,20 @@ export default class NavOverlay extends Component {
}
render() {
- const { showArtist, showHome, showCounter, showFooter, artist } = this.state
+ const { showArtist, showHome, showMuteButton, showCounter, showFooter, artist } = this.state
return (
<div className="museum-nav">
<JakrawalLinks location={this.props.location} match={this.props.match} />
- {showHome && (
- <div className="home-link" onClick={this.goHome}>
- Home
- </div>
- )}
+ <div className="home-corner">
+ {showHome && (
+ <div className="home-link" onClick={this.goHome}>
+ Home
+ </div>
+ )}
+ {showMuteButton && (
+ <MuteButton />
+ )}
+ </div>
{showCounter && <Counter />}
<TextOverlay location={this.props.location} match={this.props.match} />
{showFooter && (
diff --git a/frontend/site/types.js b/frontend/site/types.js
index 3a49485..ab61089 100644
--- a/frontend/site/types.js
+++ b/frontend/site/types.js
@@ -3,6 +3,7 @@ import { with_type } from 'app/api/crud.types'
export const site = with_type('site', [
'set_site_title', 'loading', 'loaded', 'error',
'load_site', 'interact', 'set_popups',
+ 'mute_audio', 'unmute_audio',
])
export const init = '@@INIT'
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 12:39:47 +0000