Added song thumbnail component to report modal

README.md

@@ -46,7 +46,6 @@ We currently only utilize 1 backend, 1 MongoDB server and 1 Redis server running
     | `domain` | Should be the url where the site will be accessible from,usually `http://localhost` for non-Docker. |
     | `serverDomain` | Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker. |
     | `serverPort` | Should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker. |
-    | `isDocker` | Self-explanatory. Are you using Docker? |
     | `serverPort` | Should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker. |
     | `registrationDisabled` | If set to true, users can't register accounts. |
     | `apis.youtube.key`            | Can be obtained by setting up a [YouTube API Key](https://developers.google.com/youtube/v3/getting-started). You need to use the YouTube Data API v3, and create an API key. |

backend/config/template.json

@@ -7,7 +7,6 @@
 	"serverDomain": "http://localhost:8080",
 	"serverPort": 8080,
 	"registrationDisabled": true,
-	"isDocker": true,
 	"fancyConsole": true,
 	"apis": {
 		"youtube": {

frontend/src/components/modals/Report.vue

@@ -17,12 +17,10 @@
 						<div class="card-content">
 							<article class="media">
 								<figure class="media-left">
-									<p class="image is-64x64">
-										<img
-											:src="previousSong.thumbnail"
-											onerror='this.src="/assets/notes-transparent.png"'
-										/>
-									</p>
+									<song-thumbnail
+										class="image is-64x64"
+										:song="previousSong"
+									/>
 								</figure>
 								<div class="media-content">
 									<div class="content">
@@ -61,12 +59,10 @@
 						<div class="card-content">
 							<article class="media">
 								<figure class="media-left">
-									<p class="image is-64x64">
-										<img
-											:src="currentSong.thumbnail"
-											onerror='this.src="/assets/notes-transparent.png"'
-										/>
-									</p>
+									<song-thumbnail
+										class="image is-64x64"
+										:song="currentSong"
+									/>
 								</figure>
 								<div class="media-content">
 									<div class="content">
@@ -98,12 +94,10 @@
 						<div class="card-content">
 							<article class="media">
 								<figure class="media-left">
-									<p class="image is-64x64">
-										<img
-											:src="localSong.thumbnail"
-											onerror='this.src="/assets/notes-transparent.png"'
-										/>
-									</p>
+									<song-thumbnail
+										class="image is-64x64"
+										:song="localSong"
+									/>
 								</figure>
 								<div class="media-content">
 									<div class="content">
@@ -186,9 +180,10 @@ import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 import Modal from "../Modal.vue";
+import SongThumbnail from "../ui/SongThumbnail.vue";
 
 export default {
-	components: { Modal },
+	components: { Modal, SongThumbnail },
 	data() {
 		return {
 			isPreviousSongActive: false,
@@ -314,6 +309,11 @@ h6 {
 	padding-right: 0;
 }
 
+.thumbnail.image.is-64x64 {
+	min-width: 64px;
+	margin: 0;
+}
+
 .media-content {
 	display: flex;
 	align-items: center;