Merge pull request #343 from nypublicradio/bono/audio-player

Audio Player Experiment

.env.sample

@@ -12,3 +12,4 @@ SENTRY_ENVIRONMENT=local
 ENV=demo
 NUXT_ENV_ENV=demo
 CHAMP_URL=https://lambda-gateway.demo.nypr.digital/champ/gothamist
+WHATS_ON_API=https://api.demo.nypr.digital/api/v4/whats_on/

.squash.yml

@@ -14,6 +14,7 @@ deployments:
           - DISQUS_PUBLIC_KEY=e6CVgEaLZqw0RNacE0YTx0PwnjyXh8X8QogknYzUX34hJ4k7EmUVPxVCD5FjHjqp
           - SENTRY_DSN=https://525e09964a6d4c87bfa58617dc758455@o557978.ingest.sentry.io/5743108
           - SENTRY_ENVIRONMENT=demo
+          - WHATS_ON_API=https://api.demo.nypr.digital/api/v4/whats_on/
           - ENV=demo
       run_options:
           --env NUXT_HOST=$NUXT_HOST
@@ -27,4 +28,5 @@ deployments:
           --env DISQUS_PUBLIC_KEY=$DISQUS_PUBLIC_KEY
           --env SENTRY_DSN=$SENTRY_DSN
           --env SENTRY_ENVIRONMENT=$SENTRY_ENVIRONMENT
+          --env WHATS_ON_API=$WHATS_ON_API
           --env ENV=$ENV

