Audio AMA improvements

src/components/AudioPlayer/Waveform.tsx

@@ -85,7 +85,7 @@ export default function Waveform({
  return (
  <span
  key={i}
- style={{ height, minWidth: '2px' }}
+ style={{ height, minWidth: '2px', minHeight: '2px' }}
  className="w-full bg-gray-800 rounded-md dark:bg-gray-200"
  />
  )

src/components/AudioPlayer/index.tsx

@@ -32,11 +32,15 @@ export default function AudioPlayer({
  React.useEffect(() => {
  resetProgressOverlay()
 
- audioRef.current.addEventListener('ended', function () {
- audioRef.current.currentTime = 0
- resetProgressOverlay()
- setIsPlaying(false)
- })
+ audioRef.current.addEventListener('play', onAudioElementPlay)
+ audioRef.current.addEventListener('pause', onAudioElementPause)
+ audioRef.current.addEventListener('ended', onAudioElementEnded)
+
+ return function cleanupListeners() {
+ audioRef?.current?.removeEventListener('play', onAudioElementPlay)
+ audioRef?.current?.removeEventListener('pause', onAudioElementPause)
+ audioRef?.current?.removeEventListener('ended', onAudioElementEnded)
+ }
  }, [])
 
  function pause() {
@@ -69,7 +73,26 @@ export default function AudioPlayer({
  setIsPlaying(true)
  }
 
+ function onAudioElementEnded() {
+ audioRef.current.currentTime = 0
+ resetProgressOverlay()
+ setIsPlaying(false)
+ }
+
+ function onAudioElementPlay() {
+ setIsPlaying(true)
+ }
+
+ function onAudioElementPause() {
+ setIsPlaying(false)
+ }
+
  function togglePlay() {
+ // pause all other audio players
+ const audios = document.querySelectorAll('audio')
+ audios.forEach((audio) => audio.pause())
+
+ // pause or play this audio player
  isPlaying ? pause() : play()
  }
 

src/graphql/constants/index.ts

@@ -2,5 +2,7 @@ import { baseUrl } from '~/config/seo'
 
 export const IS_PROD = process.env.NODE_ENV === 'production'
 export const CLIENT_URL = IS_PROD ? baseUrl : 'http://localhost:3000'
-export const AUDIO_STORAGE_BUCKET = IS_PROD ? 'audio-ama' : 'audio-ama-dev'
 export const PAGINATION_AMOUNT = 16
+
+export const AUDIO_STORAGE_BUCKET = IS_PROD ? 'audio-ama' : 'audio-ama-dev'
+export const AMA_QUESTIONS_COLLECTION = IS_PROD ? 'questions' : 'questions-dev'

src/graphql/helpers/sanitizeAmaDocument.ts

@@ -0,0 +1,35 @@
+import { storage } from '~/graphql/services/firebase'
+import { AUDIO_STORAGE_BUCKET } from '../constants'
+
+async function fetchAudioPlaybackUrl(id) {
+ const bucket = storage.bucket(AUDIO_STORAGE_BUCKET)
+ const url = await bucket
+ .file(id)
+ .getSignedUrl({
+ expires: Date.now() + 60 * 60 * 1000, // one hour
+ action: 'read',
+ })
+ .then((r) => r[0])
+ .catch((e) => {
+ console.error({ e })
+ return null
+ })
+ return await Promise.resolve(url)
+}
+
+export async function sanitizeAmaDocument(document, id) {
+ const createdAt = document.createdAt.toDate()
+ const updatedAt = document.updatedAt.toDate()
+ const audioUrl =
+ document.audioWaveform?.length > 0 ? await fetchAudioPlaybackUrl(id) : null
+ const audioPlayCount = document.audioPlayCount || 0
+ const audioWaveform = document.audioWaveform || []
+
+ return {
+ createdAt,
+ updatedAt,
+ audioWaveform,
+ audioUrl,
+ audioPlayCount,
+ }
+}

src/graphql/resolvers/mutations/ama/index.ts

@@ -1,5 +1,5 @@
 import { baseUrl } from '~/config/seo'
-import { IS_PROD } from '~/graphql/constants'
+import { AMA_QUESTIONS_COLLECTION, IS_PROD } from '~/graphql/constants'
 import { db } from '~/graphql/services/firebase'
 import { emailMe } from '~/graphql/services/postmark'
 import fetch from 'node-fetch'
@@ -9,12 +9,11 @@ import {
  MutationEditAmaQuestionArgs,
  MutationTranscribeAudioArgs,
 } from '~/graphql/types.generated'
-
-const COLLECTION = IS_PROD ? 'questions' : 'questions-dev'
+import { sanitizeAmaDocument } from '~/graphql/helpers/sanitizeAmaDocument'
 
 export async function editAMAQuestion(_, args: MutationEditAmaQuestionArgs) {
  const { id, question, answer, status, audioWaveform } = args
- const docRef = db.collection(COLLECTION).doc(id)
+ const docRef = db.collection(AMA_QUESTIONS_COLLECTION).doc(id)
  await docRef.update({
  question,
  answer,
@@ -39,7 +38,7 @@ export async function addAMAQuestion(
  })
 
  return await db
- .collection(COLLECTION)
+ .collection(AMA_QUESTIONS_COLLECTION)
  .add({
  question,
  answer: null,
@@ -55,12 +54,12 @@ export async function deleteAMAQuestion(
  _,
  { id }: MutationDeleteAmaQuestionArgs
 ) {
- const docRef = db.collection(COLLECTION).doc(id)
+ const docRef = db.collection(AMA_QUESTIONS_COLLECTION).doc(id)
  return await docRef.delete().then(() => true)
 }
 
 export async function addAMAReaction(_, { id }) {
- const docRef = db.collection(COLLECTION).doc(id)
+ const docRef = db.collection(AMA_QUESTIONS_COLLECTION).doc(id)
  const doc = await docRef.get().then((doc) => doc.data())
 
  const count = doc.reactions ? doc.reactions + 1 : 1
@@ -70,15 +69,13 @@ export async function addAMAReaction(_, { id }) {
  })
 
  const res = await docRef.get().then((doc) => doc.data())
- const createdAt = res.createdAt.toDate()
- const updatedAt = res.updatedAt.toDate()
- return { ...res, createdAt, updatedAt, id }
+ const sanitizedAmaDocument = await sanitizeAmaDocument(doc, id)
+ return { ...res, id, ...sanitizedAmaDocument }
 }
 
 export async function addAMAAudioPlay(_, { id }) {
- const docRef = db.collection(COLLECTION).doc(id)
+ const docRef = db.collection(AMA_QUESTIONS_COLLECTION).doc(id)
  const doc = await docRef.get().then((doc) => doc.data())
-
  const count = doc.playCount ? doc.playCount + 1 : 1
 
  await docRef.update({

src/graphql/resolvers/queries/ama/index.ts

@@ -7,10 +7,11 @@ import {
  QueryTranscriptionArgs,
 } from '~/graphql/types.generated'
 import {
+ AMA_QUESTIONS_COLLECTION,
  AUDIO_STORAGE_BUCKET,
- IS_PROD,
  PAGINATION_AMOUNT,
 } from '~/graphql/constants'
+import { sanitizeAmaDocument } from '~/graphql/helpers/sanitizeAmaDocument'
 
 async function fetchAudioPlaybackUrl(id) {
  const bucket = storage.bucket(AUDIO_STORAGE_BUCKET)
@@ -33,15 +34,14 @@ export async function getAMAQuestions(
  args: QueryAmaQuestionsArgs,
  { isMe }
 ) {
- const COLLECTION = IS_PROD ? 'questions' : 'questions-dev'
  const { skip = 0, status = 'ANSWERED' } = args
 
  if (status === 'PENDING' && !isMe) return []
 
  const data = []
 
  async function processQuestions() {
- let collection = db.collection(COLLECTION)
+ let collection = db.collection(AMA_QUESTIONS_COLLECTION)
  let questionsRef = await collection
  .where('status', '==', status)
  .orderBy('updatedAt', 'desc')
@@ -51,20 +51,13 @@ export async function getAMAQuestions(
  for (let question of questionsRef.docs) {
  const d = question.data()
  const id = question.id
- const createdAt = d.createdAt.toDate()
- const updatedAt = d.updatedAt.toDate()
- const audioUrl =
- d.audioWaveform?.length > 0 ? await fetchAudioPlaybackUrl(id) : null
- const audioPlayCount = d.audioPlayCount || 0
- const audioWaveform = d.audioWaveform || []
+
+ const sanitizedAmaDocument = await sanitizeAmaDocument(d, id)
+
  const record = {
  ...d,
  id,
- createdAt,
- updatedAt,
- audioUrl,
- audioPlayCount,
- audioWaveform,
+ ...sanitizedAmaDocument,
  } as Ama
 
  data.push(record)

src/pages/ama.tsx

@@ -20,7 +20,7 @@ function About() {
  />
 
  <CenteredColumn>
- <div className=" space-y-8">
+ <div className="space-y-8">
  <Link href="/projects" passHref>
  <a className="leading-snug text-tertiary hover:text-gray-1000 dark:hover:text-gray-100">
  &larr; Projects
@@ -37,7 +37,7 @@ function About() {
  )
 }
 
-export async function getStaticProps() {
+export async function getServerSideProps() {
  const client = await initApolloClient({})
  await client.query({
  query: GET_AMA_QUESTIONS,
@@ -55,7 +55,6 @@ export async function getStaticProps() {
  */
  const apolloStaticCache = client.cache.extract()
  return {
- revalidate: 60 * 60,
  props: {
  apolloStaticCache,
  },