refactor: renamed SongItem to MediaItem

frontend/src/components/Queue.vue

@@ -8,8 +8,8 @@ import { useStationStore } from "@/stores/station";
 import { useManageStationStore } from "@/stores/manageStation";
 import { useUserAuthStore } from "@/stores/userAuth";
 
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const QuickConfirm = defineAsyncComponent(
 	() => import("@/components/QuickConfirm.vue")
@@ -165,7 +165,7 @@ defineEmits(["onChangeTab"]);
 					:disabled="!hasPermission('stations.queue.reposition')"
 				>
 					<template #item="{ element, index }">
-						<song-item
+						<media-item
 							:song="element"
 							:requested-by="true"
 							:requested-type="true"
@@ -212,7 +212,7 @@ defineEmits(["onChangeTab"]);
 									>vertical_align_bottom</i
 								>
 							</template>
-						</song-item>
+						</media-item>
 					</template>
 				</draggable-list>
 			</div>

frontend/src/components/Request.vue

@@ -11,8 +11,8 @@ import { useSearchMusare } from "@/composables/useSearchMusare";
 import { useYoutubeDirect } from "@/composables/useYoutubeDirect";
 import { useSoundcloudDirect } from "@/composables/useSoundcloudDirect";
 
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const SearchQueryItem = defineAsyncComponent(
 	() => import("@/components/SearchQueryItem.vue")
@@ -219,7 +219,7 @@ onMounted(async () => {
 						</p>
 					</div>
 					<div v-if="musareSearch.results.length > 0">
-						<song-item
+						<media-item
 							v-for="song in musareSearch.results"
 							:key="song._id"
 							:song="song"
@@ -252,7 +252,7 @@ onMounted(async () => {
 									>
 								</transition>
 							</template>
-						</song-item>
+						</media-item>
 						<button
 							v-if="musareResultsLeftCount > 0"
 							class="button is-primary load-more-button"

frontend/src/components/modals/ConvertSpotifySongs.vue

@@ -13,8 +13,8 @@ import { useWebsocketsStore } from "@/stores/websockets";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 
 const QuickConfirm = defineAsyncComponent(
@@ -1365,7 +1365,7 @@ onMounted(() => {
 							<div
 								class="convert-table-cell convert-table-cell-left"
 							>
-								<song-item :song="spotifySong">
+								<media-item :song="spotifySong">
 									<template #leftIcon>
 										<a
 											:href="`https://open.spotify.com/track/${
@@ -1380,7 +1380,7 @@ onMounted(() => {
 											></div>
 										</a>
 									</template>
-								</song-item>
+								</media-item>
 								<template v-if="showExtra">
 									<p>
 										Media source:
@@ -1466,7 +1466,7 @@ onMounted(() => {
 												<div
 													class="alternative-song-container"
 												>
-													<song-item
+													<media-item
 														:song="
 															alternativeMediaMap[
 																alternativeMediaSource
@@ -1506,7 +1506,7 @@ onMounted(() => {
 																></div>
 															</a>
 														</template>
-													</song-item>
+													</media-item>
 													<quick-confirm
 														v-if="
 															showReplaceButtonPerAlternative
@@ -1693,7 +1693,7 @@ onMounted(() => {
 										}}
 									</p>
 								</template>
-								<song-item
+								<media-item
 									v-for="spotifyMediaSource in spotifyAlbum.songs"
 									:key="
 										spotifyAlbum.albumId +
@@ -1726,7 +1726,7 @@ onMounted(() => {
 											></div>
 										</a>
 									</template>
-								</song-item>
+								</media-item>
 							</div>
 							<div
 								class="convert-table-cell convert-table-cell-right"
@@ -1896,7 +1896,7 @@ onMounted(() => {
 										}}
 									</p> -->
 								</template>
-								<song-item
+								<media-item
 									v-for="spotifyMediaSource in spotifyArtist.songs"
 									:key="
 										spotifyArtist.artistId +
@@ -1929,7 +1929,7 @@ onMounted(() => {
 											></div>
 										</a>
 									</template>
-								</song-item>
+								</media-item>
 							</div>
 							<div
 								class="convert-table-cell convert-table-cell-right"

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -9,8 +9,8 @@ import { useSpotifyDirect } from "@/composables/useSpotifyDirect";
 import { useConfigStore } from "@/stores/config";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const SearchQueryItem = defineAsyncComponent(
 	() => import("@/components/SearchQueryItem.vue")
@@ -141,7 +141,7 @@ watch(
 				v-if="musareSearch.results.length > 0"
 				class="song-query-results"
 			>
-				<song-item
+				<media-item
 					v-for="(song, index) in musareSearch.results"
 					:key="song._id"
 					:song="song"
@@ -174,7 +174,7 @@ watch(
 							>
 						</transition>
 					</template>
-				</song-item>
+				</media-item>
 
 				<button
 					v-if="resultsLeftCount > 0"

frontend/src/components/modals/EditPlaylist/index.vue

@@ -18,8 +18,8 @@ import { useModalsStore } from "@/stores/modals";
 import utils from "@/utils";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const Settings = defineAsyncComponent(() => import("./Tabs/Settings.vue"));
 const AddSongs = defineAsyncComponent(() => import("./Tabs/AddSongs.vue"));
@@ -440,7 +440,7 @@ onBeforeUnmount(() => {
 							"
 						>
 							<template #item="{ element, index }">
-								<song-item
+								<media-item
 									:song="element"
 									:ref="
 										el =>
@@ -521,7 +521,7 @@ onBeforeUnmount(() => {
 											>vertical_align_bottom</i
 										>
 									</template>
-								</song-item>
+								</media-item>
 							</template>
 						</draggable-list>
 						<p v-else-if="gettingSongs" class="nothing-here-text">

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -7,8 +7,8 @@ import { useEditSongStore } from "@/stores/editSong";
 
 import { useSearchMusare } from "@/composables/useSearchMusare";
 
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 
 const props = defineProps({
@@ -54,7 +54,7 @@ onMounted(async () => {
 			</p>
 		</div>
 		<div v-if="musareSearch.results.length > 0">
-			<song-item
+			<media-item
 				v-for="result in musareSearch.results"
 				:key="result._id"
 				:song="result"

frontend/src/components/modals/EditSong/index.vue

@@ -37,8 +37,8 @@ const SaveButton = defineAsyncComponent(
 const AutoSuggest = defineAsyncComponent(
 	() => import("@/components/AutoSuggest.vue")
 );
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const Discogs = defineAsyncComponent(() => import("./Tabs/Discogs.vue"));
 const ReportsTab = defineAsyncComponent(() => import("./Tabs/Reports.vue"));
@@ -1877,7 +1877,7 @@ onBeforeUnmount(() => {
 										] = el)
 								"
 							>
-								<song-item
+								<media-item
 									:song="data.song"
 									:thumbnail="false"
 									:duration="false"
@@ -1977,7 +1977,7 @@ onBeforeUnmount(() => {
 											flag_circle
 										</i>
 									</template>
-								</song-item>
+								</media-item>
 							</div>
 						</div>
 						<p v-if="filteredItems.length === 0" class="no-items">

frontend/src/components/modals/ImportAlbum.vue

@@ -14,8 +14,8 @@ import { useModalsStore } from "@/stores/modals";
 import { useImportAlbumStore } from "@/stores/importAlbum";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 
 const props = defineProps({
@@ -640,11 +640,11 @@ onBeforeUnmount(() => {
 						:group="`import-album-${modalUuid}-songs`"
 					>
 						<template #item="{ element }">
-							<song-item
+							<media-item
 								:key="`playlist-song-${element.mediaSource}`"
 								:song="element"
 							>
-							</song-item>
+							</media-item>
 						</template>
 					</draggable-list>
 				</div>
@@ -669,11 +669,11 @@ onBeforeUnmount(() => {
 								:group="`import-album-${modalUuid}-songs`"
 							>
 								<template #item="{ element }">
-									<song-item
+									<media-item
 										:key="`track-song-${element.mediaSource}`"
 										:song="element"
 									>
-									</song-item>
+									</media-item>
 								</template>
 							</draggable-list>
 						</div>

frontend/src/components/modals/ImportArtist.vue

@@ -229,11 +229,11 @@ onBeforeUnmount(() => {});
 						:group="`replace-spotify-album-${modalUuid}-songs`"
 					>
 						<template #item="{ element }">
-							<song-item
+							<media-item
 								:key="`playlist-song-${element.mediaSource}`"
 								:song="element"
 							>
-							</song-item>
+							</media-item>
 						</template>
 					</draggable-list>
 				</div> -->
@@ -256,11 +256,11 @@ onBeforeUnmount(() => {});
 								:group="`replace-spotify-album-${modalUuid}-songs`"
 							>
 								<template #item="{ element }">
-									<song-item
+									<media-item
 										:key="`track-song-${element.mediaSource}`"
 										:song="element"
 									>
-									</song-item>
+									</media-item>
 									<button
 										class="button is-primary is-fullwidth"
 										@click="

frontend/src/components/modals/ManageStation/index.vue

@@ -15,8 +15,8 @@ import { useManageStationStore } from "@/stores/manageStation";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const Queue = defineAsyncComponent(() => import("@/components/Queue.vue"));
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const StationInfoBox = defineAsyncComponent(
 	() => import("@/components/StationInfoBox.vue")
@@ -608,7 +608,7 @@ onBeforeUnmount(() => {
 						<h4 class="section-title">Queue</h4>
 					</div>
 					<hr class="section-horizontal-rule" />
-					<song-item
+					<media-item
 						v-if="currentSong.mediaSource"
 						:song="currentSong"
 						:requested-by="true"

frontend/src/components/modals/ReplaceSpotifySongs.vue

@@ -6,8 +6,8 @@ import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 
 const props = defineProps({
@@ -283,11 +283,11 @@ onBeforeUnmount(() => {});
 						:group="`replace-spotify-album-${modalUuid}-songs`"
 					>
 						<template #item="{ element }">
-							<song-item
+							<media-item
 								:key="`playlist-song-${element.mediaSource}`"
 								:song="element"
 							>
-							</song-item>
+							</media-item>
 						</template>
 					</draggable-list>
 				</div>
@@ -311,11 +311,11 @@ onBeforeUnmount(() => {});
 								:group="`replace-spotify-album-${modalUuid}-songs`"
 							>
 								<template #item="{ element }">
-									<song-item
+									<media-item
 										:key="`track-song-${element.mediaSource}`"
 										:song="element"
 									>
-									</song-item>
+									</media-item>
 									<button
 										class="button is-primary is-fullwidth"
 										@click="

frontend/src/components/modals/Report.vue

@@ -6,8 +6,8 @@ import { useModalsStore } from "@/stores/modals";
 import { useForm } from "@/composables/useForm";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const ReportInfoItem = defineAsyncComponent(
 	() => import("@/components/ReportInfoItem.vue")
@@ -260,7 +260,7 @@ onMounted(() => {
 			<template #body>
 				<div class="report-modal-inner-container">
 					<div id="left-part">
-						<song-item
+						<media-item
 							:song="song"
 							:duration="false"
 							:disabled-actions="['report']"

frontend/src/components/modals/ViewReport.vue

@@ -14,8 +14,8 @@ import { useReports } from "@/composables/useReports";
 import { Report } from "@/types/report";
 
 const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const ReportInfoItem = defineAsyncComponent(
 	() => import("@/components/ReportInfoItem.vue")
@@ -157,7 +157,7 @@ onBeforeUnmount(() => {
 						:created-by="report.createdBy"
 					/>
 
-					<song-item
+					<media-item
 						:song="song"
 						:duration="false"
 						:disabled-actions="['report']"

frontend/src/pages/Station/Sidebar/History.vue

@@ -4,7 +4,7 @@ import Toast from "toasters";
 import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useStationStore } from "@/stores/station";
-import SongItem from "@/components/SongItem.vue";
+import MediaItem from "@/components/MediaItem.vue";
 
 const stationStore = useStationStore();
 
@@ -90,7 +90,7 @@ onMounted(async () => {});
 <template>
 	<div class="station-history">
 		<div v-for="historyItem in history" :key="historyItem._id">
-			<SongItem
+			<media-item
 				:song="historyItem.payload.song"
 				:requested-by="true"
 				:header="`Finished playing at ${formatDate(
@@ -127,7 +127,7 @@ onMounted(async () => {});
 						>
 					</transition>
 				</template>
-			</SongItem>
+			</media-item>
 		</div>
 	</div>
 </template>

frontend/src/pages/Station/index.vue

@@ -41,8 +41,8 @@ const StationInfoBox = defineAsyncComponent(
 const AddToPlaylistDropdown = defineAsyncComponent(
 	() => import("@/components/AddToPlaylistDropdown.vue")
 );
-const SongItem = defineAsyncComponent(
-	() => import("@/components/SongItem.vue")
+const MediaItem = defineAsyncComponent(
+	() => import("@/components/MediaItem.vue")
 );
 const Z404 = defineAsyncComponent(() => import("@/pages/404.vue"));
 const StationSidebar = defineAsyncComponent(
@@ -2683,7 +2683,7 @@ onBeforeUnmount(() => {
 								class="quadrant"
 								:class="{ 'no-currently-playing': noSong }"
 							>
-								<song-item
+								<media-item
 									:key="`songItem-currentSong-${currentSong.mediaSource}`"
 									:song="currentSong"
 									:duration="false"
@@ -2697,7 +2697,7 @@ onBeforeUnmount(() => {
 								id="next-up-container"
 								class="quadrant"
 							>
-								<song-item
+								<media-item
 									:key="`songItem-nextSong-${nextSong.mediaSource}`"
 									:song="nextSong"
 									:duration="false"