inputItem starting position

crash.log

@@ -41,3 +41,5 @@ PID 60328 received SIGSEGV for address: 0x7f900fab4000
 10  CoreAudio                           0x00007fff22129f2a _ZN13HALB_IOThread5EntryEPv + 72
 11  libsystem_pthread.dylib             0x00007fff205fb950 _pthread_start + 224
 12  libsystem_pthread.dylib             0x00007fff205f747b thread_start + 15
+PID 65740 received SIGSEGV for address: 0x7fbddef00000
+0   segfault-handler.node               0x0000000116e6ae60 _ZL16segfault_handleriP9__siginfoPv + 304

src/components/inputItem.vue

@@ -1,7 +1,9 @@
 <template>
-  <div id=inputItem 
+  <div id=inputItem
+    class="player-controls playing"
     :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
-    
+    <span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="play"></span>
+    <span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="pause"></span>
   </div>
 </template>
 
@@ -12,9 +14,10 @@ import { calcSideProximity, calcPosition } from "./helpers"
 
 export default defineComponent({
   name: "InputItem",
-
   setup() {
 
+    let element: HTMLElement | null;
+
     // Cords of inputItem.
     const inputItemX = ref(0)
     const inputItemY = ref(0)
@@ -29,14 +32,9 @@ export default defineComponent({
 
     //---Event Handlers-----------------------------------------------
 
-    // Add an event listener for dragging.
-    const onMouseDown = (e: any) => {
-      window.addEventListener('mousemove', onMouseMove, true);
-    }
-
     // Update the position of inputItem on mouse dragging.
     const onMouseMove = (e: any) => {
-      const element = document.getElementById('inputItem')
+      element = document.getElementById('inputItem')
 
       if (element) {
 
@@ -45,16 +43,21 @@ export default defineComponent({
         inputItemY.value = inputItemRect.top + e.movementY
 
       }
-        
+
+    }
+
+    // Add an event listener for dragging.
+    const onMouseDown = (_e: any) => {
+      window.addEventListener('mousemove', onMouseMove, true);
     }
 
     // Update position references when user is done moving inputItem.
-    const onMouseUp = (e: any) => {
+    const onMouseUp = (_e: any) => {
       window.removeEventListener('mousemove', onMouseMove, true);
 
       const winW = window.innerWidth
       const winH = window.innerHeight
-      
+
       xShort = calcSideProximity(inputItemX.value, winW)
       yShort = calcSideProximity(inputItemY.value, winH)
 
@@ -68,7 +71,7 @@ export default defineComponent({
     }
 
     // Update position of inputItem on windowResize.
-    const onWindowResize = (e: any) => {
+    const onWindowResize = (_e: any) => {
       const winW = window.innerWidth
       const winH = window.innerHeight
 
@@ -80,7 +83,7 @@ export default defineComponent({
     //---------------------------------------------------------------
 
     onMounted(() => {
-      const element = document.getElementById('inputItem')
+      element = document.getElementById('inputItem')
 
       if (element) {
         element.addEventListener('mousedown', onMouseDown, false);
@@ -100,8 +103,15 @@ export default defineComponent({
     });
 
     // Initialize the coordinants.
-    inputItemX.value = 200
+    inputItemX.value = 600 - 38 - 20
-    inputItemY.value = 200
+    inputItemY.value = 500 - 38 - 20
+
+    // remove event listeners
+    onUnmounted(() => {
+        window.removeEventListener('resize', onWindowResize);
+        window.removeEventListener('mouseup', onMouseUp);
+        if (element) element.removeEventListener('mousedown', onMouseDown);
+    })
 
     return {
       inputItemX,
@@ -128,12 +138,101 @@ export default defineComponent({
     top: 200px;
     right: 0px;
 
-    border-style: solid;
-    border-width: 4px;
-    border-color: #C3C3C3;
 
     background-color: white;
-
+    border: 4px solid #C3C3C3;
   }
+ .player-controls {
+   .play, .pause {
+      z-index: 5;  
+      &::before, &::after {
+         -webkit-border-radius: 1000px;
+         -moz-border-radius: 1000px;
+         border-radius: 1000px;
+         content: "";
+         position: absolute;
+         height: 2.4em;
+         width: 2.4em;
+         left: 50%;
+         transform: translate(-50%, -50%); 
+         top: 50%;
+         z-index: 0;
+      }
+   }
+   .play::before {
+      box-shadow: 0 0 0 rgba(255, 255, 255, 0);
+   }
+   .pause {
+      opacity: 0;
+   }
+   &.playing {
+      .play {
+         opacity: 0;
+      }
+      .pause {
+         opacity: 1;
+         &::before {
+            -moz-animation: audio1 1.5s infinite ease-in-out;
+            -o-animation: audio1 1.5s infinite ease-in-out;
+            -webkit-animation: audio1 1.5s infinite ease-in-out;
+            animation: audio1 1.5s infinite ease-in-out;
+         }
+         &::after {
+            -moz-animation: audio2 2.2s infinite ease-in-out;
+            -o-animation: audio2 2.2s infinite ease-in-out;
+            -webkit-animation: audio2 2.2s infinite ease-in-out;
+            animation: audio2 2.2s infinite ease-in-out;
+         }
+      }
+   }
+   &:hover {
+      .play::before {
+         box-shadow: 0 0 12px rgba(255, 238, 125, 0.8);
+      }
+   }
+}
 
-</style>
+.animate-audio1 {
+   -moz-animation: audio1 1.5s infinite ease-in-out;
+   -o-animation: audio1 1.5s infinite ease-in-out;
+   -webkit-animation: audio1 1.5s infinite ease-in-out;
+   animation: audio1 1.5s infinite ease-in-out;
+}
+@keyframes audio1 {
+   0%,
+   100% {
+      box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.4);
+   }
+   25% {
+      box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.15);
+   }
+   50% {
+      box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.55);
+   }
+   75% {
+      box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
+   }
+}
+.animate-audio2 {
+   -moz-animation: audio2 2.2s infinite ease-in-out;
+   -o-animation: audio2 2.2s infinite ease-in-out;
+   -webkit-animation: audio2 2.2s infinite ease-in-out;
+   animation: audio2 2.2s infinite ease-in-out;
+}
+@keyframes audio2 {
+   0%,
+   100% {
+      box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.15);
+   }
+   25% {
+      box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.3);
+   }
+   50% {
+      box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.05);
+   }
+   75% {
+      box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.45);
+   }
+} 
+
+</style>