feat: better play button

2024-03-20 00:27:15 +09:00
parent f8b3e2a15d
commit 81e8217150
4 changed files with 120 additions and 94 deletions
--- a/1000-hours/.vitepress/theme/components/SpeakWord.scss
+++ b/1000-hours/.vitepress/theme/components/SpeakWord.scss
@@ -2,7 +2,7 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  border-top: 1px solid #d87676;
+  // border-bottom: 1px solid #d87676;
  padding: 8px 0;
  .ctrl {
    display: flex;
@@ -42,25 +42,63 @@

  .play-button {
    border: none;
-    border-radius: 4rem;
-    padding: 0;
+    border-radius: 2px;
+    padding: 0 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 28px;
    cursor: pointer;
    height: 28px;
-    width: 48px;
+    max-width: 48px;
    display: flex;
    align-items: center;
+    position: relative;
+    transition: transform 0.3s ease;
+    .emoji {
+      width: 20px;
+      font-size: 1rem;
+    }
    .icon {
+      position: absolute;
      cursor: pointer;
      opacity: 0.7;
-      height: 14px;
-      width: 14px;
+      width: 12px;
+      height: 12px;
+      padding: 2px;
+      border-radius: 10px;
+      bottom: 0;
+      opacity: 1;
+      right: 0;
+      transform: translateY(-3px);
+    }
+    &.female {
+      .icon {
+        background-color: #d87272;
+      }
+    }
+    &.male {
+      .icon {
+        background-color: #7575d3;
+      }
+    }
+    &:active {
+      animation: pulse 0.3s ease;
+    }
+    &:hover {
+      transform: scale(1.1);
    }
  }
 }
-.speak-word:last-child {
-  border-bottom: 1px solid #d87676;
-}
+// add an active animation to the play button
+@keyframes pulse {
+  0% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
--- a/1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue
+++ b/1000-hours/.vitepress/theme/components/SpeakWordInlineConverter.vue
@@ -12,7 +12,10 @@ watch(() => router.route.data.relativePath, (newVal, oldVal) => {
  }
 }, { immediate: true });

