feat(glyphs): recently used glyphs functionality AP-341

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;

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;

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);
   }
-}
+}

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"

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;
     }

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"
 />

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

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" />

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;

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() {

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,

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: {

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,

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)
   },
 }