Titles and avatar links

client/src/components/ChannelResult.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="channel root-result">
 
-    <div class="avatar">
+    <a target="_blank" v-bind:href="channel.url" :title="discoverChannelMessage" class="avatar">
       <img v-if="channel.avatar" v-bind:src="channel.avatar.url" alt="">
       <img v-else src="/img/default-avatar.png" alt="">
-    </div>
+    </a>
 
     <div class="information">
       <div class="title-block">
-        <h5 class="title">{{ channel.displayName }}</h5>
+        <h5 class="title">
+          <a target="_blank" v-bind:href="channel.url" :title="discoverChannelMessage">
+            {{ channel.displayName }}
+          </a>
+        </h5>
 
         <span class="handle">{{ channel.name }}@{{ channel.host }}</span>
       </div>
@@ -23,7 +27,7 @@
 
       <div class="button">
         <a class="button-link" target="_blank" v-bind:href="channel.url">
-          <translate :translate-params="{host: host}">Discover this channel on %{host}</translate>
+          {{ discoverChannelMessage }}
         </a>
       </div>
     </div>
@@ -68,6 +72,10 @@
         const url = this.channel.url
 
         return new URL(url as string).host
+      },
+
+      discoverChannelMessage () {
+        return this.$gettextInterpolate('Discover this channel on %{host}', { host: this.host })
       }
     }
   })

client/src/components/VideoResult.vue

@@ -2,15 +2,17 @@
   <div class="video root-result">
 
     <div class="thumbnail">
-      <div class="img">
+      <a class="img" :title="watchVideoMessage" target="_blank" v-bind:href="video.url">
         <img v-bind:src="getVideoThumbnailUrl()" alt="">
 
         <span class="duration">{{ formattedDuration }}</span>
-      </div>
+      </a>
     </div>
 
     <div class="information">
-      <h5 class="title">{{ video.name }}</h5>
+      <h5 class="title">
+        <a :title="watchVideoMessage" target="_blank" v-bind:href="video.url">{{ video.name }}</a>
+      </h5>
 
       <div class="description">{{ video.description }}</div>
 
@@ -26,6 +28,13 @@
           <actor-miniature type="channel" v-bind:actor="video.channel"></actor-miniature>
         </div>
 
+        <div class="publishedAt">
+          <label v-translate>On</label>
+
+          <div class="value">{{ publicationDate }}</div>
+
+        </div>
+
         <div class="language">
           <label v-translate>Language</label>
 
@@ -41,7 +50,7 @@
 
       <div class="button">
         <a class="button-link" target="_blank" v-bind:href="video.url">
-          <translate :translate-params="{host: host}">Watch the video on %{host}</translate>
+          {{ watchVideoMessage }}
         </a>
       </div>
     </div>
@@ -53,6 +62,7 @@
   @import '../scss/_variables';
 
   .video {
+
     .thumbnail {
       margin-right: 20px;
 
@@ -122,6 +132,14 @@
 
       windowWidth () {
         return window.innerWidth
+      },
+
+      publicationDate () {
+        return new Date(this.video.publishedAt).toLocaleDateString()
+      },
+
+      watchVideoMessage () {
+        return this.$gettextInterpolate('Watch the video on %{host}', { host: this.host })
       }
     },
 

client/src/main.ts

@@ -19,8 +19,7 @@ const availableLanguages = {
 }
 const aliasesLanguages = {
   'en': 'en_US',
-  'fr': 'fr_FR',
-  'pt': 'pt_BR'
+  'fr': 'fr_FR'
 }
 const allLocales = Object.keys(availableLanguages).concat(Object.keys(aliasesLanguages))
 
@@ -79,6 +78,10 @@ p.catch(err => {
       {
         path: '/' + locale,
         component: Search
+      },
+      {
+        path: '/search',
+        component: Search
       }
     ])
   }

client/src/scss/main.scss

@@ -141,6 +141,15 @@ body {
     font-size: 24px;
     font-weight: bold;
     margin: 0 5px 0 0;
+
+    a {
+      color: #000;
+      text-decoration: none;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
   }
 
   .additional-information {