-
+
+
+
+
-
+
+
+ ![]()
+
+
+
+
-
- {{ countdown }}
-
-
-
{{ data.format }}
- {{ data.averageScore }}%
+
+
-
-
+
+
+
+
+
+
+
+
+
+ {{ nextEpisodeIn }}
+ {{ countdown }}
+
+ {{ countdown }}
+
+
+
+ {{ this.i18n(`ENUM_${data.format}`) }}
+
+ •
+ {{ duration }}
+
+
+
+
+
+
+
+
+
- {{ genre }} ,
+
-
-
-
-
-
-
+
@@ -59,9 +98,11 @@ import {
} from 'vue-property-decorator';
import { State } from 'vuex-class';
import * as Enum from '@/utils/Enum';
+import Color from '@/utils/Color';
import MixinI18n from '@/mixins/I18n';
import MixinSaveActivity from '@/mixins/Activity';
+
@Component
export default class Media extends Mixins(Vue, MixinI18n, MixinSaveActivity) {
@State('settings') settings!: ALSearch.Settings;
@@ -71,15 +112,79 @@ export default class Media extends Mixins(Vue, MixinI18n, MixinSaveActivity) {
/** Search types. */
types = Enum.SearchType;
+ /**
+ * Get media colors overlay.
+ */
+ get mediaColors(): object {
+ return Color.getMediaCardColors(this.data!.coverImage.color);
+ }
+
+ /**
+ * Is the media an anime and currently airing?
+ */
+ get airing(): boolean {
+ return this.data!.type === this.types.ANIME && this.data!.status === Enum.Status.RELEASING;
+ }
+
+ /**
+ * Return countdown pre content.
+ */
+ get nextEpisodeIn(): string {
+ return this.data!.nextAiringEpisode
+ ? this.i18n('S_NextAiringEpisodeIn', `${this.data!.nextAiringEpisode.episode}`)
+ : '';
+ }
+
/**
* Return countdown content.
*/
get countdown(): string {
let str = '';
- if (this.data!.nextAiringEpisode) str = `Ep ${this.data!.nextAiringEpisode.episode} - ${this.timeUntilAiring()}`;
- else if (this.data!.type === this.types.MANGA) str = this.startDate();
- else if (this.data!.season) str = `${this.i18n(`ENUM_${this.data!.season}`)} ${this.data!.startDate.year}`;
+ // Cases for anime.
+ if (this.data!.type === this.types.ANIME) {
+ // Next airing episode for ongoing anime.
+ if (this.data!.nextAiringEpisode) str = this.timeUntilAiring();
+ // Airing season for finished anime.
+ else if (this.data!.season) str = `${this.i18n(`ENUM_${this.data!.season}`)} ${this.data!.startDate.year}`;
+ }
+
+ // If nothing, fallback to date or status.
+ if (!str) str = this.datesOrStatus();
+
+ return str;
+ }
+
+ /**
+ * Return duration content.
+ */
+ get duration(): string {
+ let str = '';
+
+ const episodesFormats = [
+ Enum.Format.ONA,
+ Enum.Format.OVA,
+ Enum.Format.SPECIAL,
+ Enum.Format.TV,
+ Enum.Format.TV_SHORT,
+ ];
+
+ // Cases for anime.
+ if (this.data!.type === this.types.ANIME) {
+ // Display episode count for valid formats.
+ if (this.data!.format && episodesFormats.includes(this.data!.format) && this.data!.episodes) {
+ str = `${this.data!.episodes} ${this.i18n('S_Episodes')}`;
+ }
+ }
+
+ // Cases for manga.
+ if (this.data!.type === this.types.MANGA) {
+ // If chapter count.
+ if (this.data!.chapters) str = this.chapterCount();
+ }
+
+ // If nothing and duration is defined.
+ if (!str && this.data!.duration) str = this.durationTime();
return str;
}
@@ -111,33 +216,59 @@ export default class Media extends Mixins(Vue, MixinI18n, MixinSaveActivity) {
}
/**
- * Return formatted start date.
+ * Return formatted start and end dates or status.
*/
- startDate(): string {
- if (this.data!.startDate.year && this.data!.startDate.month && this.data!.startDate.day) {
- const date = new Date(
- this.data!.startDate.year,
- this.data!.startDate.month,
- this.data!.startDate.day,
- );
-
- return date.toLocaleDateString('en-US', {
- year: 'numeric',
- month: 'long',
- day: 'numeric',
- });
+ datesOrStatus(): string {
+ // If ongoing media.
+ if (this.data!.status === Enum.Status.RELEASING && this.data!.startDate.year) {
+ return this.data!.type === this.types.ANIME
+ ? this.i18n('S_ReleasingSince', `${this.data!.startDate.year}`)
+ : this.i18n('S_PublishingSince', `${this.data!.startDate.year}`);
+ }
+
+ // Else use dates.
+ let str = '';
+
+ if (this.data!.startDate.year) str += this.data!.startDate.year;
+ if (this.data!.endDate.year && this.data!.startDate.year !== this.data!.endDate.year) {
+ if (str) str += ' - ';
+
+ str += this.data!.endDate.year;
}
- return '';
+ // Fallback to status if nothing worked.
+ if (!str) str = this.i18n(`ENUM_${this.data!.status}`);
+
+ return str;
+ }
+
+ /**
+ * Return formatted duration time.
+ */
+ durationTime(): string {
+ const duration = this.data!.duration!;
+
+ const hours = Math.floor(duration / 60);
+ const minutes = Math.floor(duration % 60);
+
+ let str = '';
+ if (minutes) str = ` ${minutes}m`;
+ if (hours) str = `${hours}h${str}`;
+
+ return str.trim();
+ }
+
+ /**
+ * Return chapters count.
+ */
+ chapterCount(): string {
+ return `${this.data!.chapters} ${this.i18n('S_Chapters')}`;
}
handleClick(e: Event): void {
e.stopPropagation();
e.preventDefault();
- // Return if target click is actually studio.
- if (e.currentTarget !== e.target) return;
-
if (this.settings.activity.visitedPages) {
const activity: ALSearch.Activity.Activity = {
type: Enum.ActivityType.VISITED_PAGE,
@@ -162,14 +293,97 @@ export default class Media extends Mixins(Vue, MixinI18n, MixinSaveActivity) {
diff --git a/src/components/search/cards/Person.vue b/src/components/search/cards/Person.vue
index c279fe8..da3950f 100644
--- a/src/components/search/cards/Person.vue
+++ b/src/components/search/cards/Person.vue
@@ -1,26 +1,20 @@
-
+
+
+
-
-
-
-
+
+
+ ![]()
+
+ {{ data.name.full }}
+
-
-
+
+
@@ -47,19 +41,85 @@ export default class Person extends Mixins(Vue, MixinI18n) {
diff --git a/src/main.ts b/src/main.ts
index 31e5f58..f21f1af 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,7 @@ import {
faTimes,
faUserCircle,
} from '@fortawesome/free-solid-svg-icons';
+import { faMeh, faFrown, faSmile } from '@fortawesome/free-regular-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import Notifications from 'vue-notification';
@@ -25,7 +26,10 @@ library.add(
faChevronLeft,
faCogs,
faExternalLinkAlt,
+ faFrown,
+ faMeh,
faSearch,
+ faSmile,
faTimes,
faUserCircle,
// Brands icons.
diff --git a/src/shims-anisearch.d.ts b/src/shims-anisearch.d.ts
index 0a7323d..fe34520 100644
--- a/src/shims-anisearch.d.ts
+++ b/src/shims-anisearch.d.ts
@@ -90,8 +90,11 @@ export namespace AniList {
day: number | null;
};
season: Enum.SearchSeason | null;
- format: string | null;
+ format: Enum.Format | null;
status: string | null;
+ chapters: number | null;
+ episodes: number | null;
+ duration: number | null;
genres: string[];
averageScore: number | null;
popularity: number | null;
diff --git a/src/utils/Color.ts b/src/utils/Color.ts
new file mode 100644
index 0000000..6642364
--- /dev/null
+++ b/src/utils/Color.ts
@@ -0,0 +1,381 @@
+const Color = require('color'); // eslint-disable-line
+
+const colors = [
+ {
+ background: {
+ r: 239,
+ g: 92,
+ b: 92,
+ },
+ text: {
+ r: 255,
+ g: 244,
+ b: 247,
+ },
+ },
+ {
+ background: {
+ r: 253,
+ g: 54,
+ b: 78,
+ },
+ text: {
+ r: 255,
+ g: 235,
+ b: 235,
+ },
+ },
+ {
+ background: {
+ r: 198,
+ g: 34,
+ b: 63,
+ },
+ text: {
+ r: 255,
+ g: 241,
+ b: 242,
+ },
+ },
+ {
+ background: {
+ r: 250,
+ g: 169,
+ b: 202,
+ },
+ text: {
+ r: 107,
+ g: 37,
+ b: 66,
+ },
+ },
+ {
+ background: {
+ r: 227,
+ g: 79,
+ b: 133,
+ },
+ text: {
+ r: 255,
+ g: 226,
+ b: 237,
+ },
+ },
+ {
+ background: {
+ r: 205,
+ g: 185,
+ b: 241,
+ },
+ text: {
+ r: 60,
+ g: 17,
+ b: 121,
+ },
+ },
+ {
+ background: {
+ r: 146,
+ g: 98,
+ b: 233,
+ },
+ text: {
+ r: 235,
+ g: 222,
+ b: 254,
+ },
+ },
+ {
+ background: {
+ r: 118,
+ g: 0,
+ b: 204,
+ },
+ text: {
+ r: 224,
+ g: 207,
+ b: 255,
+ },
+ },
+ {
+ background: {
+ r: 157,
+ g: 185,
+ b: 255,
+ },
+ text: {
+ r: 40,
+ g: 42,
+ b: 123,
+ },
+ },
+ {
+ background: {
+ r: 78,
+ g: 96,
+ b: 182,
+ },
+ text: {
+ r: 222,
+ g: 227,
+ b: 255,
+ },
+ },
+ {
+ background: {
+ r: 47,
+ g: 54,
+ b: 139,
+ },
+ text: {
+ r: 217,
+ g: 228,
+ b: 255,
+ },
+ },
+ {
+ background: {
+ r: 190,
+ g: 227,
+ b: 249,
+ },
+ text: {
+ r: 39,
+ g: 58,
+ b: 75,
+ },
+ },
+ {
+ background: {
+ r: 109,
+ g: 200,
+ b: 241,
+ },
+ text: {
+ r: 28,
+ g: 74,
+ b: 117,
+ },
+ },
+ {
+ background: {
+ r: 54,
+ g: 130,
+ b: 234,
+ },
+ text: {
+ r: 242,
+ g: 249,
+ b: 253,
+ },
+ },
+ {
+ background: {
+ r: 20,
+ g: 64,
+ b: 157,
+ },
+ text: {
+ r: 222,
+ g: 240,
+ b: 255,
+ },
+ },
+ {
+ background: {
+ r: 118,
+ g: 243,
+ b: 233,
+ },
+ text: {
+ r: 27,
+ g: 96,
+ b: 109,
+ },
+ },
+ {
+ background: {
+ r: 1,
+ g: 196,
+ b: 215,
+ },
+ text: {
+ r: 239,
+ g: 253,
+ b: 255,
+ },
+ },
+ {
+ background: {
+ r: 25,
+ g: 77,
+ b: 113,
+ },
+ text: {
+ r: 211,
+ g: 237,
+ b: 252,
+ },
+ },
+ {
+ background: {
+ r: 148,
+ g: 255,
+ b: 169,
+ },
+ text: {
+ r: 37,
+ g: 100,
+ b: 46,
+ },
+ },
+ {
+ background: {
+ r: 155,
+ g: 229,
+ b: 61,
+ },
+ text: {
+ r: 37,
+ g: 84,
+ b: 20,
+ },
+ },
+ {
+ background: {
+ r: 38,
+ g: 127,
+ b: 25,
+ },
+ text: {
+ r: 240,
+ g: 248,
+ b: 232,
+ },
+ },
+ {
+ background: {
+ r: 255,
+ g: 242,
+ b: 126,
+ },
+ text: {
+ r: 174,
+ g: 78,
+ b: 24,
+ },
+ },
+ {
+ background: {
+ r: 236,
+ g: 182,
+ b: 44,
+ },
+ text: {
+ r: 136,
+ g: 43,
+ b: 15,
+ },
+ },
+ {
+ background: {
+ r: 136,
+ g: 43,
+ b: 15,
+ },
+ text: {
+ r: 254,
+ g: 244,
+ b: 196,
+ },
+ },
+ {
+ background: {
+ r: 225,
+ g: 214,
+ b: 160,
+ },
+ text: {
+ r: 76,
+ g: 64,
+ b: 35,
+ },
+ },
+ {
+ background: {
+ r: 242,
+ g: 135,
+ b: 13,
+ },
+ text: {
+ r: 94,
+ g: 43,
+ b: 12,
+ },
+ },
+ {
+ background: {
+ r: 243,
+ g: 84,
+ b: 40,
+ },
+ text: {
+ r: 255,
+ g: 232,
+ b: 224,
+ },
+ },
+];
+
+/**
+ * Return color css variables for a Media card.
+ */
+function getMediaCardColors(c: string | null): object {
+ const defaultColors = {
+ '--media-text': 'hsl(202,57%,40%)',
+ '--media-background': 'hsl(202,57%,89%)',
+ '--media-background-text': 'hsl(202,57%,25%)',
+ '--media-overlay-text': 'hsl(202,80%,70%)',
+ };
+
+ // If not color is given, return default ones.
+ if (!c) return defaultColors;
+
+ // Try to get base color in list from given color.
+ const mediaColor = Color(c);
+ let baseColor: any = null;
+ let t = 1 / 0;
+
+ colors.forEach((color) => {
+ const powed = (mediaColor.red() - color.background.r) ** 2
+ + (mediaColor.green() - color.background.g) ** 2
+ + (mediaColor.blue() - color.background.b) ** 2;
+
+ if (powed < t) {
+ t = powed;
+ baseColor = color;
+ }
+ });
+
+ if (!baseColor) return defaultColors;
+
+ // Base color was found, we use it to generate variants.
+ const backgroundColor = Color(baseColor!.background);
+ const textColor = Color(baseColor!.text);
+ const overlayTextColor = Color({
+ h: textColor.hsl().hue(),
+ l: 70,
+ s: 80,
+ });
+
+ return {
+ '--media-color': mediaColor.hsl().string(),
+ '--media-background': backgroundColor.hsl().string(),
+ '--media-background-text': textColor.hsl().string(),
+ '--media-overlay-text': overlayTextColor.hsl().string(),
+ };
+}
+
+export default {
+ getMediaCardColors,
+};
diff --git a/src/utils/Enum.ts b/src/utils/Enum.ts
index 80d71ad..42745ea 100644
--- a/src/utils/Enum.ts
+++ b/src/utils/Enum.ts
@@ -47,6 +47,32 @@ export enum ResponseTypeKeys {
STAFF = 'staff',
}
+/**
+ * Media format.
+ */
+export enum Format {
+ MANGA = 'MANGA',
+ MOVIE = 'MOVIE',
+ MUSIC = 'MUSIC',
+ NOVEL = 'NOVEL',
+ ONA = 'ONA',
+ ONE_SHOT = 'ONE_SHOT',
+ OVA = 'OVA',
+ SPECIAL = 'SPECIAL',
+ TV = 'TV',
+ TV_SHORT = 'TV_SHORT',
+}
+
+/**
+ * Media status.
+ */
+export enum Status {
+ CANCELED = 'CANCELED',
+ FINISHED = 'FINISHED',
+ NOT_YET_RELEASED = 'NOT_YET_RELEASED',
+ RELEASING = 'RELEASING',
+}
+
/**
* Web integration button X position.
*/