Последняя версия с сервера прошлого разработчика

resources/js/Shared/Tabs/ItemMusic.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex">
+    <button class="default">
+      <svg class="w-6 h-6">
+        <use v-show="!listsMusic.playing" xlink:href="#play"></use>
+        <use v-show="listsMusic.playing" xlink:href="#pause"></use>
+      </svg>
+    </button>
+  </div>
+  <div class="flex flex-1 text-sm text-gray-light">
+    {{ listsMusic.name }}
+  </div>
+  <div ref="favplayer" class="text-sm text-gray-light">
+    <span v-show="!listsMusic.playing">{{ listsMusic.time }}</span>
+    <span v-show="listsMusic.playing">{{ seek }}</span>
+  </div>
+</template>
+<script>
+import { ref, watch } from 'vue'
+import { useIntersectionObserver } from '@/includes/composables'
+
+export default {
+    props: {
+        listsMusic: Object,
+        seek: String,
+    },
+
+    setup() {
+        const containerRef = ref(null)
+        const { isIntersecting } = useIntersectionObserver(
+            containerRef,
+            {},
+            showDetail
+        )
+        const showDetail = (entry) => {
+            //console.log(entry)
+        }
+        watch(isIntersecting, (isIntersecting) => {
+            //console.log(isIntersecting)
+        })
+        return {
+            favplayer: containerRef,
+            showDetail,
+        }
+    },
+}
+</script>