Jelajahi Sumber

Fixed issue where there was no fallback image for stationcard's and others.

KrisVos130 7 tahun lalu
induk
melakukan
ba5d63e407

+ 4 - 0
frontend/app/js/constants.js

@@ -0,0 +1,4 @@
+export const fallbackImage = "/assets/images/notes-transparent.png";
+export default {
+	test: 1,
+}

+ 3 - 1
frontend/app/js/views/Home/StationCard.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from "react";
 
+import { fallbackImage } from "constants.js";
+
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 
@@ -37,7 +39,7 @@ export default class StationCard extends Component {
 		return (
 			<div className="station-card">
 				<div className="station-media">
-					<img src={(station.get("currentSong")) ? station.getIn(["currentSong", "thumbnail"]) : ""}/>
+					<img src={(station.get("currentSong")) ? station.getIn(["currentSong", "thumbnail"]) : ""} onError={function(e) {e.target.src=fallbackImage}}/>
 				</div>
 				<div className="station-body">
 					<h3 className="displayName">{station.get("displayName")}</h3>

+ 4 - 1
frontend/app/js/views/Profile/index.jsx

@@ -4,6 +4,8 @@ import {connect} from "react-redux";
 import { Redirect } from "react-router-dom";
 import {translate} from "react-i18next";
 
+import { fallbackImage } from "constants.js";
+
 import CustomMessages from "components/CustomMessages.jsx";
 
 import io from "io";
@@ -110,7 +112,8 @@ export default class Profile extends Component {
 				<main id="profile">
 					<h1>{user.username}</h1>
 					<CustomMessages onRef={ref => (this.messages = ref)}/>
-					<img src={ user.image }/>
+					<img
+						src={ user.image } onError={function(e) {e.target.src=fallbackImage}}/>
 					<p>{ t("profile:aMemberSince") } {user.joinDatePretty}</p>
 					<div className="profile-details-list">
 						<span>

+ 2 - 1
frontend/app/js/views/Station/Views/Queue/SongItem.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import { formatTime } from "utils";
+import { fallbackImage } from "constants.js";
 
 import { connect } from "react-redux";
 
@@ -44,7 +45,7 @@ export default class SongItem extends Component {
 		return (
 			<li>
 				<div className="left">
-					<img src={ song.get("thumbnail") } onError={function(e) {e.target.src="/assets/images/notes.png"}}/>
+					<img src={ song.get("thumbnail") } onError={function(e) {e.target.src=fallbackImage}}/>
 				</div>
 				<div className="right">
 					<span className="duration">{ formatTime(song.get("duration")) }</span>

+ 2 - 1
frontend/app/js/views/Station/Views/SearchYouTube/SongItem.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import { formatTime } from "utils";
+import { fallbackImage } from "constants.js";
 
 import { connect } from "react-redux";
 
@@ -15,7 +16,7 @@ export default class SongItem extends Component {
 
 		return (
 			<li>
-				<img src={ song.thumbnail }/>
+				<img src={ song.thumbnail } onError={function(e) {e.target.src=fallbackImage}}/>
 				<a href={ song.url } target="_blank">{ song.title }</a>
 				<div>
 					{ /*<span className="duration">{ formatTime(song.duration) }</span>*/ }