refactor: converted PlaylistItem to composition API

frontend/src/components/PlaylistItem.vue

@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import utils from "@/utils";
+
+const props = defineProps({
+	playlist: { type: Object, default: () => {} },
+	showOwner: { type: Boolean, default: false }
+});
+
+const sitename = ref("Musare");
+
+const totalLength = playlist => {
+	let length = 0;
+	playlist.songs.forEach(song => {
+		length += song.duration;
+	});
+	return utils.formatTimeLong(length);
+};
+
+const playlistLength = computed(
+	() =>
+		`${totalLength(props.playlist)} • ${props.playlist.songs.length} ${
+			props.playlist.songs.length === 1 ? "song" : "songs"
+		}`
+);
+
+onMounted(async () => {
+	sitename.value = await lofig.get("siteSettings.sitename");
+});
+</script>
+
 <template>
 	<div class="playlist-item universal-item">
 		<slot name="item-icon">
@@ -36,42 +67,6 @@
 	</div>
 </template>
 
-<script>
-import utils from "@/utils";
-
-export default {
-	props: {
-		playlist: { type: Object, default: () => {} },
-		showOwner: { type: Boolean, default: false }
-	},
-	data() {
-		return {
-			utils,
-			sitename: "Musare"
-		};
-	},
-	computed: {
-		playlistLength() {
-			return `${this.totalLength(this.playlist)} • ${
-				this.playlist.songs.length
-			} ${this.playlist.songs.length === 1 ? "song" : "songs"}`;
-		}
-	},
-	async mounted() {
-		this.sitename = await lofig.get("siteSettings.sitename");
-	},
-	methods: {
-		totalLength(playlist) {
-			let length = 0;
-			playlist.songs.forEach(song => {
-				length += song.duration;
-			});
-			return this.utils.formatTimeLong(length);
-		}
-	}
-};
-</script>
-
 <style lang="less" scoped>
 .night-mode {
 	.playlist-item {