From fdd3ad24f8224b074ec419f88ba3b4b2c7cec2c2 Mon Sep 17 00:00:00 2001
From: Joe McGrath <33670767+josephmcg@users.noreply.github.com>
Date: Tue, 28 Dec 2021 05:20:19 +0900
Subject: [PATCH] feat(glyphs): recently used glyphs functionality AP-341
 (#769)

---
 .../EmbeddedLinkContent.vue                   | 32 +++-----
 .../Chat/Embeds/VideoPlayer/VideoPlayer.vue   |  2 +-
 .../views/chat/chatbar/reply/Reply.less       | 79 ++++++++++---------
 .../views/chat/enhancers/glyphs/Glyphs.html   |  1 -
 .../views/chat/enhancers/glyphs/Glyphs.less   |  3 +
 .../chat/enhancers/glyphs/item/Item.html      |  2 +-
 .../views/chat/enhancers/glyphs/item/Item.vue |  8 +-
 .../views/chat/enhancers/glyphs/nav/Nav.html  | 11 +--
 .../views/chat/enhancers/glyphs/nav/Nav.less  |  1 +
 .../views/chat/enhancers/glyphs/nav/Nav.vue   | 19 +++--
 components/views/chat/message/Message.vue     |  3 +-
 config.ts                                     |  8 ++
 locales                                       |  2 +-
 nuxt.config.js                                |  1 +
 store/ui/getters.ts                           |  6 +-
 store/ui/mutations.ts                         | 13 +++
 store/ui/state.ts                             |  3 +-
 store/ui/types.ts                             | 28 ++++---
 18 files changed, 133 insertions(+), 89 deletions(-)

diff --git a/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.vue b/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.vue
index 2670c2190c..e629764696 100644
--- a/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.vue
+++ b/components/ui/Chat/Embeds/EmbeddedLinkContent/EmbeddedLinkContent.vue
@@ -7,8 +7,8 @@ import { IFrameVideoData } from './types'
 export default Vue.extend({
   props: {
     data: {
-        type: String,
-        default: () => {},
+      type: String,
+      default: () => {},
     },
   },
   data() {
@@ -33,9 +33,7 @@ export default Vue.extend({
      */
     parseEmbeddableVideoContentFromText(messagetext: string) {
       // parse incoming text for links
-      const arrayOfLinks = messagetext.match(
-        /(\b(https?):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi
-      )
+      const arrayOfLinks = messagetext.match(this.$Config.regex.link)
 
       // this.settings.embeddedLinks is the global set in the networks panel. Without this, it just shows up as a normal link
       if (arrayOfLinks && this.settings.embeddedLinks === true) {
@@ -44,8 +42,8 @@ export default Vue.extend({
             Parsing Youtube links, if we need to modify the regex do it in here.
           */
           if (
-            link.match(/^https?:\/\/([a-z0-9-]+[.])*youtube.com?/g) ||
-            link.match(/^https?:\/\/([a-z0-9-]+[.])*youtu.be?/g)
+            link.match(this.$Config.regex.youtube) ||
+            link.match(this.$Config.regex.youtubeShort)
           ) {
             let youtubeOutSource: string = ''
             if (link.includes('youtube')) {
@@ -68,7 +66,7 @@ export default Vue.extend({
           /*
             Parsing Vimeo links, if we need to modify the regex do it in here. Right now it parses regular links and links to videos that are in collections
           */
-          if (link.match(/^https?:\/\/([a-z0-9-]+[.])*vimeo.com?/g)) {
+          if (link.match(this.$Config.regex.vimeo)) {
             // vimeo makes their video id potentially available in several different places in the url
             const videoID: string = link
               .split('/')
@@ -83,7 +81,7 @@ export default Vue.extend({
           }
 
           if (
-            link.match(/^https?:\/\/([a-z0-9-]+[.])*facebook.com?/g) &&
+            link.match(this.$Config.regex.facebook) &&
             link.includes('videos')
           ) {
             // hacky workaround to make facebook embed more mobile responsive.
@@ -92,7 +90,7 @@ export default Vue.extend({
               requestWidth = '300'
             }
             const facebookOutSource = `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(
-              link.split('?')[0]
+              link.split('?')[0],
             )}&show_text=0&width=${requestWidth}`
             return {
               src: facebookOutSource,
@@ -102,7 +100,7 @@ export default Vue.extend({
             }
           }
 
-          if (link.match(/^https?:\/\/([a-z0-9-]+[.])twitch[.]tv\/?/g)) {
+          if (link.match(this.$Config.regex.twitch)) {
             let videoId: string = ''
             // check to see if it's an individual video
             if (link.includes('/videos/')) {
@@ -120,17 +118,13 @@ export default Vue.extend({
               src: `https://player.twitch.tv/?${videoId}&parent=${window.location.hostname}&autoplay=false`,
               type: 'iframe',
               ref: this.setRefId(
-                `https://player.twitch.tv/?${videoId}&parent=${window.location.hostname}&autoplay=false`
+                `https://player.twitch.tv/?${videoId}&parent=${window.location.hostname}&autoplay=false`,
               ),
               aspectRatioClass: 'iframe-container-16-9',
             }
           }
 
-          if (
-            link.match(
-              /^https?:\/\/([a-z0-9-]+[.])spotify[.]com\/(playlist|embed)?/g
-            )
-          ) {
+          if (link.match(this.$Config.regex.spotify)) {
             // get type and id
             // https://open.spotify.com/playlist/46ffmNKBTEakwz0t625bbC?si=e878040ce04c460f => playlist/46ffmNKBTEakwz0t625bbC
             // https://open.spotify.com/track/3s2RFp5hU6jEvAmfZrnrAi?si=a9bf555ede314a19 => track/3s2RFp5hU6jEvAmfZrnrAi
@@ -142,7 +136,7 @@ export default Vue.extend({
               src: `https://open.spotify.com/embed/${spotifyEmbedType}?utm_source=generator`,
               type: 'iframe',
               ref: this.setRefId(
-                `https://open.spotify.com/embed/${spotifyEmbedType}?utm_source=generator`
+                `https://open.spotify.com/embed/${spotifyEmbedType}?utm_source=generator`,
               ),
               aspectRatioClass: 'iframe-container-16-9',
             }
@@ -180,7 +174,7 @@ export default Vue.extend({
   },
 })
 </script>
-<style lang="less" src="./EmbeddedLinkContent.less"></style>
+<style scoped lang="less" src="./EmbeddedLinkContent.less"></style>
 <style scoped lang="less">
 .is-text {
   font-size: @micro-text-size;
diff --git a/components/ui/Chat/Embeds/VideoPlayer/VideoPlayer.vue b/components/ui/Chat/Embeds/VideoPlayer/VideoPlayer.vue
index 21a368cdae..ab04d9262e 100644
--- a/components/ui/Chat/Embeds/VideoPlayer/VideoPlayer.vue
+++ b/components/ui/Chat/Embeds/VideoPlayer/VideoPlayer.vue
@@ -18,7 +18,7 @@ export default Vue.extend({
   },
 })
 </script>
-<style lang="less" src="./VideoPlayer.less"></style>
+<style scoped lang="less" src="./VideoPlayer.less"></style>
 <style scoped lang="less">
 .is-text {
   font-size: @micro-text-size;
diff --git a/components/views/chat/chatbar/reply/Reply.less b/components/views/chat/chatbar/reply/Reply.less
index a1fd59d957..57f1e68a81 100644
--- a/components/views/chat/chatbar/reply/Reply.less
+++ b/components/views/chat/chatbar/reply/Reply.less
@@ -1,48 +1,51 @@
 .is-chatbar-reply {
-    min-height: 36px;
-    max-height: 36px;
-    display: flex;
-    justify-content: space-between;
-    width: calc(@full - 2rem);
-    padding: 0.25rem 0.5rem;
-    font-size: @text-size;
-    font-family: @secondary-font;
-    margin: 0 1rem;
-    &:extend(.background-primary-gradient);
-    &:extend(.blur);
-    border-top: @light-border;
-    border-left: @light-border;
-    border-right: @light-border;
-    border-top-left-radius: @corner-rounding;
-    border-top-right-radius: @corner-rounding;
-    border: 1px solid transparent;
-    align-items: center;
+  min-height: 36px;
+  max-height: 36px;
+  display: flex;
+  justify-content: space-between;
+  width: calc(@full - 2rem);
+  padding: 0.25rem 0.5rem;
+  font-size: @text-size;
+  font-family: @secondary-font;
+  margin: 0 1rem;
+  &:extend(.background-primary-gradient);
+  &:extend(.blur);
+  border-top: @light-border;
+  border-left: @light-border;
+  border-right: @light-border;
+  border-top-left-radius: @corner-rounding;
+  border-top-right-radius: @corner-rounding;
+  border: 1px solid transparent;
+  align-items: center;
 
-    strong {
-        &:extend(.font-secondary);
-    }
+  strong {
+    &:extend(.font-secondary);
+  }
 
-    .markdown {
-        width: calc(@full - @small-icon-size - 0.25rem);
-        p {
-            font-size: @text-size;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-        }
+  .markdown {
+    width: calc(@full - @small-icon-size - 0.25rem);
+    p {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: @text-size;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
+  }
 
-    .reply-close {
-        cursor: pointer;
-        display: flex;
-        font-size: @small-icon-size;
-        &:extend(.font-primary);
-    }
+  .reply-close {
+    cursor: pointer;
+    display: flex;
+    font-size: @small-icon-size;
+    &:extend(.font-primary);
+  }
 }
 
 @media only screen and (max-width: @mobile-breakpoint) {
   .is-chatbar-reply {
-      margin: 0 @light-spacing;
-      width: calc(@full - @normal-spacing);
+    margin: 0 @light-spacing;
+    width: calc(@full - @normal-spacing);
   }
-}
\ No newline at end of file
+}
diff --git a/components/views/chat/enhancers/glyphs/Glyphs.html b/components/views/chat/enhancers/glyphs/Glyphs.html
index 5c8548756c..0770a57276 100644
--- a/components/views/chat/enhancers/glyphs/Glyphs.html
+++ b/components/views/chat/enhancers/glyphs/Glyphs.html
@@ -12,7 +12,6 @@
   <div class="glyph-content hidden-scroll">
     <virtual-list
       class="virtual-list"
-      style="height: 325px; overflow-y: auto"
       :data-key="'id'"
       :data-sources="filteredGlyphs"
       :data-component="packGroup"
diff --git a/components/views/chat/enhancers/glyphs/Glyphs.less b/components/views/chat/enhancers/glyphs/Glyphs.less
index 20a1a7389f..7c8017318c 100644
--- a/components/views/chat/enhancers/glyphs/Glyphs.less
+++ b/components/views/chat/enhancers/glyphs/Glyphs.less
@@ -18,6 +18,9 @@
     font-size: 0.75rem;
   }
   .virtual-list {
+    height: 325px;
+    overflow-y: auto;
+    padding-bottom: 80px;
     &::-webkit-scrollbar {
       width: 5px;
     }
diff --git a/components/views/chat/enhancers/glyphs/item/Item.html b/components/views/chat/enhancers/glyphs/item/Item.html
index 6fc5c78383..19ed94c97d 100644
--- a/components/views/chat/enhancers/glyphs/item/Item.html
+++ b/components/views/chat/enhancers/glyphs/item/Item.html
@@ -5,6 +5,6 @@
   :src="getSrc"
   @mouseover="mouseOver"
   @mouseleave="mouseLeave"
-  v-on="sendOnClick ? {click: addGlyph} : {}"
+  v-on="sendOnClick ? {click: sendGlyph} : {}"
   @load="setLoaded"
 />
diff --git a/components/views/chat/enhancers/glyphs/item/Item.vue b/components/views/chat/enhancers/glyphs/item/Item.vue
index a7b339c583..6286bd66c5 100644
--- a/components/views/chat/enhancers/glyphs/item/Item.vue
+++ b/components/views/chat/enhancers/glyphs/item/Item.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
     sendOnClick: { type: Boolean, default: false, required: false },
   },
   computed: {
-    getSrc() {
+    getSrc(): string {
       return this.isLoaded ? this.src : loadImg
     },
   },
@@ -52,7 +52,7 @@ export default Vue.extend({
         this.$store.commit('ui/setHoveredGlyphInfo', undefined)
       }
     },
-    addGlyph() {
+    sendGlyph() {
       const activeFriend = this.$Hounddog.getActiveFriend(
         this.$store.state.friends,
       )
@@ -64,6 +64,10 @@ export default Vue.extend({
         src: this.src,
         pack: this.pack.name,
       })
+      this.$store.commit('ui/updateRecentGlyphs', {
+        pack: this.pack,
+        url: this.src,
+      })
     },
     setLoaded() {
       this.isLoaded = true
diff --git a/components/views/chat/enhancers/glyphs/nav/Nav.html b/components/views/chat/enhancers/glyphs/nav/Nav.html
index d5447095b4..266b79fdc9 100644
--- a/components/views/chat/enhancers/glyphs/nav/Nav.html
+++ b/components/views/chat/enhancers/glyphs/nav/Nav.html
@@ -3,16 +3,17 @@
     <clock-icon class="control-icon" size="1x" />
   </div>
   <div class="pack-list">
-    <div v-for="pack in $mock.glyphs">
+    <TypographyText v-if="!ui.recentGlyphs.length" :text="$t('glyphs.try')" />
+    <template v-else v-for="glyph in recentGlyphs">
       <EnhancersGlyphsItem
-        :key="pack.id"
-        :src="pack.stickerURLs[0]"
-        :pack="pack"
+        :key="glyph.url"
+        :src="glyph.url"
+        :pack="glyph.pack"
         :height="32"
         :width="32"
         :sendOnClick="true"
       />
-    </div>
+    </template>
   </div>
   <div class="market-place" @click="toggleMarketPlace">
     <shopping-bag-icon class="control-icon" size="1x" />
diff --git a/components/views/chat/enhancers/glyphs/nav/Nav.less b/components/views/chat/enhancers/glyphs/nav/Nav.less
index c352524ac6..a46fe58333 100644
--- a/components/views/chat/enhancers/glyphs/nav/Nav.less
+++ b/components/views/chat/enhancers/glyphs/nav/Nav.less
@@ -10,6 +10,7 @@
   }
   .pack-list {
     display: flex;
+    flex-grow: 2;
     border-left: @mini-light-border;
     border-right: @mini-light-border;
     padding: 0 @light-spacing;
diff --git a/components/views/chat/enhancers/glyphs/nav/Nav.vue b/components/views/chat/enhancers/glyphs/nav/Nav.vue
index 2c0c2db2ba..a85f6d4f36 100644
--- a/components/views/chat/enhancers/glyphs/nav/Nav.vue
+++ b/components/views/chat/enhancers/glyphs/nav/Nav.vue
@@ -1,7 +1,7 @@
 <template src="./Nav.html" />
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 import { ShoppingBagIcon, ClockIcon } from 'satellite-lucide-icons'
 
@@ -10,13 +10,18 @@ export default Vue.extend({
     ShoppingBagIcon,
     ClockIcon,
   },
-  data() {
-    return {
-      selectedPack: null,
-    }
-  },
   computed: {
-    ...mapState(['ui', 'search']),
+    ...mapState(['ui']),
+    ...mapGetters('ui', ['getSortedRecentGlyphs']),
+    recentGlyphs() {
+      if (this.$mq === 'xs') {
+        return this.getSortedRecentGlyphs.slice(0, 5)
+      }
+      if (this.$mq === 'sm') {
+        return this.getSortedRecentGlyphs.slice(0, 6)
+      }
+      return this.getSortedRecentGlyphs.slice(0, 11)
+    },
   },
   methods: {
     toggleMarketPlace() {
diff --git a/components/views/chat/message/Message.vue b/components/views/chat/message/Message.vue
index 084609e11a..71e7c9c82f 100644
--- a/components/views/chat/message/Message.vue
+++ b/components/views/chat/message/Message.vue
@@ -137,8 +137,9 @@ export default Vue.extend({
       let finalPayload = payload
       if (['image', 'video', 'audio', 'file'].includes(type)) {
         finalPayload = `*${this.$t('conversation.multimedia')}*`
+      } else if (type === 'glyph') {
+        finalPayload = `<img src=${payload} width='16px' height='16px' />`
       }
-
       this.$store.commit('ui/setReplyChatbarContent', {
         id,
         payload: finalPayload,
diff --git a/config.ts b/config.ts
index b456881e45..93ab6bf00c 100644
--- a/config.ts
+++ b/config.ts
@@ -105,6 +105,14 @@ export const Config = {
     isEmoji: /\w*[{Emoji_Presentation}\u200d]+/gu,
     // Regex to wrap emoji's in spans. Note: Doesn't yet support emoji modifiers
     emojiWrapper: /[\p{Emoji_Presentation}\u200d]+/gu,
+    // check for link
+    link: /(\b(https?):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi,
+    youtube: /^https?:\/\/([a-z0-9-]+[.])*youtube.com?/g,
+    youtubeShort: /^https?:\/\/([a-z0-9-]+[.])*youtu.be?/g,
+    vimeo: /^https?:\/\/([a-z0-9-]+[.])*vimeo.com?/g,
+    facebook: /^https?:\/\/([a-z0-9-]+[.])*facebook.com?/g,
+    twitch: /^https?:\/\/([a-z0-9-]+[.])twitch[.]tv\/?/g,
+    spotify: /^https?:\/\/([a-z0-9-]+[.])spotify[.]com\/(playlist|embed)?/g,
   },
   webrtc: {
     constraints: {
diff --git a/locales b/locales
index adcafb6501..54cbb53720 160000
--- a/locales
+++ b/locales
@@ -1 +1 @@
-Subproject commit adcafb6501345500970fdaf72fcf9b43654f30b0
+Subproject commit 54cbb5372082072de49909610af0ea7c4ae95fcd
diff --git a/nuxt.config.js b/nuxt.config.js
index 6a4f58719b..51a16cdf74 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -111,6 +111,7 @@ export default defineNuxtConfig({
         // Default breakpoint for SSR
         defaultBreakpoint: 'sm',
         breakpoints: {
+          xs: 360,
           sm: 768,
           md: 1250,
           lg: Infinity,
diff --git a/store/ui/getters.ts b/store/ui/getters.ts
index edbdfa65bd..29bab4cb46 100644
--- a/store/ui/getters.ts
+++ b/store/ui/getters.ts
@@ -2,8 +2,10 @@ import { UIState } from './types'
 
 const getters = {
   getSortedMostUsedEmojis: (state: UIState) => {
-    const emojis = [...state.mostEmojiUsed].sort((a, b) => b.count - a.count)
-    return emojis
+    return [...state.mostEmojiUsed].sort((a, b) => b.count - a.count)
+  },
+  getSortedRecentGlyphs: (state: UIState) => {
+    return [...state.recentGlyphs].sort((a, b) => b.count - a.count)
   },
 }
 
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index d597827d3b..2fa31abbb5 100644
--- a/store/ui/mutations.ts
+++ b/store/ui/mutations.ts
@@ -2,6 +2,7 @@ import { without } from 'lodash'
 import { EnhancerInfo, Theme, UIState } from './types'
 import { MessageGroup } from '~/types/messaging'
 import { Channel } from '~/types/ui/server'
+import { RecentGlyph } from '~/store/ui/types'
 
 export default {
   togglePinned(state: UIState, visible: boolean) {
@@ -298,6 +299,18 @@ export default {
       count: 1,
     })
   },
+  updateRecentGlyphs(state: UIState, glyph: RecentGlyph) {
+    const glyphUsed = state.recentGlyphs.find((e) => e.url === glyph.url)
+    if (glyphUsed) {
+      glyphUsed.count++
+      return
+    }
+    state.recentGlyphs.push({
+      pack: glyph.pack,
+      url: glyph.url,
+      count: 1,
+    })
+  },
   updateTheme(state: UIState, theme: Theme) {
     state.theme.base = theme
   },
diff --git a/store/ui/state.ts b/store/ui/state.ts
index b79ddbec92..19f61b1c78 100644
--- a/store/ui/state.ts
+++ b/store/ui/state.ts
@@ -50,7 +50,8 @@ const InitialUIState = (): UIState => ({
   editMessage: { id: '', from: '', payload: '' },
   recentReactions: ['👍', '😂', '♥️'],
   mostEmojiUsed: [],
-    theme: {
+  recentGlyphs: [],
+  theme: {
     base: {
       name: ThemeNames.DEFAULT,
       class: '',
diff --git a/store/ui/types.ts b/store/ui/types.ts
index 4d5f288aa6..4dc4300a61 100644
--- a/store/ui/types.ts
+++ b/store/ui/types.ts
@@ -1,3 +1,4 @@
+import { Glyph } from '~/types/ui/glyph'
 import { Channel } from '~/types/ui/server'
 
 export enum ThemeNames {
@@ -6,8 +7,8 @@ export enum ThemeNames {
 }
 
 export type Theme = {
-  name: ThemeNames,
-  class: String,
+  name: ThemeNames
+  class: String
 }
 
 export const Themes = [
@@ -54,9 +55,15 @@ export interface EnhancerInfo {
 }
 
 export interface EmojiUsage {
-  code: string,
-  count: number,
-  content: string,
+  code: string
+  count: number
+  content: string
+}
+
+export interface RecentGlyph {
+  pack: Glyph
+  url: string
+  count: number
 }
 
 export interface UIState {
@@ -94,10 +101,11 @@ export interface UIState {
     from: string
     payload: string
   }
-  recentReactions: Array<String>,
-  mostEmojiUsed: Array<EmojiUsage>,
+  recentReactions: Array<String>
+  mostEmojiUsed: Array<EmojiUsage>
+  recentGlyphs: Array<RecentGlyph>
   theme: {
-    base: Theme,
-    flair: String,
-  },
+    base: Theme
+    flair: String
+  }
 }