From ed14754441c174f9343859e78e7a6e6d162dcfae Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 20 Apr 2021 00:17:31 +0200
Subject: re-implement marquee

---
 frontend/site/projects/museum/views/marquee.css    | 15 +++++++
 frontend/site/projects/museum/views/marquee.js     | 51 ++++++++++++++++++++++
 frontend/site/projects/museum/views/nav.overlay.js |  2 +
 3 files changed, 68 insertions(+)
 create mode 100644 frontend/site/projects/museum/views/marquee.css
 create mode 100644 frontend/site/projects/museum/views/marquee.js

(limited to 'frontend/site/projects/museum/views')

diff --git a/frontend/site/projects/museum/views/marquee.css b/frontend/site/projects/museum/views/marquee.css
new file mode 100644
index 0000000..2fcfd5a
--- /dev/null
+++ b/frontend/site/projects/museum/views/marquee.css
@@ -0,0 +1,15 @@
+.marquee-container {
+  position: fixed;
+  bottom: 4rem;
+  height: 40px;
+  width: 100vw;
+  pointer-events: none;
+}
+.marquee-text {
+  white-space: nowrap;
+  padding-left: 100vw;
+  width: 6500px;
+  font-family: "Druk Wide", sans-serif;
+  font-size: 30px;
+  color: #fff;
+}
diff --git a/frontend/site/projects/museum/views/marquee.js b/frontend/site/projects/museum/views/marquee.js
new file mode 100644
index 0000000..5d031eb
--- /dev/null
+++ b/frontend/site/projects/museum/views/marquee.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import Marquee from "react-fast-marquee"
+
+import "./marquee.css"
+
+import { MARQUEES } from "site/projects/museum/constants"
+
+export default class MarqueeContainer extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { match } = this.props
+    const { page_name } = match.params
+    if (!(page_name in MARQUEES)) {
+      this.setState({ message: null })
+    }
+    this.setState({ message: MARQUEES[page_name] })
+  }
+
+  render() {
+    const { language } = this.props
+    if (!this.state.message) return null
+    return (
+      <div className="marquee-container">
+        <Marquee
+          direction="left"
+          speed={412}
+          gradient={false}
+        >
+          <span className="marquee-text">
+            {this.state.message[language]}
+          </span>
+        </Marquee>
+      </div>
+    )
+  }
+}
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 501b5af..804837d 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -9,6 +9,7 @@ import TextOverlay from './text.overlay'
 import JakrawalLinks from './jakrawal.links'
 import TitlesOverlay from './titles.overlay'
 import Flash from './flash'
+import Marquee from './marquee'
 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"
@@ -179,6 +180,7 @@ class NavOverlay extends Component {
             <div className="footer no-artist" ref={this.footerRef} />
           )
         )}
+        <Marquee location={this.props.location} match={this.props.match} language={this.props.language} />
         <TitlesOverlay location={this.props.location} match={this.props.match} />
         <div className="home-corner">
           {showHome && (
-- 
cgit v1.2.3-70-g09d2