components/CollapsibleMessage.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="collapsible-message-container">
+    <div
+      v-show="isOpen"
+      class="collapsible-message is-open"
+    >
+      <div class="collapsible-message-message">
+        <slot />
+      </div>
+      <v-button class="toggle-button button" @click="collapse">
+        <dropdown-icon />
+      </v-button>
+    </div>
+    <div
+      v-show="!isOpen"
+      class="collapsible-message is-collapsed"
+    >
+      <v-button class="toggle-button button" @click="open">
+        ?
+      </v-button>
+    </div>
+  </div>
+</template>
+<script>
+const messageCookie = '__message'
+const oneMonth = 60 * 60 * 24 * 31
+export default {
+  name: 'CollapsibleMessage',
+  props: {
+    prefix: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      isOpen: true
+    }
+  },
+  computed: {
+    collapsedCookie () {
+      return this.prefix + messageCookie
+    }
+  },
+  beforeMount () {
+    this.wasDismissed = this.$cookies.get(this.collapsedCookie)
+    if (this.wasDismissed) {
+      this.isOpen = false
+      this.$cookies.set(this.collapsedCookie, 'true', { path: '/', maxAge: oneMonth })
+    }
+  },
+  methods: {
+    collapse () {
+      this.$emit('collapse')
+      this.isOpen = false
+      this.$cookies.set(this.collapsedCookie, 'true', { path: '/', maxAge: oneMonth })
+    },
+    open () {
+      this.$emit('open')
+      this.isOpen = true
+      this.$cookies.remove(this.collapsedCookie, { path: '/' })
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+  .collapsible-message-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 100%;
+  }
+  .collapsible-message {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 48px;
+    width: 100%;
+    background: RGB(var(--color-banana-yellow));
+    padding: 12px 12px;
+    font-size: var(--font-size-2);
+    line-height:  var(--line-height-2);
+  }
+
+  .collapsible-message-container .collapsible-message .button {
+    min-width: 32px;
+    color: RGB(var(--color-dark-grey));
+    background: RGB(var(--color-banana-yellow));
+    padding: 0;
+    font-size: 12px;
+    & svg > path {
+      fill: RGB(var(--color-dark-gray));
+    }
+  }
+
+  .collapsible-message-container .collapsible-message.is-collapsed {
+    padding: 0;
+    min-height: 32px;
+    width: 32px;
+    .button {
+      height: 32px;
+    }
+  }
+
+</style>

components/GothamistFooter.vue

@@ -52,7 +52,7 @@
         </div>
       </template>
     </the-footer>
-    <div class="htlad-interior_leaderboard_adhesion" />
+    <div v-if="!$features.enabled['experiment-audio-player']" class="htlad-interior_leaderboard_adhesion" />
   </div>
 </template>
 

components/GothamistPlayer.vue

@@ -0,0 +1,213 @@
+<template>
+  <div
+    v-if="!playerDismissed"
+    class="persistent-player-wrapper"
+  >
+    <collapsible-message
+      prefix="player-welcome"
+      @collapse="handleWelcomeMessageCollapsed"
+    >
+      You can now listen to WNYC on Gothamist! Let us know what you think of this experimental feature <a href="https://surveys.hotjar.com/e0b0fda5-4c70-43b4-bea5-32bca9fd25f8" target="_blank" rel="noopener noreferrer">here</a>.
+    </collapsible-message>
+    <div
+      class="player-row u-color-group-dark"
+    >
+      <aside
+        aria-label="WNYC Audio Controls"
+      >
+        <persistent-player
+          v-if="dataLoaded"
+          class="gothamist-player"
+          livestream
+          :auto-play="whatsOnNowPlaying"
+          :is-playing="vueHifiIsPlaying"
+          :is-loading="vueHifiIsLoading"
+          :volume="vueHifiVolume"
+          :is-muted="vueHifiIsMuted"
+          :station="whatsOnNowStation"
+          :title="whatsOnNowTitle"
+          :description="whatsOnNowEpisodeTitle"
+          :file="whatsOnNowFile"
+          :should-show-cta="!hasSomethingBeenPlayedYet"
+          aria-live="polite"
+          @togglePlay="handlePlayButton"
+          @volume-toggle-mute="toggleMute"
+          @volume-change="setVolume($event)"
+        />
+        <div class="extra-controls">
+          <v-button class="dismiss-button button" @click="handleDismissButton">
+            <close-icon />
+          </v-button>
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import whatsOnNow from '@/mixins/whatsOnNow'
+import gtm from '@/mixins/gtm'
+import api from '@/mixins/api'
+import vueHifi from '../node_modules/vue-hifi/src/mixins/vue-hifi'
+
+export default {
+  name: 'GothamistPlayer',
+  mixins: [gtm, whatsOnNow, vueHifi, api],
+  data () {
+    return {
+      windowWidth: null,
+      timer: null,
+      playerDismissed: false
+    }
+  },
+  computed: {
+    ...mapState('whatsOnNow', {
+      dataLoaded: state => state.dataLoaded,
+      hasSomethingBeenPlayedYet: state => state.hasSomethingBeenPlayedYet,
+      whatsOnNow: state => state.whatsOnNow,
+      whatsOnNowEpisodeTitle: state => state.whatsOnNow.episodeTitle,
+      whatsOnNowEpisodeLink: state => state.whatsOnNow.episodeLink,
+      whatsOnNowFile: state => state.whatsOnNow.file,
+      whatsOnNowImage: state => state.whatsOnNow.image,
+      whatsOnNowPlaying: state => state.whatsOnNow.playing,
+      whatsOnNowStation: state => state.whatsOnNow.station,
+      whatsOnNowTitle: state => state.whatsOnNow.title,
+      whatsOnNowTitleLink: state => state.whatsOnNow.titleLink,
+      streams: state => state.streams,
+      selectedStream: state => state.selectedStream,
+      selectedStreamPlaying: state => state.selectedStream.playing
+    }),
+    ...mapState('vue-hifi', {
+      vueHifiVolume: state => state.volume,
+      vueHifiIsLoading: state => state.isLoading,
+      vueHifiIsMuted: state => state.isMuted,
+      vueHifiIsPlaying: state => state.isPlaying
+    })
+  },
+  mounted () {
+    // send a google analytics event every 2 minutes if a stream is playing
+    this.timer = window.setInterval(() => {
+      if (this.vueHifiIsPlaying) {
+        this.gaEvent('Gothamist Player', 'Ping', this.station)
+      } else {
+        clearInterval(this.timer)
+      }
+    }, 120000)
+  },
+  beforeDestroy () {
+    this.windowWidth = window.innerWidth
+    clearInterval(this.timer)
+  },
+  methods: {
+    handleWelcomeMessageCollapsed () {
+      this.$emit('welcome-message-dismissed')
+    },
+    handleDismissButton () {
+      this.$emit('player-dismissed')
+      this.stop()
+      this.playerDismissed = true
+    },
+    handlePlayButton (e) {
+      if (!this.vueHifiIsPlaying && !this.vueHifiIsLoading && !this.hasSomethingBeenPlayedYet) {
+        this.$emit('play-clicked')
+      }
+      if (!this.vueHifiIsPlaying && !this.vueHifiIsLoading && this.hasSomethingBeenPlayedYet) {
+        this.$emit('resume-clicked')
+      }
+      if (this.vueHifiIsPlaying) {
+        this.$emit('pause-clicked')
+      }
+      this.playButtonClicked(this.whatsOnNow, 'Persistent Player')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.persistent-player-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  height: 144px;
+  z-index: 1200;
+  width: 100%;
+
+@include media('>medium') {
+    width: 380px;
+  }
+
+  .player-row aside {
+    display: flex;
+    flex-direction: row;
+    color: RGB(var(--color-text));
+    background-color: RGB(var(--color-background));
+
+    .persistent-player {
+      position: relative;
+      padding: 0 16px;
+      flex-grow: 1;
+    }
+
+    .extra-controls {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      flex-basis: 64px;
+      flex-grow: 0;
+      padding-right: 16px;
+    }
+  }
+
+  .button {
+    width: 40px;
+    height: 40px;
+    background: RGB(var(--color-white));
+    & svg > path {
+      fill: RGB(var(--color-dark-gray));
+    }
+    &:hover {
+      transform: none;
+    }
+    &:before {
+      content: none
+    }
+  }
+
+  .dismiss-button {
+    background: RGB(var(--color-dark-gray));
+    & svg > path {
+      fill: RGB(var(--color-white));
+    }
+  }
+
+  .volume-control {
+    display: none;
+  }
+}
+
+.gothamist-player {
+  .track-info-livestream-station {
+    letter-spacing: 0.15em;
+  }
+  .player-cta-play-button .button-text {
+    display: none;
+  }
+  .player-controls .player-cta-play-button {
+    margin-right: 0;
+  }
+  .player-controls svg, .player-controls svg * {
+    fill: RGB(var(--color-button-text));
+  }
+  .button .loading-icon path {
+    stroke: RGB(51,51,51);
+  }
+  .player-controls .play-button {
+    min-width: auto;
+  }
+}
+
+</style>

experiments/audio-player/index.js

@@ -0,0 +1,22 @@
+export default {
+  // A helper exp-{name}-{var} class will be added to the root element
+  name: 'audio-player',
+
+  // Google optimize experiment id
+  experimentID: '8G1COSP2SWGSj8ZrLaERiw',
+
+  // [optional] specify number of sections for MVT experiments
+  // sections: 1,
+
+  // [optional] maxAge for a user to test this experiment
+  // maxAge: 60 * 60 * 24, // 24 hours,
+
+  // [optional] Enable/Set experiment on certain conditions
+  isEligible: ({ route }) => route.path === '/',
+
+  // Implemented variants and their weights
+  variants: [
+    { weight: 1 }, // Original
+    { weight: 1 } // Audio Player
+  ]
+}

experiments/index.js

@@ -1,5 +1,5 @@
-import taglessCardsOnHomepage from './tagless-cards-on-homepage/index'
+import audioPlayer from './audio-player/index'
 
 export default [
-  taglessCardsOnHomepage
+  audioPlayer
 ]