Merge pull request #3125 from nichwall/changelog_link

Changelog Pub Date

client/components/app/SideRail.vue

@@ -121,7 +121,7 @@
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
     </div>
 
-    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
+    <modals-changelog-view-modal v-model="showChangelogModal" :versionData="versionData" />
   </div>
 </template>
 
@@ -219,9 +219,6 @@ export default {
     githubTagUrl() {
       return this.versionData.githubTagUrl
     },
-    currentVersionChangelog() {
-      return this.versionData.currentVersionChangelog || 'No Changelog Available'
-    },
     streamLibraryItem() {
       return this.$store.state.streamLibraryItem
     },
@@ -245,4 +242,4 @@ export default {
 #siderail-buttons-container.player-open {
   max-height: calc(100vh - 64px - 48px - 160px);
 }
-</style>
+</style>

client/components/modals/changelog/ViewModal.vue

@@ -6,7 +6,9 @@
       </div>
     </template>
     <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
-      <p class="text-xl font-bold pb-4">Changelog v{{ currentVersionNumber }}</p>
+      <p class="text-xl font-bold pb-4">
+        Changelog <a :href="currentTagUrl" target="_blank" class="hover:underline">v{{ currentVersionNumber }}</a> ({{ currentVersionPubDate }})
+      </p>
       <div class="custom-text" v-html="compiledMarkedown" />
     </div>
   </modals-modal>
@@ -18,17 +20,9 @@ import { marked } from '@/static/libs/marked/index.js'
 export default {
   props: {
     value: Boolean,
-    changelog: String,
-    currentVersion: String
-  },
-  watch: {
-    show: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
+    versionData: {
+      type: Object,
+      default: () => {}
     }
   },
   computed: {
@@ -40,24 +34,35 @@ export default {
         this.$emit('input', val)
       }
     },
+    dateFormat() {
+      return this.$store.state.serverSettings.dateFormat
+    },
+    changelog() {
+      return this.versionData?.currentVersionChangelog || 'No Changelog Available'
+    },
     compiledMarkedown() {
       return marked.parse(this.changelog, { gfm: true, breaks: true })
     },
+    currentVersionPubDate() {
+      if (!this.versionData?.currentVersionPubDate) return 'Unknown release date'
+      return `${this.$formatDate(this.versionData.currentVersionPubDate, this.dateFormat)}`
+    },
+    currentTagUrl() {
+      return this.versionData?.currentTagUrl
+    },
     currentVersionNumber() {
-      return this.currentVersion
+      return this.$config.version
     }
   },
-  methods: {
-    init() {}
-  },
+  methods: {},
   mounted() {}
 }
 </script>
 
 <style scoped>
 /*
 1. we need to manually define styles to apply to the parsed markdown elements,
-since we don't have access to the actual elements in this component 
+since we don't have access to the actual elements in this component
 
 2. v-deep allows these to take effect on the content passed in to the v-html in the div above
 */
@@ -70,4 +75,4 @@ since we don't have access to the actual elements in this component
 .custom-text ::v-deep > ul {
   @apply list-disc list-inside pb-4;
 }
-</style>
+</style>

client/plugins/version.js

@@ -49,11 +49,11 @@ export async function checkForUpdate() {
         }
 
         if (verObj.version == currVerObj.version) {
+          currVerObj.pubdate = new Date(release.published_at)
           currVerObj.changelog = release.body
         }
       })
     }
-
   })
   if (!largestVer) {
     console.error('No valid version tags to compare with')
@@ -65,6 +65,8 @@ export async function checkForUpdate() {
     latestVersion: largestVer.version,
     githubTagUrl: `https://github.com/advplyr/audiobookshelf/releases/tag/v${largestVer.version}`,
     currentVersion: currVerObj.version,
+    currentTagUrl: `https://github.com/advplyr/audiobookshelf/releases/tag/v${currVerObj.version}`,
+    currentVersionPubDate: currVerObj.pubdate,
     currentVersionChangelog: currVerObj.changelog
   }
-}
+}