[WIP] refactor, upgrading yarn

src/render/components/controllers/helpers.ts

@@ -85,23 +85,23 @@ export function animateAudioInput () {
 
 }
 
-/* TODO: animation function that takes in a message ID, and data about the
- * playedback audio. We target the element with the UID and animate it according
- * to the data. - still very hypothetical...
- */
-export function animatePlayback (uid: string, meta: number) {
-    console.log("animating playback!")
-}
-
 // Given index and length of content, return message child status.
-export function calcChild (index: number, len: number) {
-  if (len === 1) {
+export function calcChild (index: number, len: number) 
+{
+  if (len === 1) 
+  {
     return "none";
-  } else if (index === 0) {
+  } 
+  else if (index === 0) 
+  {
     return "first-child";
-  } else if (index === len - 1) {
+  } 
+  else if (index === len - 1) 
+  {
     return "last-child";
-  } else {
+  } 
+  else 
+  {
     return "middle-child";
   }
 }

src/render/components/inputItem.vue

@@ -1,17 +1,13 @@
 <template>
   <div
-    id="inputItem"
-    class="input-item"
+    id="input-item"
     :class="{ playing: recording }"
     :style="{ top: `${elementY}px`, left: `${elementX}px` }"
   >
 
-    <!-- show the profile photo in the center of the input item -->
-    <div>{{ profile.photo }}</div>
-
-    <!-- Recording animation on space bar -->
-    <span v-if="recording" class="play"></span>
-    <span v-if="recording" class="pause"></span>
+    <!-- Show the profile photo in the center of the input item -->
+    <!-- Background shadow animates on record -->
+    <div id="profile">{{ profile.photo }}</div>
 
     <!-- Show text input on key-down -->
     <input
@@ -30,9 +26,7 @@ import { profile } from "@/render/shared/profile";
 import { recording } from "@/render/shared/audio";
 import { animateAudioInput } from "@/render/components/controllers/helpers";
 
-import useTextInputController from
-  "@/render/components/controllers/inputItem.control.text";
-  "@/render/components/controllers/inputItem.control.audio";
+import useTextInputController from "@/render/components/controllers/inputItemControl";
 
 export default defineComponent({
   name: "InputItem",
@@ -67,7 +61,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 
-.input-item {
+
+#input-item {
   position: absolute;
 
   display: flex;
@@ -93,51 +88,6 @@ export default defineComponent({
   cursor: pointer;
 
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
-
-  .play,
-  .pause {
-    z-index: 5;
-    &::before,
-    &::after {
-      -webkit-border-radius: 1000px;
-      -moz-border-radius: 1000px;
-      border-radius: 1000px;
-      content: "";
-      position: absolute;
-      height: 2.35em;
-      width: 2.35em;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      top: 50%;
-      z-index: 0;
-    }
-  }
-  .play::before {
-    box-shadow: 0 0 0 rgba(195, 195, 195, 0);
-  }
-  .pause {
-    opacity: 0;
-  }
-  &.playing {
-    .play {
-      opacity: 0;
-    }
-    .pause {
-      opacity: 1;
-      &::before {
-        -moz-animation: circle1 1.5s infinite ease-in-out;
-        -o-animation: circle1 1.5s infinite ease-in-out;
-        -webkit-animation: circle1 1.5s infinite ease-in-out;
-        animation: circle1 1.5s infinite ease-in-out;
-      }
-      &::after {
-        -moz-animation: circle2 2.2s infinite ease-in-out;
-        -o-animation: circle2 2.2s infinite ease-in-out;
-        -webkit-animation: circle2 2.2s infinite ease-in-out;
-        animation: circle2 2.2s infinite ease-in-out;
-      }
-    }
-  }
 }
 
 .rec-icon {
@@ -160,38 +110,6 @@ export default defineComponent({
   }
 }
 
-@keyframes circle1 {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
-  }
-  25% {
-    box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
-  }
-  50% {
-    box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
-  }
-  75% {
-    box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
-  }
-}
-
-@keyframes circle2 {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
-  }
-  25% {
-    box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
-  }
-  50% {
-    box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
-  }
-  75% {
-    box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
-  }
-}
-
 #textInput {
   position: absolute;
 

src/render/components/message.vue

@@ -28,14 +28,20 @@
  export default defineComponent({
   name: "Message",
 
-  props: ["modifier", "content", "context", "seen", "uid"],
+  props: ["modifier", "content", "context", "seen", "uid", "playback"],
 
   components: {
     Bubble,
     Context
   },
 
-  setup() {
+  setup(props) {
+
+    watch(props.playback, (val, _oldval) =>
+    {
+      boxShadow = val/200;
+    }
+    );
 
     onMounted(() => {
 

src/render/components/messenger.vue

@@ -46,7 +46,7 @@ export default defineComponent({
   setup() {
 
     const onFocus = () => {
-        postWindowFocus({ isFocused: true });
+        postWindowFocus(true);
         postMessage({
           intent: "focus",
           params: { "focus": true },
@@ -56,7 +56,7 @@ export default defineComponent({
     }
 
     const onBlur = () => {
-        postWindowFocus({ isFocused: false });
+        postWindowFocus(false);
         postMessage({
           intent: "focus",
           params: { "focus": false },