albums: show better title

Signed-off-by: Varun Patil <radialapps@gmail.com>

lib/Controller/PublicAlbumController.php

@@ -91,6 +91,9 @@ class PublicAlbumController extends Controller
         // Scripts
         Util::addScript($this->appName, 'memories-main');
 
+        // Share info
+        $this->initialState->provideInitialState('share_title', $album['name']);
+
         // Render main template
         $response = new PublicTemplateResponse($this->appName, 'main', PageController::getMainParams());
         $response->setHeaderTitle($album['name']);

lib/Controller/PublicController.php

@@ -119,6 +119,10 @@ class PublicController extends AuthPublicShareController
         $node = $share->getNode();
         if ($node instanceof \OCP\Files\File) {
             $this->initialState->provideInitialState('single_item', $this->getSingleItemInitialState($node));
+        } else if ($node instanceof \OCP\Files\Folder) {
+            $this->initialState->provideInitialState('share_title', $node->getName());
+        } else {
+            throw new NotFoundException();
         }
 
         // Add OG metadata

src/components/Timeline.vue

@@ -32,7 +32,7 @@
           <div class="mobile-header-top-gap"></div>
 
           <!-- Header -->
-          <div class="dynamic-top-matter" v-show="!$refs.topmatter.type && list.length && viewName">
+          <div class="dynamic-top-matter" v-show="list.length && viewName">
             <div class="text">{{ viewName }}</div>
           </div>
 
@@ -106,6 +106,7 @@ import { defineComponent } from 'vue';
 import axios from '@nextcloud/axios';
 import { showError } from '@nextcloud/dialogs';
 import { subscribe, unsubscribe } from '@nextcloud/event-bus';
+import { loadState } from '@nextcloud/initial-state';
 
 import { getLayout } from '../services/Layout';
 import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType } from '../types';
@@ -122,6 +123,7 @@ import EmptyContent from './top-matter/EmptyContent.vue';
 import OnThisDay from './top-matter/OnThisDay.vue';
 import TopMatter from './top-matter/TopMatter.vue';
 
+import * as PublicShareHeader from './top-matter/PublicShareHeader';
 import * as dav from '../services/DavRequests';
 import * as utils from '../services/Utils';
 import * as strings from '../services/strings';
@@ -238,6 +240,21 @@ export default defineComponent({
 
     /** Get view name for dynamic top matter */
     viewName(): string {
+      // Show album name for album view
+      if (this.routeIsAlbums) {
+        return this.$route.params.name || '';
+      }
+
+      // Show share name for public shares
+      if (this.routeIsPublic) {
+        return PublicShareHeader.title;
+      }
+
+      // Only static top matter for these routes
+      if (this.routeIsTags || this.routeIsPeople || this.routeIsPlaces) {
+        return '';
+      }
+
       return strings.viewName(this.$route.name);
     },
 
@@ -1347,7 +1364,7 @@ export default defineComponent({
       padding: 25px 10px 10px 10px;
       position: relative;
       display: block;
-      line-height: 1.1em;
+      line-height: 1.2em;
 
       @media (max-width: 768px) {
         font-size: 1.8em;

src/components/top-matter/AlbumTopMatter.vue

@@ -157,7 +157,8 @@ export default defineComponent({
     },
 
     name(): string {
-      return <string>this.$route.params.name || this.t('memories', 'Albums');
+      // Album name is displayed in the dynamic top matter (timeline)
+      return this.$route.params.name ? '' : this.t('memories', 'Albums');
     },
   },
 

src/components/top-matter/PublicShareHeader.ts

@@ -0,0 +1,4 @@
+import { loadState } from '@nextcloud/initial-state';
+
+// Shown in dynamic top matter (Timeline::viewName)
+export const title = loadState('memories', 'share_title', '');

src/mixins/GlobalMixin.ts

@@ -16,17 +16,23 @@ export default defineComponent({
     routeIsBase(): boolean {
       return this.$route.name === 'timeline';
     },
+    routeIsFolders(): boolean {
+      return this.$route.name === 'folders';
+    },
+    routeIsAlbums(): boolean {
+      return this.$route.name === 'albums';
+    },
     routeIsPeople(): boolean {
       return ['recognize', 'facerecognition'].includes(<string>this.$route.name);
     },
     routeIsArchive(): boolean {
       return this.$route.name === 'archive';
     },
-    routeIsFolders(): boolean {
-      return this.$route.name === 'folders';
+    routeIsPlaces(): boolean {
+      return this.$route.name === 'places';
     },
-    routeIsAlbums(): boolean {
-      return this.$route.name === 'albums';
+    routeIsTags(): boolean {
+      return this.$route.name === 'tags';
     },
     routeIsPublic(): boolean {
       return this.$route.name?.endsWith('-share') ?? false;

src/vue-globals.d.ts

@@ -12,10 +12,12 @@ declare module 'vue' {
     state_noDownload: boolean;
 
     routeIsBase: boolean;
-    routeIsPeople: boolean;
-    routeIsArchive: boolean;
     routeIsFolders: boolean;
     routeIsAlbums: boolean;
+    routeIsPeople: boolean;
+    routeIsArchive: boolean;
+    routeIsPlaces: boolean;
+    routeIsTags: boolean;
     routeIsPublic: boolean;
   }
 }