From c18ce332c1a9f40b36318016f235c922a37178c6 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sat, 26 Dec 2020 19:35:47 +0100
Subject: [PATCH] tooltip hover date
---
src/components/MediaHeader.vue | 4 +--
src/components/Table.vue | 10 +++++--
src/views/Browse.vue | 4 +--
src/views/Episode.vue | 55 ++++++++++++++++++++++++++--------
src/views/Show.vue | 4 +--
5 files changed, 57 insertions(+), 20 deletions(-)
diff --git a/src/components/MediaHeader.vue b/src/components/MediaHeader.vue
index d7a38d4..427bb3c 100644
--- a/src/components/MediaHeader.vue
+++ b/src/components/MediaHeader.vue
@@ -30,7 +30,7 @@
<div class="podcastDescription">
<h1>{{ title }}</h1>
<div class="podcastAuthor">
- by <a :href="htmlURL" target="_blank">{{ author }}</a>
+ by <a :href="htmlurl" :target="isshow ? '_blank' : ''">{{ author }}</a>
</div>
<div
v-show="isshow"
@@ -79,7 +79,7 @@ export default {
type: String,
default: '',
},
- htmlURL: {
+ htmlurl: {
type: String,
default: '',
},
diff --git a/src/components/Table.vue b/src/components/Table.vue
index a901428..68d54d4 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -109,7 +109,9 @@
<td
class="dateColumn"
@click="changeRoute(`/browse/show/${episode.podcast_id}/${episode.id}`)">
- {{ readableTime(episode.inserted) }}
+ <span :title="readableDate(episode.inserted)">
+ {{ readableTimeAgo(episode.inserted) }}
+ </span>
</td>
</tr>
</tbody>
@@ -147,7 +149,11 @@ export default {
episodeDescription = episodeDescription.replace(/\n/g, '')
return episodeDescription
},
- readableTime(datetime) {
+ readableDate(datetime) {
+ const date = new Date(datetime)
+ return date.toDateString()
+ },
+ readableTimeAgo(datetime) {
return timeAgo.format(Date.parse(datetime), 'twitter-minute-now')
},
downloadFile(episodeURL) {
diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index b82afbc..187cc43 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -128,7 +128,7 @@ export default {
const vm = this
- let queryURI = 'https://api.fyyd.de/0.2/feature/podcast/hot'
+ let queryURI = this.$apiUrl + '/feature/podcast/hot'
try {
delete axios.defaults.headers.requesttoken
await axios.get(queryURI)
@@ -139,7 +139,7 @@ export default {
showError(t('podcast', 'Could not fetch podcasts from remote API'))
}
- queryURI = 'https://api.fyyd.de/0.2/podcast/latest'
+ queryURI = this.$apiUrl + '/podcast/latest'
try {
delete axios.defaults.headers.requesttoken
await axios.get(queryURI)
diff --git a/src/views/Episode.vue b/src/views/Episode.vue
index d3843c2..c285789 100644
--- a/src/views/Episode.vue
+++ b/src/views/Episode.vue
@@ -21,14 +21,14 @@
-->
<template>
<div>
- <EpisodeEmpty v-show="pageLoading" />
+ <EpisodeEmpty v-show="loading" />
<transition name="fade">
- <div v-show="!pageLoading">
+ <div v-show="!loading">
<MediaHeader
:imgurl="episode.imgURL"
:title="episode.title"
- :author="episode.author"
- :html-url="episode.htmlURL"
+ :author="podcastName"
+ :htmlurl="`#/browse/show/${podcastId}`"
:isshow="false">
<button class="icon-play-white podcastButton button primary new-button">
{{ t('podcast', 'Play episode') }}
@@ -40,7 +40,9 @@
</span>
<span>
<b>Publication date:</b>
- {{ readableDate(episode.pubdate) }}
+ <span :title="readableDate(episode.pubdate)">
+ {{ readableTimeAgo(episode.pubdate) }}
+ </span>
</span>
</div>
</MediaHeader>
@@ -59,7 +61,7 @@
v-for="(chapter, idx) in episode.chapters"
:key="idx">
<td class="timeColumn">
- {{ readableTime(chapter.start) }}
+ {{ readableDuration(chapter.start) }}
</td>
<td class="titleColumn">
{{ chapter.title }}
@@ -94,18 +96,27 @@ export default {
},
data: () => ({
episode: {},
- pageLoading: true,
+ loading: true,
+ episodeId: null,
+ podcastId: null,
+ podcastName: null,
}),
mounted() {
- const episodeId = this.$route.params.episodeId
- this.queryEpisode(episodeId)
+ this.episodeId = this.$route.params.episodeId
+ this.podcastId = this.$route.params.id
+ this.queryEpisode(this.episodeId)
+ this.queryPodcastName(this.podcastId)
},
methods: {
- readableTime(timestamp) {
+ readableDuration(timestamp) {
return timestamp.split('.')[0]
},
readableDate(datetime) {
+ const date = new Date(datetime)
+ return date.toDateString()
+ },
+ readableTimeAgo(datetime) {
return timeAgo.format(Date.parse(datetime), 'twitter-minute-now')
},
@@ -113,7 +124,7 @@ export default {
const vm = this
- const queryURI = 'https://api.fyyd.de/0.2/episode'
+ const queryURI = this.$apiUrl + '/episode'
try {
delete axios.defaults.headers.requesttoken
await axios.get(queryURI, {
@@ -131,7 +142,27 @@ export default {
processPodcast(episode) {
this.episode = episode.data
- this.pageLoading = false
+ this.loading = false
+ },
+
+ async queryPodcastName(podcastId) {
+ const vm = this
+
+ const queryURI = this.$apiUrl + '/podcast'
+ try {
+ delete axios.defaults.headers.requesttoken
+ await axios.get(queryURI, {
+ params: {
+ podcast_id: podcastId,
+ count: 0,
+ },
+ })
+ .then(function(response) {
+ vm.podcastName = response.data.data.title
+ })
+ } catch (error) {
+ showError(t('podcast', 'Could not fetch podcast from remote API'))
+ }
},
},
diff --git a/src/views/Show.vue b/src/views/Show.vue
index a910667..9551cd3 100644
--- a/src/views/Show.vue
+++ b/src/views/Show.vue
@@ -28,7 +28,7 @@
:imgurl="podcast.smallImageURL"
:title="podcast.title"
:author="podcast.author"
- :html-url="podcast.htmlURL"
+ :htmlurl="podcast.htmlURL"
:categories="podcast.categories"
:description="podcast.description"
:isshow="true" />
@@ -131,7 +131,7 @@ export default {
const vm = this
- const queryURI = 'https://api.fyyd.de/0.2/podcast/episodes'
+ const queryURI = this.$apiUrl + '/podcast/episodes'
try {
delete axios.defaults.headers.requesttoken
await axios.get(queryURI, {
--
GitLab