-function buildPlayButton(parent, accent, url) {
+function buildPlayButton(parent, accent, gender, url) {
+  gender = gender || 'male';
+  accent = accent || 'us';
+
  const labelEl = document.createElement('span');
  labelEl.classList.add('accent-label');
  labelEl.innerText = accent.toUpperCase();
@@ -22,37 +25,60 @@ function buildPlayButton(parent, accent, url) {
  audioEl.setAttribute('controls', 'false')
  const iconEl = document.createElement('img');
  iconEl.classList.add('icon');
+  const emojiEl = document.createElement('span');
+  emojiEl.classList.add('emoji');

-  let svg = '/images/speaker-black.svg';
+  let svg = '/images/speaker-white.svg';
+  let iconEmoji = '';
  if (accent === 'uk') {
-    svg = '/images/speaker-brown.svg';
+    iconEmoji = '🇬🇧';
  } else if (accent === 'us') {
-    svg = '/images/speaker-blue.svg';
+    iconEmoji = '🇺🇸';
  }

  iconEl.setAttribute('src', svg)
  iconEl.innerText = accent.toUpperCase();
+  emojiEl.innerText = iconEmoji

  const btnEl = document.createElement('button')
  btnEl.classList.add('play-button')
  btnEl.classList.add(accent);
+  btnEl.classList.add(gender);
  btnEl.addEventListener('click', () => {
    audioEl.play();
  })
  // btnEl.append(labelEl)
+  btnEl.append(emojiEl)
  btnEl.append(iconEl)
  btnEl.append(audioEl)
  parent.append(btnEl)
 }

+function fillDataAudio(el) {
+  let dataAudio = [];
+  dataAudio.push({accent: 'us', gender: '', value: el.getAttribute('data-audio-us') || null})
+  dataAudio.push({accent: 'uk', gender: '', value: el.getAttribute('data-audio-uk') || null})
+  dataAudio.push({accent: 'other', gender: '', value: el.getAttribute('data-audio-other') || null})
+  dataAudio.push({accent: 'us', gender: 'male', value: el.getAttribute('data-audio-us-male') || null})
+  dataAudio.push({accent: 'uk', gender: 'male', value: el.getAttribute('data-audio-uk-male') || null})
+  dataAudio.push({accent: 'other', gender: 'male', value: el.getAttribute('data-audio-other-male') || null})
+  dataAudio.push({accent: 'us', gender: 'female', value: el.getAttribute('data-audio-us-female') || null})
+  dataAudio.push({accent: 'uk', gender: 'female', value: el.getAttribute('data-audio-uk-female') || null})
+  dataAudio.push({accent: 'other', gender: 'female', value: el.getAttribute('data-audio-other-female') || null})
+
+  // remove null item
+  dataAudio = dataAudio.filter((item) => item.value !== null)
+  return dataAudio
+}
+
 function convertToInlineComponent(el) {
  if (el.getAttribute('data-converted')) {
    return;
  }
-  const dataAudioUs = el.getAttribute('data-audio-us')
-  const dataAudioUk = el.getAttribute('data-audio-uk')
-  const dataAudioOther = el.getAttribute('data-audio-other')
-  console.log('inline component', dataAudioUs, dataAudioUk, dataAudioOther)
+
+  // fill dataAudio
+  const dataAudio = fillDataAudio(el);
+  console.log('inline component', dataAudio)

  const wrapperEl = document.createElement('div')
  wrapperEl.classList.add('speak-word-wrapper')
@@ -60,29 +86,39 @@ function convertToInlineComponent(el) {
  canEl.classList.add('speak-word')
  canEl.classList.add('inline')

-  if (dataAudioUk || dataAudioUs || dataAudioOther) {
+  if (dataAudio.length > 0) {
    const ctrlEl = document.createElement('div')
    ctrlEl.classList.add('ctrl')
-    const ctrlPartEl = document.createElement('div')
-    ctrlPartEl.classList.add('ctrl-part')
-    if (dataAudioUs) {
-      buildPlayButton(ctrlPartEl, 'us', dataAudioUs)
+    for (let i = 0; i < dataAudio.length; i += 1) {
+      const audioItem = dataAudio[i];
+      const ctrlPartEl = document.createElement('div')
+      ctrlPartEl.classList.add('ctrl-part')
+      console.log(audioItem);
+      if (audioItem) {
+        buildPlayButton(ctrlPartEl, audioItem.accent, audioItem.gender, audioItem.value)
+      }
+      ctrlEl.append(ctrlPartEl);
    }
-    ctrlEl.append(ctrlPartEl);
+    // const ctrlPartEl = document.createElement('div')
+    // ctrlPartEl.classList.add('ctrl-part')
+    // if (dataAudioUs) {
+    //   buildPlayButton(ctrlPartEl, 'us', dataAudioUs)
+    // }
+    // ctrlEl.append(ctrlPartEl);

-    const ctrlPartEl2 = document.createElement('div')
-    ctrlPartEl2.classList.add('ctrl-part')
-    if (dataAudioUk) {
-      buildPlayButton(ctrlPartEl2, 'uk', dataAudioUk)
-    }
-    ctrlEl.append(ctrlPartEl2);
+    // const ctrlPartEl2 = document.createElement('div')
+    // ctrlPartEl2.classList.add('ctrl-part')
+    // if (dataAudioUk) {
+    //   buildPlayButton(ctrlPartEl2, 'uk', dataAudioUk)
+    // }
+    // ctrlEl.append(ctrlPartEl2);

-    const ctrlPartEl3 = document.createElement('div')
-    ctrlPartEl3.classList.add('ctrl-part')
-    if (dataAudioOther) {
-      buildPlayButton(ctrlPartEl3, 'other', dataAudioOther)
-    }
-    ctrlEl.append(ctrlPartEl3);
+    // const ctrlPartEl3 = document.createElement('div')
+    // ctrlPartEl3.classList.add('ctrl-part')
+    // if (dataAudioOther) {
+    //   buildPlayButton(ctrlPartEl3, 'other', dataAudioOther)
+    // }
+    // ctrlEl.append(ctrlPartEl3);

    canEl.append(ctrlEl)
  }
@@ -107,36 +143,4 @@ function buildSpeakWordInline() {
 </template>

 <style lang="scss">
-@import url(./SpeakWord.scss);
-.speak-word-wrapper {
-  display: inline-block;
-  margin: 0px;
-  vertical-align: middle;
-}
-.speak-word.inline {
-  border: none;
-  display: flex;
-  padding: 0;
-  .word {
-    display: inline-block;
-  }
-  .ctrl-part {
-    .play-button {
-      display: flex;
-      width: 24px;
-      height: 24px;
-      align-items: center;
-      justify-content: center;
-      .icon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-    .accent-label {
-      font-size: 14px;
-      display: inline-block;
-      color: white;
-    }
-  }
-}
 </style>
--- a/1000-hours/.vitepress/theme/layouts/index.vue
+++ b/1000-hours/.vitepress/theme/layouts/index.vue
@@ -18,37 +18,12 @@ const { Layout } = DefaultTheme
  </Layout>
 </template>

-<style lang="scss">
+<style lang="scss" >
@import url(../components/SpeakWord.scss);
 .speak-word-wrapper {
  display: inline-block;
  margin: 0px;
  vertical-align: middle;
 }
-.speak-word.inline {
-  border: none;
-  display: flex;
-  padding: 0;
-  .word {
-    display: inline-block;
-  }
-  .ctrl-part {
-    .play-button {
-      display: flex;
-      width: 24px;
-      height: 24px;
-      align-items: center;
-      justify-content: center;
-      .icon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-    .accent-label {
-      font-size: 14px;
-      display: inline-block;
-      color: white;
-    }
-  }
-}
+
 </style>
--- a/1000-hours/public/images/speaker-white.svg
+++ b/1000-hours/public/images/speaker-white.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="19px" viewBox="0 0 13 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>speaker-white</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="speaker-white" transform="translate(1.3333, 1.2018)" stroke="#ffffff" stroke-width="2">
+            <path d="M10,14.5337013 L10,1.43142985 C10,0.158715564 8.46128571,-0.47867015 7.56128571,0.421286993 L4.70414286,3.27842985 C4.43628571,3.54632985 4.07285714,3.69684414 3.694,3.69684414 L1.42857143,3.69684414 C0.6396,3.69684414 0,4.33644414 0,5.12541556 L0,10.8397013 C0,11.6287013 0.6396,12.2682727 1.42857143,12.2682727 L3.694,12.2682727 C4.07285714,12.2682727 4.43628571,12.4188441 4.70414286,12.6867013 L7.56128571,15.5438441 C8.46128571,16.4438441 10,15.8064156 10,14.5337013 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>