fix pausing, ff/sf percentage bar, copy link

10 files changed, 62 insertions, 10 deletions

diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index 016bb76..693a185 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -15,6 +15,9 @@ export const toArray = a => Array.from(a)
 export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
 export const isiPad = !!(navigator.userAgent.match(/iPad/i))
 export const isAndroid = !!(navigator.userAgent.match(/Android/i))
+export const isFirefox = !!(navigator.userAgent.match(/Firefox/i))
+export const isChrome = !!(navigator.userAgent.match(/Chrome/i))
+export const isSafari = !isChrome && !!(navigator.userAgent.match(/Safari/i))
 export const isMobile = isiPhone || isiPad || isAndroid
 export const isHandheld = isiPhone || (isAndroid && window.innerWidth <= 760)
 export const isTablet = isMobile && window.innerWidth > 760
@@ -22,6 +25,9 @@ export const isDesktop = !isMobile
 
 const htmlClassList = document.body.parentNode.classList
 htmlClassList.add(isDesktop ? 'desktop' : 'mobile')
+if (isFirefox) htmlClassList.add('firefox')
+if (isSafari) htmlClassList.add('safari')
+if (isChrome) htmlClassList.add('chrome')
 
 /* Default image dimensions */
 
diff --git a/animism-align/frontend/app/utils/oktween.js b/animism-align/frontend/app/utils/oktween.js
index 4388ad4..fdf5194 100644
--- a/animism-align/frontend/app/utils/oktween.js
+++ b/animism-align/frontend/app/utils/oktween.js
@@ -64,7 +64,7 @@ oktween.update = (t) => {
   tweens.forEach((tween, i) => {
     const dt = Math.min(1.0, (t - tween.start) / tween.duration)
     tween.tick++
-    if (dt < 0 || (dt < 1 && (tween.tick % tween.skip != 0))) return
+    if (dt < 0 || (dt < 1 && (tween.tick % tween.skip != 0)) || tween.done) return
     const ddt = tween.easing(dt)
     tween.dt = ddt
     tween.keys.forEach((prop) => {
diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index d9db743..48fffd6 100644
--- a/animism-align/frontend/app/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -1,5 +1,6 @@
 import * as types from 'app/types'
 import { store, dispatch } from 'app/store'
+import oktween from 'app/utils/oktween'
 
 import { URLS } from 'app/constants'
 
@@ -57,3 +58,33 @@ export const setVolume = volume => dispatch => {
 export const setCC = value => dispatch => {
   dispatch({ type: types.audio.set_cc, value })
 }
+
+/*
+// unfortunately these generate audible popping unless fadeTime is > 1000ms
+let fadeTween
+export const fade = (volume, fadeTime) => {
+  if (fadeTween) fadeTween.done = true
+  console.log('fade', audioPlayer.volume, '=>', volume, fadeTime)
+  return new Promise((resolve) => {
+    fadeTween = oktween.add({
+      from: { volume: audioPlayer.volume },
+      to: { volume },
+      duration: fadeTime,
+      // easing: oktween.easing.quad_in_out,
+      update: obj => {
+        console.log("VOLUME ==>", obj)
+        audioPlayer.volume = obj.volume
+      },
+      finished: () => {
+        console.log("done")
+        fadeTween = null
+        resolve()
+      }
+    })
+    console.log(fadeTween)
+  })
+}
+
+const fadeIn = (fadeTime) => fade(1.0, fadeTime)
+const fadeOut = (fadeTime) => fade(0.0, fadeTime)
+*/
diff --git a/animism-align/frontend/app/views/viewer/forms/subscription.form.js b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
index d2846c0..ce92951 100644
--- a/animism-align/frontend/app/views/viewer/forms/subscription.form.js
+++ b/animism-align/frontend/app/views/viewer/forms/subscription.form.js
@@ -105,7 +105,7 @@ export default class SubscriptionForm extends Component {
             {"and agree that e-flux may send me announcements to the email address "}
             {"entered above and that my data will be processed for this "}
             {"purpose in accordance with e-flux’s "}
-            <a href="/privacy">privacy policy.</a>
+            <a href="https://www.e-flux.com/privacy" target="_blank">privacy policy.</a>
           </span>
         </label>
         <div className="subscription-loading">
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index 36393df..d365c9c 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -144,6 +144,7 @@ class EfluxChrome extends Component {
         onMouseLeave={() => this.handleMouseLeave('close')}
         onClick={() => {
           actions.viewer.toggleFullscreenVisible(false)
+          actions.audio.pause()
           this.handleMouseLeave('close')
         }}
       >
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index dfbb093..1636b4d 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -161,22 +161,33 @@
 
 .nav-progress-percentage {
   position: absolute;
-  bottom: 0;
   left: 0;
-  height: 3rem;
+  height: 4px;
+  bottom: calc(3rem - 4px);
   pointer-events: none;
-  backdrop-filter: invert(0%);
-  transition: opacity 0.2s, backdrop-filter 0.2s, width 0.25s linear;
   opacity: 0;
+  transition: opacity 0.2s;
+  background: #fff;
 }
 .nav-open .nav-progress-percentage,
 .viewer-nav.hovering-nav .nav-progress-percentage {
-  backdrop-filter: invert(100%);
   opacity: 1;
 }
-.nav-open .nav-progress-percentage {
+
+.chrome .nav-progress-percentage {
+  bottom: 0;
+  height: 3rem;
+  backdrop-filter: invert(0%);
+  transition: opacity 0.2s, backdrop-filter 0.2s, width 0.25s linear;
+}
+.chrome .nav-open .nav-progress-percentage {
   height: calc(3rem - 1px);
 }
+.chrome .nav-open .nav-progress-percentage,
+.chrome .viewer-nav.hovering-nav .nav-progress-percentage {
+  backdrop-filter: invert(100%);
+}
+
 
 /* Arrows */
 
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index 565fe93..bdbb588 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -23,6 +23,8 @@
 .viewer-fullscreen.active.hidden,
 .viewer-fullscreen.active.playing.hidden {
   opacity: 0.0;
+  pointer-events: none;
+  user-select: none;
 }
 
 /* transitions */
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
index cacde49..0041673 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.js
@@ -130,6 +130,7 @@ class PlayerFullscreen extends Component {
     const { audio, media, currentSection, fullscreenVisible } = this.props
     const { play_ts, playing } = audio
     const { elements, persist, atChapterStart } = this.state
+    console.log(elements)
     let className = "viewer-fullscreen"
     // console.log(elements.length && fullscreenVisible)
     if (elements.length) {
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js
index 3950743..957aee4 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js
@@ -14,7 +14,7 @@ export default class ViewerSectionsShare extends Component {
     this.copyToClipboard = this.copyToClipboard.bind(this)
   }
   copyToClipboard() {
-    const url = "https://e-flux.com/"
+    const url = URLS.share_url
     writeToClipboard(url).then(() =>{
       clearTimeout(this.timeout)
       this.setState({ copying: true, copied: false, })
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 0995982..c8b43b6 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -308,7 +308,7 @@ export const toggleNavGradient = value => dispatch => {
 }
 
 export const updateFullscreenStatus = (value, persist, isSingleton) => dispatch => {
-  console.log('fullscreen', value, persist, isSingleton)
+  console.log('fullscreen', value ? 'off' : 'on', persist && 'persist', isSingleton && 'singleton')
   dispatch({ type: types.viewer.toggle_component, key: 'isFullscreen', value: value })
   dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenPersist', value: persist })
   dispatch({ type: types.viewer.toggle_component, key: 'isFullscreenSingleton', value: isSingleton })