From 00f6e34c536723eaef5d5780f47f4e36aeb801a3 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Sun, 17 Nov 2024 20:35:20 +0000
Subject: [PATCH] merge from local

---
 docker-compose.yml                            |  11 +-
 packages/app/Dockerfile                       |   2 +-
 packages/app/config/sidebar/BottomItems.json  |  11 --
 packages/app/package.json                     |   2 +-
 .../PostCard/components/attachments/index.jsx |  14 +-
 .../components/attachments/index.less         |   1 +
 .../app/src/components/PostCreator/index.jsx  |  55 ++++---
 .../src/components/TrendingsCard/index.jsx    |   3 +
 packages/app/src/cores/player/player.core.js  |   4 +-
 packages/app/src/cores/style/style.core.jsx   |  15 --
 .../app/src/cores/widgets/widgets.core.js     |   2 -
 packages/app/src/hooks/useMaxScreen/index.js  |   4 +-
 packages/app/src/layout.jsx                   |   3 +
 .../src/layouts/components/toolsBar/index.jsx |  10 +-
 .../lyrics/components/controller/index.jsx    |  32 +---
 .../pages/lyrics/components/video/index.jsx   | 148 ++++++++----------
 packages/app/src/pages/post/[post_id].jsx     |   6 +-
 .../app/src/pages/trending/[trending].jsx     |  27 ++++
 packages/app/src/pages/trending/index.less    |  18 +++
 packages/app/src/pages/tv/live/[id].jsx       |   6 +-
 packages/app/src/pages/tv/tabs.jsx            |  25 ---
 .../components/widgetsManager/index.jsx       | 100 ++++++------
 packages/app/src/settings/widgets/index.jsx   |  16 +-
 packages/app/src/styles/fixments.less         |  33 +++-
 packages/app/src/styles/index.less            |   9 ++
 packages/server/db_models/extension/index.js  |  28 +++-
 packages/server/gateway/proxy.js              |  14 +-
 .../ems/ipcEvents/accountActivation.js        |   2 -
 .../marketplace/classes/extension/index.js    |   3 +
 .../classes/extension/methods/resolve.js      |  24 +++
 .../marketplace/marketplace.service.js        |  13 ++
 .../server/services/marketplace/package.json  |   5 +-
 .../routes/extensions/[user_id]/[pkg]/get.js  |  10 ++
 .../extensions/[user_id]/[pkg]/main/get.js    |  12 ++
 .../routes/extensions/publish/put.js          | 133 ++++++++++++++++
 .../marketplace/routes/publish/post.js        |   8 -
 .../routes/music/lyrics/[track_id]/put.js     |  14 +-
 .../routes/posts/trending/[trending]/get.js   |  25 +++
 .../posts/routes/posts/trendings/get.js       |  80 ++++------
 .../services/users/routes/users/search/get.js |  44 ++++++
 scripts/publishWidget.js                      | 102 +++++++-----
 widgets/Clock/package.json                    |   6 +
 widgets/Clock/src/clock.jsx                   |  21 +++
 widgets/Clock/src/extension.js                |  45 ++++++
 widgets/Clock/src/index.less                  |   6 +
 45 files changed, 757 insertions(+), 395 deletions(-)
 create mode 100644 packages/app/src/pages/trending/[trending].jsx
 create mode 100644 packages/app/src/pages/trending/index.less
 create mode 100644 packages/server/services/marketplace/classes/extension/index.js
 create mode 100644 packages/server/services/marketplace/classes/extension/methods/resolve.js
 create mode 100644 packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/get.js
 create mode 100644 packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/main/get.js
 create mode 100644 packages/server/services/marketplace/routes/extensions/publish/put.js
 delete mode 100644 packages/server/services/marketplace/routes/publish/post.js
 create mode 100644 packages/server/services/posts/routes/posts/trending/[trending]/get.js
 create mode 100644 packages/server/services/users/routes/users/search/get.js
 create mode 100644 widgets/Clock/package.json
 create mode 100644 widgets/Clock/src/clock.jsx
 create mode 100644 widgets/Clock/src/extension.js
 create mode 100644 widgets/Clock/src/index.less

diff --git a/docker-compose.yml b/docker-compose.yml
index ecb75922..e362122b 100755
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,13 @@
 services:
+  app:
+    build: packages/app
+    restart: unless-stopped
+    networks:
+      - internal_network
+    ports:
+      - "3000:3000"
+    env_file:
+      - ./.env
   api:
     build: packages/server
     restart: unless-stopped
@@ -8,7 +17,7 @@ services:
       - "9000:9000"
     env_file:
       - ./.env
-      
+
   redis:
     image: docker.dragonflydb.io/dragonflydb/dragonfly:latest
     restart: unless-stopped
diff --git a/packages/app/Dockerfile b/packages/app/Dockerfile
index c870b101..db2a17cf 100755
--- a/packages/app/Dockerfile
+++ b/packages/app/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:16-alpine
+FROM node:20-alpine
 
 RUN apk add git
 RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
diff --git a/packages/app/config/sidebar/BottomItems.json b/packages/app/config/sidebar/BottomItems.json
index b06d04a8..a86b5beb 100644
--- a/packages/app/config/sidebar/BottomItems.json
+++ b/packages/app/config/sidebar/BottomItems.json
@@ -4,17 +4,6 @@
         "label": "Search",
         "icon": "FiSearch"
     },
-    {
-        "id": "messages",
-        "label": "Messages",
-        "icon": "FiMessageCircle",
-        "path": "/messages"
-    },
-    {
-        "id": "notifications",
-        "label": "Notifications",
-        "icon": "FiBell"
-    },
     {
         "id": "settings",
         "label": "Settings",
diff --git a/packages/app/package.json b/packages/app/package.json
index 5c72e682..555f7dd4 100755
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -45,7 +45,7 @@
         "fast-average-color": "^9.2.0",
         "framer-motion": "^10.12.17",
         "fuse.js": "6.5.3",
-        "hls.js": "^1.5.15",
+        "hls.js": "^1.5.17",
         "howler": "2.2.3",
         "i18next": "21.6.6",
         "js-cookie": "3.0.1",
diff --git a/packages/app/src/components/PostCard/components/attachments/index.jsx b/packages/app/src/components/PostCard/components/attachments/index.jsx
index e2e6680b..6796301d 100755
--- a/packages/app/src/components/PostCard/components/attachments/index.jsx
+++ b/packages/app/src/components/PostCard/components/attachments/index.jsx
@@ -75,17 +75,9 @@ const Attachment = React.memo((props) => {
                     return <ImageViewer src={url} />
                 }
                 case "video": {
-                    return <Plyr
-                        source={{
-                            type: "video",
-                            sources: [{
-                                src: url,
-                            }],
-                        }}
-                        options={{
-                            controls: ["play", "progress", "current-time", "mute", "volume"],
-                        }}
-                    />
+                    return <video controls>
+                        <source src={url} type={mimeType} />
+                    </video>
                 }
                 case "audio": {
                     return <audio controls>
diff --git a/packages/app/src/components/PostCard/components/attachments/index.less b/packages/app/src/components/PostCard/components/attachments/index.less
index 92369a7d..7f7760a9 100755
--- a/packages/app/src/components/PostCard/components/attachments/index.less
+++ b/packages/app/src/components/PostCard/components/attachments/index.less
@@ -68,6 +68,7 @@
 
         video {
             height: 100%;
+            width: 100%;
 
             user-select: none;
             -webkit-user-drag: none;
diff --git a/packages/app/src/components/PostCreator/index.jsx b/packages/app/src/components/PostCreator/index.jsx
index 479e101e..cbc8e5b7 100755
--- a/packages/app/src/components/PostCreator/index.jsx
+++ b/packages/app/src/components/PostCreator/index.jsx
@@ -12,6 +12,7 @@ import Poll from "@components/Poll"
 import clipboardEventFileToFile from "@utils/clipboardEventFileToFile"
 
 import PostModel from "@models/post"
+import SearchModel from "@models/search"
 
 import "./index.less"
 
@@ -33,6 +34,8 @@ export default class PostCreator extends React.Component {
 
         fileList: [],
         postingPolicy: DEFAULT_POST_POLICY,
+
+        mentionsLoadedData: []
     }
 
     pollRef = React.createRef()
@@ -59,14 +62,6 @@ export default class PostCreator extends React.Component {
         })
     }
 
-    fetchUploadPolicy = async () => {
-        const policy = await PostModel.getPostingPolicy()
-
-        this.setState({
-            postingPolicy: policy
-        })
-    }
-
     canSubmit = () => {
         const { postMessage, postAttachments, pending, postingPolicy } = this.state
 
@@ -83,9 +78,7 @@ export default class PostCreator extends React.Component {
         return true
     }
 
-    debounceSubmit = lodash.debounce(() => this.submit(), 50)
-
-    submit = async () => {
+    submit = lodash.debounce(async () => {
         if (this.state.loading) {
             return false
         }
@@ -154,10 +147,9 @@ export default class PostCreator extends React.Component {
                 app.navigation.goToPost(this.props.reply_to)
             }
         }
-    }
+    }, 50)
 
     uploadFile = async (req) => {
-        // hide uploader
         this.toggleUploaderVisibility(false)
 
         const request = await app.cores.remoteStorage.uploadFile(req.file)
@@ -265,18 +257,18 @@ export default class PostCreator extends React.Component {
         }
     }
 
-    onChangeMessageInput = (event) => {
+    handleMessageInputChange = (inputText) => {
         // if the fist character is a space or a whitespace remove it
-        if (event.target.value[0] === " " || event.target.value[0] === "\n") {
-            event.target.value = event.target.value.slice(1)
+        if (inputText[0] === " " || inputText[0] === "\n") {
+            inputText = inputText.slice(1)
         }
 
         this.setState({
-            postMessage: event.target.value
+            postMessage: inputText
         })
     }
 
-    handleKeyDown = async (e) => {
+    handleMessageInputKeydown = async (e) => {
         // detect if the user pressed `enter` key and submit the form, but only if the `shift` key is not pressed
         if (e.keyCode === 13 && !e.shiftKey) {
             e.preventDefault()
@@ -290,6 +282,15 @@ export default class PostCreator extends React.Component {
         }
     }
 
+    handleOnMentionSearch = lodash.debounce(async (value) => {
+        const results = await SearchModel.userSearch(`username:${value}`)
+
+        this.setState({
+            mentionsLoadedData: results
+        })
+
+    }, 300)
+
     updateFileList = (uid, newValue) => {
         let updatedFileList = this.state.fileList
 
@@ -577,16 +578,28 @@ export default class PostCreator extends React.Component {
                     <img src={app.userData?.avatar} />
                 </div>
 
-                <antd.Input.TextArea
+                <antd.Mentions
                     placeholder="What are you thinking?"
                     value={postMessage}
                     autoSize={{ minRows: 3, maxRows: 6 }}
                     maxLength={postingPolicy.maxMessageLength}
-                    onChange={this.onChangeMessageInput}
-                    onKeyDown={this.handleKeyDown}
+                    onChange={this.handleMessageInputChange}
+                    onKeyDown={this.handleMessageInputKeydown}
                     disabled={loading}
                     draggable={false}
+                    prefix="@"
                     allowClear
+                    options={this.state.mentionsLoadedData.map((item) => {
+                        return {
+                            key: item.id,
+                            value: item.username,
+                            label: <>
+                                <antd.Avatar src={item.avatar} />
+                                <span>{item.username}</span>
+                            </>,
+                        }
+                    })}
+                    onSearch={this.handleOnMentionSearch}
                 />
 
                 <div>
diff --git a/packages/app/src/components/TrendingsCard/index.jsx b/packages/app/src/components/TrendingsCard/index.jsx
index 5fbe150c..935dedd8 100644
--- a/packages/app/src/components/TrendingsCard/index.jsx
+++ b/packages/app/src/components/TrendingsCard/index.jsx
@@ -21,6 +21,9 @@ const TrendingsCard = (props) => {
             {
                 E_Trendings && <span>Something went wrong</span>
             }
+            {
+                !L_Trendings && !E_Trendings && R_Trendings && R_Trendings.length === 0 && <span>No trendings</span>
+            }
             {
                 !L_Trendings && !E_Trendings && R_Trendings && R_Trendings.map((trending, index) => {
                     return <div
diff --git a/packages/app/src/cores/player/player.core.js b/packages/app/src/cores/player/player.core.js
index 78486ef7..7ddf6763 100755
--- a/packages/app/src/cores/player/player.core.js
+++ b/packages/app/src/cores/player/player.core.js
@@ -273,7 +273,7 @@ export default class Player extends Core {
         })
     }
 
-    async playbackMode(mode) {
+    playbackMode(mode) {
         if (typeof mode !== "string") {
             return this.state.playback_mode
         }
@@ -289,7 +289,7 @@ export default class Player extends Core {
         return mode
     }
 
-    async stopPlayback() {
+    stopPlayback() {
         if (this.queue.currentItem) {
             this.queue.currentItem.stop()
         }
diff --git a/packages/app/src/cores/style/style.core.jsx b/packages/app/src/cores/style/style.core.jsx
index 7e9665d4..e8149afd 100755
--- a/packages/app/src/cores/style/style.core.jsx
+++ b/packages/app/src/cores/style/style.core.jsx
@@ -131,7 +131,6 @@ export default class StyleCore extends Core {
 
 		mutateTheme: (...args) => this.mutateTheme(...args),
 		resetToDefault: () => this.resetToDefault(),
-		toggleCompactMode: () => this.toggleCompactMode(),
 	}
 
 	async onInitialize() {
@@ -251,20 +250,6 @@ export default class StyleCore extends Core {
 		StyleCore.storagedModifications = this.public.mutation
 	}
 
-	toggleCompactMode(value = !window.app.cores.settings.get("style.compactMode")) {
-		if (value === true) {
-			return this.applyStyles({
-				layoutMargin: 0,
-				layoutPadding: 0,
-			})
-		}
-
-		return this.applyStyles({
-			layoutMargin: this.getVar("layoutMargin"),
-			layoutPadding: this.getVar("layoutPadding"),
-		})
-	}
-
 	resetToDefault() {
 		store.remove(StyleCore.modificationStorageKey)
 
diff --git a/packages/app/src/cores/widgets/widgets.core.js b/packages/app/src/cores/widgets/widgets.core.js
index 1b38cdf7..f34ca44b 100755
--- a/packages/app/src/cores/widgets/widgets.core.js
+++ b/packages/app/src/cores/widgets/widgets.core.js
@@ -21,8 +21,6 @@ export default class WidgetsCore extends Core {
 
     async onInitialize() {
         try {
-            //await WidgetsCore.apiInstance()
-
             const currentStore = this.getInstalled()
 
             if (!Array.isArray(currentStore)) {
diff --git a/packages/app/src/hooks/useMaxScreen/index.js b/packages/app/src/hooks/useMaxScreen/index.js
index 5c2dae74..120a5df7 100644
--- a/packages/app/src/hooks/useMaxScreen/index.js
+++ b/packages/app/src/hooks/useMaxScreen/index.js
@@ -3,14 +3,14 @@ import React from "react"
 export default () => {
     const enterPlayerAnimation = () => {
         app.cores.style.applyTemporalVariant("dark")
-        app.cores.style.toggleCompactMode(true)
+        app.layout.toggleCompactMode(true)
         app.layout.toggleCenteredContent(false)
         app.controls.toggleUIVisibility(false)
     }
 
     const exitPlayerAnimation = () => {
         app.cores.style.applyVariant(app.cores.style.getStoragedVariantKey())
-        app.cores.style.toggleCompactMode(false)
+        app.layout.toggleCompactMode(false)
         app.layout.toggleCenteredContent(true)
         app.controls.toggleUIVisibility(true)
     }
diff --git a/packages/app/src/layout.jsx b/packages/app/src/layout.jsx
index f0a427bf..25541ef3 100755
--- a/packages/app/src/layout.jsx
+++ b/packages/app/src/layout.jsx
@@ -108,6 +108,9 @@ export default class Layout extends React.PureComponent {
 		togglePagePanelSpacer: (to) => {
 			return this.layoutInterface.toggleRootContainerClassname("page-panel-spacer", to)
 		},
+		toggleCompactMode: (to) => {
+			return this.layoutInterface.toggleRootContainerClassname("compact-mode", to)
+		},
 		toggleRootContainerClassname: (classname, to) => {
 			const root = document.documentElement
 
diff --git a/packages/app/src/layouts/components/toolsBar/index.jsx b/packages/app/src/layouts/components/toolsBar/index.jsx
index b8fd3724..557a493b 100755
--- a/packages/app/src/layouts/components/toolsBar/index.jsx
+++ b/packages/app/src/layouts/components/toolsBar/index.jsx
@@ -61,10 +61,14 @@ export default class ToolsBar extends React.Component {
     }
 
     render() {
+        const hasAnyRenders = this.state.renders.top.length > 0 || this.state.renders.bottom.length > 0
+
+        const isVisible = hasAnyRenders && this.state.visible
+
         return <Motion
             style={{
-                x: spring(this.state.visible ? 0 : 100),
-                width: spring(this.state.visible ? 100 : 0),
+                x: spring(isVisible ? 0 : 100),
+                width: spring(isVisible ? 100 : 0),
             }}
         >
             {({ x, width }) => {
@@ -76,7 +80,7 @@ export default class ToolsBar extends React.Component {
                     className={classnames(
                         "tools-bar-wrapper",
                         {
-                            visible: this.state.visible,
+                            visible: isVisible,
                         }
                     )}
                 >
diff --git a/packages/app/src/pages/lyrics/components/controller/index.jsx b/packages/app/src/pages/lyrics/components/controller/index.jsx
index 3183edc1..6b9bad65 100644
--- a/packages/app/src/pages/lyrics/components/controller/index.jsx
+++ b/packages/app/src/pages/lyrics/components/controller/index.jsx
@@ -18,34 +18,6 @@ function isOverflown(element) {
     return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
 }
 
-const RenderArtist = (props) => {
-    const { artist } = props
-
-    if (!artist) {
-        return null
-    }
-
-    if (Array.isArray(artist)) {
-        return <h3>{artist.join(",")}</h3>
-    }
-
-    return <h3>{artist}</h3>
-}
-
-const RenderAlbum = (props) => {
-    const { album } = props
-
-    if (!album) {
-        return null
-    }
-
-    if (Array.isArray(album)) {
-        return <h3>{album.join(",")}</h3>
-    }
-
-    return <h3>{album}</h3>
-}
-
 const PlayerController = React.forwardRef((props, ref) => {
     const [playerState] = usePlayerStateContext()
 
@@ -152,9 +124,7 @@ const PlayerController = React.forwardRef((props, ref) => {
                 </div>
 
                 <div className="lyrics-player-controller-info-details">
-                    <RenderArtist artist={playerState.track_manifest?.artists} />
-                    -
-                    <RenderAlbum album={playerState.track_manifest?.album} />
+                    <span>{playerState.track_manifest?.artistStr}</span>
                 </div>
             </div>
 
diff --git a/packages/app/src/pages/lyrics/components/video/index.jsx b/packages/app/src/pages/lyrics/components/video/index.jsx
index 3d04a4c4..40a73f94 100644
--- a/packages/app/src/pages/lyrics/components/video/index.jsx
+++ b/packages/app/src/pages/lyrics/components/video/index.jsx
@@ -11,6 +11,7 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
 
     const { lyrics } = props
 
+    const [initialLoading, setInitialLoading] = React.useState(true)
     const [syncInterval, setSyncInterval] = React.useState(null)
     const [syncingVideo, setSyncingVideo] = React.useState(false)
     const [currentVideoLatency, setCurrentVideoLatency] = React.useState(0)
@@ -29,40 +30,36 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
 
         setSyncingVideo(true)
 
-        videoRef.current.currentTime = currentTrackTime + (lyrics.sync_audio_at_ms / 1000) + app.cores.player.gradualFadeMs / 1000
+        let newTime = currentTrackTime + (lyrics.sync_audio_at_ms / 1000) + app.cores.player.gradualFadeMs / 1000
+
+        // dec some ms to ensure the video seeks correctly
+        newTime -= 5 / 1000
+
+        videoRef.current.currentTime = newTime
     }
 
     async function syncPlayback() {
-        if (!lyrics) {
+        // if something is wrong, stop syncing
+        if (videoRef.current === null || !lyrics || !lyrics.video_source || typeof lyrics.sync_audio_at_ms === "undefined" || playerState.playback_status !== "playing") {
+            return stopSyncInterval()
+        }
+
+        const currentTrackTime = app.cores.player.controls.seek()
+        const currentVideoTime = videoRef.current.currentTime - (lyrics.sync_audio_at_ms / 1000)
+
+        //console.log(`Current track time: ${currentTrackTime}, current video time: ${currentVideoTime}`)
+
+        const maxOffset = maxLatencyInMs / 1000
+        const currentVideoTimeDiff = Math.abs(currentVideoTime - currentTrackTime)
+
+        setCurrentVideoLatency(currentVideoTimeDiff)
+
+        if (syncingVideo === true) {
             return false
         }
 
-        // if `sync_audio_at_ms` is present, it means the video must be synced with audio
-        if (lyrics.video_source && typeof lyrics.sync_audio_at_ms !== "undefined") {
-            if (!videoRef.current) {
-                clearInterval(syncInterval)
-                setSyncInterval(null)
-                setCurrentVideoLatency(0)
-                return false
-            }
-
-            const currentTrackTime = app.cores.player.controls.seek()
-            const currentVideoTime = videoRef.current.currentTime - (lyrics.sync_audio_at_ms / 1000)
-
-            //console.log(`Current track time: ${currentTrackTime}, current video time: ${currentVideoTime}`)
-
-            const maxOffset = maxLatencyInMs / 1000
-            const currentVideoTimeDiff = Math.abs(currentVideoTime - currentTrackTime)
-
-            setCurrentVideoLatency(currentVideoTimeDiff)
-
-            if (syncingVideo === true) {
-                return false
-            }
-
-            if (currentVideoTimeDiff > maxOffset) {
-                seekVideoToSyncAudio()
-            }
+        if (currentVideoTimeDiff > maxOffset) {
+            seekVideoToSyncAudio()
         }
     }
 
@@ -70,45 +67,13 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
         setSyncInterval(setInterval(syncPlayback, 300))
     }
 
-    React.useEffect(() => {
-        videoRef.current.addEventListener("seeked", (event) => {
-            setSyncingVideo(false)
-        })
-
-        // videoRef.current.addEventListener("error", (event) => {
-        //     console.log("Failed to load", event)
-        // })
-
-        // videoRef.current.addEventListener("ended", (event) => {
-        //     console.log("Video ended", event)
-        // })
-
-        // videoRef.current.addEventListener("stalled", (event) => {
-        //     console.log("Failed to fetch data, but trying")
-        // })
-
-        // videoRef.current.addEventListener("waiting", (event) => {
-        //     console.log("Waiting for data...")
-        // })
-    }, [])
-
-    //* Handle when playback status change
-    React.useEffect(() => {
-        if (lyrics?.video_source && typeof lyrics?.sync_audio_at_ms !== "undefined") {
-            if (playerState.playback_status === "playing") {
-                videoRef.current.play()
-
-                setSyncInterval(setInterval(syncPlayback, 500))
-            } else {
-                videoRef.current.pause()
-
-                if (syncInterval) {
-                    clearInterval(syncInterval)
-                }
-            }
-        }
-    }, [playerState.playback_status])
+    function stopSyncInterval() {
+        setSyncingVideo(false)
+        setSyncInterval(null)
+        clearInterval(syncInterval)
+    }
 
+    //* handle when player is loading
     React.useEffect(() => {
         if (lyrics?.video_source && playerState.loading === true && playerState.playback_status === "playing") {
             videoRef.current.pause()
@@ -119,50 +84,61 @@ const LyricsVideo = React.forwardRef((props, videoRef) => {
         }
     }, [playerState.loading])
 
+    //* Handle when playback status change
+    React.useEffect(() => {
+        if (initialLoading === false) {
+            console.log(`VIDEO:: Playback status changed to ${playerState.playback_status}`)
+
+            if (lyrics && lyrics.video_source) {
+                if (playerState.playback_status === "playing") {
+                    videoRef.current.play()
+                    startSyncInterval()
+                } else {
+                    videoRef.current.pause()
+                    stopSyncInterval()
+                }
+            }
+        }
+    }, [playerState.playback_status])
+
     //* Handle when lyrics object change
     React.useEffect(() => {
-        clearInterval(syncInterval)
         setCurrentVideoLatency(0)
-        setSyncingVideo(false)
+        stopSyncInterval()
 
         if (lyrics) {
             if (lyrics.video_source) {
+                console.log("Loading video source >", lyrics.video_source)
                 hls.current.loadSource(lyrics.video_source)
 
                 if (typeof lyrics.sync_audio_at_ms !== "undefined") {
+                    videoRef.current.loop = false
                     videoRef.current.currentTime = lyrics.sync_audio_at_ms / 1000
 
-                    if (playerState.playback_status === "playing") {
-                        videoRef.current.play()
-                        startSyncInterval()
-                    } else {
-                        videoRef.current.pause()
-                    }
-
-                    const currentTime = app.cores.player.controls.seek()
-
-                    if (currentTime > 0) {
-                        seekVideoToSyncAudio()
-                    }
+                    startSyncInterval()
                 } else {
                     videoRef.current.loop = true
+                    videoRef.current.currentTime = 0
+                }
+
+                if (playerState.playback_status === "playing"){
                     videoRef.current.play()
                 }
-            } else {
-                videoRef.current
             }
-        } else {
-            videoRef.current
         }
+
+        setInitialLoading(false)
     }, [lyrics])
 
     React.useEffect(() => {
-        clearInterval(syncInterval)
+        videoRef.current.addEventListener("seeked", (event) => {
+            setSyncingVideo(false)
+        })
 
         hls.current.attachMedia(videoRef.current)
 
         return () => {
-            clearInterval(syncInterval)
+            stopSyncInterval()
         }
     }, [])
 
diff --git a/packages/app/src/pages/post/[post_id].jsx b/packages/app/src/pages/post/[post_id].jsx
index d365bce8..7b04b4e0 100755
--- a/packages/app/src/pages/post/[post_id].jsx
+++ b/packages/app/src/pages/post/[post_id].jsx
@@ -8,15 +8,19 @@ import PostsList from "@components/PostsList"
 
 import PostService from "@models/post"
 
+import useCenteredContainer from "@hooks/useCenteredContainer"
+
 import "./index.less"
 
 const PostPage = (props) => {
     const post_id = props.params.post_id
 
+    useCenteredContainer(true)
+
     const [loading, result, error, repeat] = app.cores.api.useRequest(PostService.getPost, {
         post_id,
     })
-    
+
     if (error) {
         return <antd.Result
             status="warning"
diff --git a/packages/app/src/pages/trending/[trending].jsx b/packages/app/src/pages/trending/[trending].jsx
new file mode 100644
index 00000000..748fc9fe
--- /dev/null
+++ b/packages/app/src/pages/trending/[trending].jsx
@@ -0,0 +1,27 @@
+import React from "react"
+
+import PostList from "@components/PostsList"
+import PostModel from "@models/post"
+
+import "./index.less"
+
+const TrendingPage = (props) => {
+    const { trending } = props.params
+
+    return <div className="trending-page">
+        <div className="trending-page-header">
+            <h1>#{trending.toLowerCase()}</h1>
+        </div>
+
+        <div className="trending-page-content">
+            <PostList
+                loadFromModel={PostModel.getTrending}
+                loadFromModelProps={{
+                    trending,
+                }}
+            />
+        </div>
+    </div>
+}
+
+export default TrendingPage
\ No newline at end of file
diff --git a/packages/app/src/pages/trending/index.less b/packages/app/src/pages/trending/index.less
new file mode 100644
index 00000000..8aba9eb5
--- /dev/null
+++ b/packages/app/src/pages/trending/index.less
@@ -0,0 +1,18 @@
+.trending-page {
+    display: flex;
+    flex-direction: column;
+
+    gap: 20px;
+
+    width: 100%;
+
+    .trending-page-header {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .trending-page-content {
+        display: flex;
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/packages/app/src/pages/tv/live/[id].jsx b/packages/app/src/pages/tv/live/[id].jsx
index 6d156553..73b5b419 100755
--- a/packages/app/src/pages/tv/live/[id].jsx
+++ b/packages/app/src/pages/tv/live/[id].jsx
@@ -257,14 +257,14 @@ export default class StreamViewer extends React.Component {
 
     enterPlayerAnimation = () => {
         app.cores.style.applyTemporalVariant("dark")
-        app.cores.style.toggleCompactMode(true)
+        app.layout.toggleCompactMode(true)
         app.layout.toggleCenteredContent(false)
         app.controls.toggleUIVisibility(false)
     }
 
     exitPlayerAnimation = () => {
         app.cores.style.applyVariant(app.cores.style.currentVariantKey)
-        app.cores.style.toggleCompactMode(false)
+        app.layout.toggleCompactMode(false)
         app.layout.toggleCenteredContent(true)
         app.controls.toggleUIVisibility(true)
     }
@@ -341,7 +341,7 @@ export default class StreamViewer extends React.Component {
                                             <h1>{this.state.stream.info?.title}</h1>
                                         </div>
                                         <div className="livestream_player_header_info_description">
-                                            <Marquee 
+                                            <Marquee
                                                 mode="smooth"
                                             >
                                                 {({ index }) => {
diff --git a/packages/app/src/pages/tv/tabs.jsx b/packages/app/src/pages/tv/tabs.jsx
index 5cf87187..1327a590 100755
--- a/packages/app/src/pages/tv/tabs.jsx
+++ b/packages/app/src/pages/tv/tabs.jsx
@@ -14,29 +14,4 @@ export default [
         component: LivestreamsList,
         disabled: true,
     },
-    {
-        key: "controlPanel",
-        label: "Creator Panel",
-        icon: "MdSpaceDashboard",
-        children: [
-            {
-                key: "controlPanel.uploads",
-                label: "Uploads",
-                icon: "FiUpload",
-                disabled: true
-            },
-            {
-                key: "controlPanel.streaming_settings",
-                label: "Stream Configuration",
-                icon: "FiSettings",
-                disabled: true,
-            },
-            {
-                key: "controlPanel.dvr_settings",
-                label: "DVR",
-                icon: "MdFiberDvr",
-                disabled: true
-            }
-        ]
-    }
 ]
\ No newline at end of file
diff --git a/packages/app/src/settings/components/widgetsManager/index.jsx b/packages/app/src/settings/components/widgetsManager/index.jsx
index 98567b3e..b0e3b582 100755
--- a/packages/app/src/settings/components/widgetsManager/index.jsx
+++ b/packages/app/src/settings/components/widgetsManager/index.jsx
@@ -7,55 +7,61 @@ import WidgetItemPreview from "@components/WidgetItemPreview"
 
 import "./index.less"
 
-export default class WidgetsManager extends React.Component {
-    state = {
-        loadedWidgets: app.cores.widgets.getInstalled() ?? [],
-    }
+const WidgetsManager = () => {
+    const [loadedWidgets, setLoadedWidgets] = React.useState(app.cores.widgets.getInstalled() ?? [])
 
-    render() {
-        return <div className="widgets-manager">
-            <div className="widgets-manager-list">
-                {
-                    Array.isArray(this.state.loadedWidgets) && this.state.loadedWidgets.map((manifest) => {
-                        return <React.Fragment>
-                            <WidgetItemPreview
-                                manifest={manifest}
-                                onRemove={() => {
-                                    app.cores.widgets.uninstall(manifest._id)
-                                }}
-                                onInstall={() => {
-                                    app.cores.widgets.install(manifest._id)
-                                }}
-                                onUpdate={() => {
-                                    app.cores.widgets.install(manifest._id, {
-                                        update: true,
-                                    })
-                                }}
-                                onChangeVisible={(visible) => {
-                                    app.cores.widgets.toggleVisibility(manifest._id, visible)
-                                }}
-                            />
-                        </React.Fragment>
-                    })
-                }
+    React.useEffect(() => {
+        if (app.layout.tools_bar) {
+            app.layout.tools_bar.toggleVisibility(true)
+        }
+    }, [])
 
-                <div
-                    className="widget_load_list_item"
-                    style={{
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                    }}
+    return <div className="widgets-manager">
+        <h1>Widgets</h1>
+
+        <div className="widgets-manager-list">
+            {
+                Array.isArray(loadedWidgets) && loadedWidgets.map((manifest) => {
+                    return <React.Fragment>
+                        <WidgetItemPreview
+                            manifest={manifest}
+                            onRemove={() => {
+                                app.cores.widgets.uninstall(manifest._id)
+                            }}
+                            onInstall={() => {
+                                app.cores.widgets.install(manifest._id)
+                            }}
+                            onUpdate={() => {
+                                app.cores.widgets.install(manifest._id, {
+                                    update: true,
+                                })
+                            }}
+                            onChangeVisible={(visible) => {
+                                app.cores.widgets.toggleVisibility(manifest._id, visible)
+                            }}
+                        />
+                    </React.Fragment>
+                })
+            }
+
+            <div
+                className="widget_load_list_item"
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }}
+            >
+                <antd.Button
+                    type="primary"
+                    icon={<Icons.FiPlus />}
+                    onClick={() => { }}
                 >
-                    <antd.Button
-                        type="primary"
-                        icon={<Icons.FiPlus />}
-                        onClick={openWidgetsBrowserModal}
-                    >
-                        Install more
-                    </antd.Button>
-                </div>
+                    Install more
+                </antd.Button>
             </div>
         </div>
-    }
-}
\ No newline at end of file
+    </div>
+}
+
+export default WidgetsManager
\ No newline at end of file
diff --git a/packages/app/src/settings/widgets/index.jsx b/packages/app/src/settings/widgets/index.jsx
index 88d1e25a..b04bf07e 100755
--- a/packages/app/src/settings/widgets/index.jsx
+++ b/packages/app/src/settings/widgets/index.jsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import WidgetsManager from "../components/widgetsManager"
 
 export default {
@@ -7,17 +5,5 @@ export default {
     icon: "FiList",
     label: "Widgets",
     group: "app",
-    render: () => {
-        React.useEffect(() => {
-            if (app.layout.tools_bar) {
-                app.layout.tools_bar.toggleVisibility(true)
-            }
-        }, [])
-
-        return <div>
-            <h1>Widgets</h1>
-
-            <WidgetsManager />
-        </div>
-    },
+    render: WidgetsManager
 }
\ No newline at end of file
diff --git a/packages/app/src/styles/fixments.less b/packages/app/src/styles/fixments.less
index c8524e52..bd946a93 100755
--- a/packages/app/src/styles/fixments.less
+++ b/packages/app/src/styles/fixments.less
@@ -577,7 +577,8 @@
 }
 
 // fix input
-.ant-input {
+.ant-input,
+.ant-mentions {
     background-color: var(--background-color-accent);
 
     color: var(--text-color);
@@ -588,11 +589,37 @@
     }
 }
 
-.ant-input-affix-wrapper {
-    background-color: var(--background-color-accent);
+.ant-mentions-outlined {
+    background: transparent;
 
+    &:hover {
+        background: transparent;
+        background-color: var(--background-color-accent) !important;
+    }
+
+    &:focus {
+        background: transparent;
+        background-color: var(--background-color-accent) !important;
+    }
+
+    &:focus-within {
+        background: transparent;
+        background-color: var(--background-color-accent) !important;
+    }
+}
+
+.ant-input-affix-wrapper,
+.ant-mentions-affix-wrapper {
+    background: transparent;
+    background-color: var(--background-color-accent);
     color: var(--text-color);
 
+    border: 0 !important;
+
+    :hover {
+        border: 0 !important;
+    }
+
     ::placeholder {
         color: var(--text-color);
         opacity: 0.5;
diff --git a/packages/app/src/styles/index.less b/packages/app/src/styles/index.less
index febf227e..9d526676 100755
--- a/packages/app/src/styles/index.less
+++ b/packages/app/src/styles/index.less
@@ -83,6 +83,8 @@ a {
 
 	transition: all 150ms ease-in-out;
 
+	overflow-x: hidden;
+
 	&.electron {
 		.ant-layout-sider {
 			padding-top: 0px;
@@ -167,6 +169,13 @@ html {
 	// 	}
 	// }
 
+	&.compact-mode {
+		.content_layout {
+			padding: 0 !important;
+			margin: 0 !important;
+		}
+	}
+
 	&.centered-content {
 		.content_layout {
 			margin: 0 auto;
diff --git a/packages/server/db_models/extension/index.js b/packages/server/db_models/extension/index.js
index afb63f68..1b5cbb81 100644
--- a/packages/server/db_models/extension/index.js
+++ b/packages/server/db_models/extension/index.js
@@ -2,13 +2,33 @@ export default {
     name: "Extension",
     collection: "extensions",
     schema: {
+        user_id: {
+            type: String,
+            required: true
+        },
+        assetsUrl: {
+            type: String,
+            required: true
+        },
+        srcUrl: {
+            type: String,
+            required: true
+        },
+        registryId: {
+            type: String,
+            required: true
+        },
+        packageUrl: {
+            type: String,
+            required: true
+        },
         version: {
             type: String,
             required: true
         },
-        title: {
+        name: {
             type: String,
-            default: "Untitled"
+            default: "untitled"
         },
         description: {
             type: String,
@@ -22,9 +42,5 @@ export default {
             type: Date,
             required: true,
         },
-        experimental: {
-            type: Boolean,
-            default: false
-        },
     }
 }
\ No newline at end of file
diff --git a/packages/server/gateway/proxy.js b/packages/server/gateway/proxy.js
index b23546c3..a5ab5033 100644
--- a/packages/server/gateway/proxy.js
+++ b/packages/server/gateway/proxy.js
@@ -172,12 +172,14 @@ export default class Proxy {
 
         if (!route) {
             res.statusCode = 404
-            res.end(`
-                {
-                    "error": "404 Not found"
-                }
-            `)
-            return
+
+            res.end(JSON.stringify({
+                error: "Gateway route not found",
+                details: "The gateway route you are trying to access does not exist, maybe the service is down...",
+                namespace: namespace,
+            }))
+
+            return null
         }
 
         if (route.pathRewrite) {
diff --git a/packages/server/services/ems/ipcEvents/accountActivation.js b/packages/server/services/ems/ipcEvents/accountActivation.js
index 1c6bf946..1614b93a 100644
--- a/packages/server/services/ems/ipcEvents/accountActivation.js
+++ b/packages/server/services/ems/ipcEvents/accountActivation.js
@@ -1,8 +1,6 @@
 import templates from "../templates"
 
 export default async (ctx, data) => {
-    console.log(`EMS Send account activation `, data)
-    
     const { user, activation_code } = data
 
     const result = await ctx.mailTransporter.sendMail({
diff --git a/packages/server/services/marketplace/classes/extension/index.js b/packages/server/services/marketplace/classes/extension/index.js
new file mode 100644
index 00000000..9a58d3a1
--- /dev/null
+++ b/packages/server/services/marketplace/classes/extension/index.js
@@ -0,0 +1,3 @@
+export default class Extension {
+    static resolve = require("./methods/resolve").default
+}
\ No newline at end of file
diff --git a/packages/server/services/marketplace/classes/extension/methods/resolve.js b/packages/server/services/marketplace/classes/extension/methods/resolve.js
new file mode 100644
index 00000000..cc61dcc5
--- /dev/null
+++ b/packages/server/services/marketplace/classes/extension/methods/resolve.js
@@ -0,0 +1,24 @@
+import { Extension } from "@db_models"
+
+export default async function resolve(payload) {
+    let { user_id, pkg } = payload
+
+    const [pkgName, pkgVersion] = pkg.split("@")
+
+    if (!pkgVersion) {
+        pkgVersion = "latest"
+    }
+
+    if (pkgVersion === "latest") {
+        return await Extension.findOne({
+            user_id,
+            name: pkgName,
+        }).sort({ version: -1 }).limit(1).exec()
+    }
+
+    return await Extension.findOne({
+        user_id,
+        name: pkgName,
+        version: pkgVersion,
+    })
+}
\ No newline at end of file
diff --git a/packages/server/services/marketplace/marketplace.service.js b/packages/server/services/marketplace/marketplace.service.js
index d73414b6..a01cd9da 100755
--- a/packages/server/services/marketplace/marketplace.service.js
+++ b/packages/server/services/marketplace/marketplace.service.js
@@ -1,6 +1,8 @@
 import { Server } from "linebridge"
+import B2 from "backblaze-b2"
 
 import DbManager from "@shared-classes/DbManager"
+import CacheService from "@shared-classes/CacheService"
 
 import SharedMiddlewares from "@shared-middlewares"
 
@@ -16,10 +18,21 @@ class API extends Server {
 
     contexts = {
         db: new DbManager(),
+        b2: new B2({
+            applicationKeyId: process.env.B2_KEY_ID,
+            applicationKey: process.env.B2_APP_KEY,
+        }),
+        cache: new CacheService({
+            fsram: false
+        }),
     }
 
     async onInitialize() {
         await this.contexts.db.initialize()
+        await this.contexts.b2.authorize()
+
+        global.cache = this.contexts.cache
+        global.b2 = this.contexts.b2
     }
 
     handleWsAuth = require("@shared-lib/handleWsAuth").default
diff --git a/packages/server/services/marketplace/package.json b/packages/server/services/marketplace/package.json
index 4aaff239..fe9965a2 100755
--- a/packages/server/services/marketplace/package.json
+++ b/packages/server/services/marketplace/package.json
@@ -2,9 +2,10 @@
     "name": "marketplace",
     "version": "0.60.2",
     "dependencies": {
-        "7zip-min": "^1.4.4",
         "@octokit/rest": "^19.0.7",
+        "7zip-min": "^1.4.4",
+        "backblaze-b2": "^1.7.0",
         "sucrase": "^3.32.0",
         "uglify-js": "^3.17.4"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/get.js b/packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/get.js
new file mode 100644
index 00000000..a24347b4
--- /dev/null
+++ b/packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/get.js
@@ -0,0 +1,10 @@
+import ExtensionClass from "@classes/extension"
+
+export default async (req) => {
+    const { user_id, pkg } = req.params
+
+    return await ExtensionClass.resolveManifest({
+        user_id,
+        pkg,
+    })
+}
\ No newline at end of file
diff --git a/packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/main/get.js b/packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/main/get.js
new file mode 100644
index 00000000..70a190ba
--- /dev/null
+++ b/packages/server/services/marketplace/routes/extensions/[user_id]/[pkg]/main/get.js
@@ -0,0 +1,12 @@
+import ExtensionClass from "@classes/extension"
+
+export default async (req, res) => {
+    const { user_id, pkg } = req.params
+
+    const manifest = await ExtensionClass.resolve({
+        user_id,
+        pkg,
+    })
+
+    return manifest
+} 
\ No newline at end of file
diff --git a/packages/server/services/marketplace/routes/extensions/publish/put.js b/packages/server/services/marketplace/routes/extensions/publish/put.js
new file mode 100644
index 00000000..89d24acf
--- /dev/null
+++ b/packages/server/services/marketplace/routes/extensions/publish/put.js
@@ -0,0 +1,133 @@
+import { Extension } from "@db_models"
+
+import fs from "node:fs"
+import path from "node:path"
+import sevenzip from "7zip-min"
+
+async function uploadFolderToB2(bucketId, folderPath, b2Directory) {
+    try {
+        const uploadFiles = async (dir) => {
+            const files = fs.readdirSync(dir)
+
+            for (const file of files) {
+                const fullPath = path.join(dir, file)
+                const stats = fs.statSync(fullPath)
+
+                if (stats.isDirectory()) {
+                    await uploadFiles(fullPath)
+                } else {
+                    const fileData = fs.readFileSync(fullPath)
+                    const b2FileName = path.join(b2Directory, path.relative(folderPath, fullPath)).replace(/\\/g, '/')
+
+                    console.log(`Uploading ${b2FileName}...`)
+
+                    const uploadUrl = await b2.getUploadUrl({
+                        bucketId: bucketId,
+                    })
+
+                    await b2.uploadFile({
+                        uploadUrl: uploadUrl.data.uploadUrl,
+                        uploadAuthToken: uploadUrl.data.authorizationToken,
+                        fileName: b2FileName,
+                        data: fileData,
+                    })
+
+                    console.log(`Uploaded ${b2FileName}`)
+                }
+            }
+        }
+
+        await uploadFiles(folderPath)
+        console.log('All files uploaded successfully.')
+    } catch (error) {
+        console.error('Error uploading folder:', error)
+    }
+}
+
+export default {
+    middlewares: ["withAuthentication"],
+    fn: async (req, res) => {
+        let { pkg } = req.headers
+
+        if (!pkg) {
+            throw new OperationError(400, "Missing package")
+        }
+
+        if (!req.auth) {
+            throw new OperationError(401, "Unauthorized")
+        }
+
+        pkg = JSON.parse(pkg)
+
+        const { user_id } = req.auth.session
+        const registryId = `${user_id}/${pkg.name}@${pkg.version}`
+        const s3Path = `${process.env.B2_BUCKET_ID}/extensions/${pkg.name}/${pkg.version}`
+        const assetsUrl = `https://${process.env.B2_CDN_ENDPOINT}/${process.env.B2_BUCKET}/${s3Path}`
+
+        const workPath = path.resolve(global.cache.constructor.cachePath, String(Date.now()), registryId)
+        const pkgPath = path.resolve(workPath, "pkg")
+        const bundlePath = path.resolve(workPath, "bundle.7z")
+
+        // console.log({
+        //     user_id,
+        //     pkg,
+        //     registryId,
+        //     s3Path,
+        //     workPath,
+        //     bundlePath
+        // })
+
+        let extensionRegistry = await Extension.findOne({
+            user_id: user_id,
+            registryId: registryId,
+            version: pkg.version
+        })
+
+        if (extensionRegistry) {
+            throw new OperationError(400, "Extension already exists")
+        }
+
+        try {
+            if (!fs.existsSync(workPath)) {
+                await fs.promises.mkdir(workPath, { recursive: true })
+            }
+
+            // read multipart form
+            await req.multipart(async (field) => {
+                await field.write(bundlePath)
+            })
+
+            await new Promise((resolve, reject) => {
+                sevenzip.unpack(bundlePath, pkgPath, (error) => {
+                    if (error) {
+                        fs.promises.rm(workPath, { recursive: true, force: true })
+                        reject(error)
+                    } else {
+                        resolve()
+                    }
+                })
+            })
+
+            await uploadFolderToB2(process.env.B2_BUCKET_ID, pkgPath, s3Path)
+
+            fs.promises.rm(workPath, { recursive: true, force: true })
+
+
+            extensionRegistry = await Extension.create({
+                user_id: user_id,
+                name: pkg.name,
+                version: pkg.version,
+                registryId: registryId,
+                assetsUrl: assetsUrl,
+                srcUrl: `${assetsUrl}/src`,
+                packageUrl: `${assetsUrl}/package.json`,
+                created_at: Date.now(),
+            })
+
+            return extensionRegistry
+        } catch (error) {
+            fs.promises.rm(workPath, { recursive: true, force: true })
+            throw error
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/server/services/marketplace/routes/publish/post.js b/packages/server/services/marketplace/routes/publish/post.js
deleted file mode 100644
index b4704500..00000000
--- a/packages/server/services/marketplace/routes/publish/post.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Extension } from "@db_models"
-
-export default {
-    middlewares: ["withAuthentication"],
-    fn: async (req, res) => {
-        
-    }
-}
\ No newline at end of file
diff --git a/packages/server/services/music/routes/music/lyrics/[track_id]/put.js b/packages/server/services/music/routes/music/lyrics/[track_id]/put.js
index 58298384..8c8f3481 100644
--- a/packages/server/services/music/routes/music/lyrics/[track_id]/put.js
+++ b/packages/server/services/music/routes/music/lyrics/[track_id]/put.js
@@ -18,6 +18,13 @@ export default {
             throw new OperationError(403, "Unauthorized")
         }
 
+        console.log(`Setting lyrics for track ${track_id} >`, {
+            track_id: track_id,
+            video_source: video_source,
+            lrc: lrc,
+            track: track,
+        })
+
         let trackLyric = await TrackLyric.findOne({
             track_id: track_id
         }).lean()
@@ -35,10 +42,9 @@ export default {
                 trackLyric.sync_audio_at = sync_audio_at
             }
 
-            trackLyric = await TrackLyric.findOneAndUpdate(
-                {
-                    _id: trackLyric._id
-                },
+            trackLyric = await TrackLyric.findOneAndUpdate({
+                track_id: track_id
+            },
                 trackLyric
             )
         } else {
diff --git a/packages/server/services/posts/routes/posts/trending/[trending]/get.js b/packages/server/services/posts/routes/posts/trending/[trending]/get.js
new file mode 100644
index 00000000..1a022c49
--- /dev/null
+++ b/packages/server/services/posts/routes/posts/trending/[trending]/get.js
@@ -0,0 +1,25 @@
+import { Post } from "@db_models"
+import fullfill from "@classes/posts/methods/fullfill"
+
+export default {
+    middlewares: ["withOptionalAuthentication"],
+    fn: async (req) => {
+        const { limit, trim } = req.query
+
+        let result = await Post.find({
+            message: {
+                $regex: new RegExp(`#${req.params.trending}`, "gi")
+            }
+        })
+            .sort({ created_at: -1 })
+            .skip(trim ?? 0)
+            .limit(limit ?? 20)
+
+        result = await fullfill({
+            posts: result,
+            for_user_id: req.auth.session.user_id,
+        })
+
+        return result
+    }
+}
\ No newline at end of file
diff --git a/packages/server/services/posts/routes/posts/trendings/get.js b/packages/server/services/posts/routes/posts/trendings/get.js
index 6f099fc8..1301f38b 100644
--- a/packages/server/services/posts/routes/posts/trendings/get.js
+++ b/packages/server/services/posts/routes/posts/trendings/get.js
@@ -2,56 +2,44 @@ import { Post } from "@db_models"
 import { DateTime } from "luxon"
 
 const maxDaysOld = 30
+const maxHashtags = 5
 
 export default async (req) => {
     // fetch all posts that contain in message an #, with a maximun of 5 diferent hashtags
-    let posts = await Post.find({
-        message: {
-            $regex: /#/gi
-        },
-        created_at: {
-            $gte: DateTime.local().minus({ days: maxDaysOld }).toISO()
-        }
-    })
-        .lean()
+    const startDate = DateTime.local().minus({ days: maxDaysOld }).toISO()
 
-    // get the hastag content
-    posts = posts.map((post) => {
-        post.hashtags = post.message.match(/#[a-zA-Z0-9_]+/gi)
-
-        post.hashtags = post.hashtags.map((hashtag) => {
-            return hashtag.substring(1)
-        })
-
-        return post
-    })
-
-    // build trendings
-    let trendings = posts.reduce((acc, post) => {
-        post.hashtags.forEach((hashtag) => {
-            if (acc.find((trending) => trending.hashtag === hashtag)) {
-                acc = acc.map((trending) => {
-                    if (trending.hashtag === hashtag) {
-                        trending.count++
-                    }
-
-                    return trending
-                })
-            } else {
-                acc.push({
-                    hashtag,
-                    count: 1
-                })
+    const trendings = await Post.aggregate([
+        {
+            $match: {
+                message: { $regex: /#/gi },
+                created_at: { $gte: startDate }
             }
-        })
+        },
+        {
+            $project: {
+                hashtags: {
+                    $regexFindAll: {
+                        input: "$message",
+                        regex: /#[a-zA-Z0-9_]+/g
+                    }
+                }
+            }
+        },
+        { $unwind: "$hashtags" },
+        {
+            $project: {
+                hashtag: { $substr: ["$hashtags.match", 1, -1] }
+            }
+        },
+        {
+            $group: {
+                _id: "$hashtag",
+                count: { $sum: 1 }
+            }
+        },
+        { $sort: { count: -1 } },
+        { $limit: maxHashtags }
+    ])
 
-        return acc
-    }, [])
-
-    // sort by count
-    trendings = trendings.sort((a, b) => {
-        return b.count - a.count
-    })
-
-    return trendings
+    return trendings.map(({ _id, count }) => ({ hashtag: _id, count }));
 }
\ No newline at end of file
diff --git a/packages/server/services/users/routes/users/search/get.js b/packages/server/services/users/routes/users/search/get.js
new file mode 100644
index 00000000..2faf1a3b
--- /dev/null
+++ b/packages/server/services/users/routes/users/search/get.js
@@ -0,0 +1,44 @@
+import { User } from "@db_models"
+
+const ALLOWED_FIELDS = [
+    "username",
+    "publicName",
+    "id",
+]
+
+export default {
+    middlewares: ["withOptionalAuthentication"],
+    fn: async (req, res) => {
+        const { keywords, limit = 50 } = req.query
+
+        let filters = {}
+
+        if (keywords) {
+            keywords.split(";").forEach((pair) => {
+                const [field, value] = pair.split(":")
+
+                if (value === "" || value === " ") {
+                    return
+                }
+
+                // Verifica que el campo esté en los permitidos y que tenga un valor
+                if (ALLOWED_FIELDS.includes(field) && value) {
+                    // Si el campo es "id", se busca coincidencia exacta
+                    if (field === "id") {
+                        filters[field] = value
+                    } else {
+                        // Para otros campos, usa $regex para coincidencias parciales
+                        filters[field] = { $regex: `\\b${value}`, $options: "i" }
+                    }
+                }
+            })
+        }
+
+        console.log(filters)
+
+        let users = await User.find(filters)
+            .limit(limit)
+
+        return users
+    }
+}
\ No newline at end of file
diff --git a/scripts/publishWidget.js b/scripts/publishWidget.js
index 07779e88..2ba8af6f 100755
--- a/scripts/publishWidget.js
+++ b/scripts/publishWidget.js
@@ -1,12 +1,11 @@
+#!/usr/bin/env node
 import path from "path"
 import fs from "fs"
 import axios from "axios"
 import sevenzip from "7zip-min"
 import formdata from "form-data"
 
-const tmpPath = path.join(process.cwd(), ".tmp")
-
-const widgetsApi = "http://localhost:3040"
+const marketplaceAPIOrigin = "https://indev.comty.app/api/extensions"
 const token = process.argv[2]
 
 const excludedFiles = [
@@ -17,9 +16,18 @@ const excludedFiles = [
     "/package-lock.json",
 ]
 
-async function copyToTmp(origin) {
+const rootPath = process.cwd()
+const tmpPath = path.join(rootPath, ".tmp")
+const buildPath = path.join(tmpPath, "build")
+const bundlePath = path.join(tmpPath, "bundle.7z")
+
+async function copySources(origin, to) {
     const files = fs.readdirSync(origin)
 
+    if (!fs.existsSync(to)) {
+        await fs.promises.mkdir(to, { recursive: true })
+    }
+
     for (const file of files) {
         const filePath = path.join(origin, file)
 
@@ -33,14 +41,9 @@ async function copyToTmp(origin) {
         }
 
         if (fs.lstatSync(filePath).isDirectory()) {
-            await copyToTmp(filePath)
+            await copySources(filePath, path.join(to, file))
         } else {
-            const fileContent = fs.readFileSync(filePath)
-            const relativePath = filePath.replace(process.cwd(), "")
-            const tmpFilePath = path.join(tmpPath, relativePath)
-
-            fs.mkdirSync(path.dirname(tmpFilePath), { recursive: true })
-            fs.writeFileSync(tmpFilePath, fileContent)
+            await fs.promises.copyFile(filePath, path.join(to, file))
         }
     }
 }
@@ -63,50 +66,69 @@ async function main() {
         return
     }
 
-    const rootPath = process.cwd()
-
     // create a .tmp folder
-    if (!fs.existsSync(tmpPath)) {
-        fs.mkdirSync(tmpPath)
+    if (fs.existsSync(tmpPath)) {
+        await fs.promises.rm(tmpPath, { recursive: true, force: true })
     }
 
-    const bundlePath = path.join(rootPath, "bundle.7z")
+    try {
+        // try to read package.json
+        if (!fs.existsSync(path.resolve(rootPath, "package.json"))) {
+            console.error("🛑 package.json not found")
+            return
+        }
 
-    console.log("📦 Creating bundle...")
+        const packageJSON = require(path.resolve(rootPath, "package.json"))
 
-    await copyToTmp(rootPath)
+        // check if package.json has a main file
+        if (!packageJSON.main) {
+            console.error("🛑 package.json does not have a main file")
+            return
+        }
 
-    await createBundle(`${tmpPath}/*`, bundlePath)
+        if (!fs.existsSync(path.resolve(rootPath, packageJSON.main))) {
+            console.error("🛑 main file not found")
+            return
+        }
+        
+        console.log(packageJSON)
 
-    await fs.promises.rm(tmpPath, { recursive: true, force: true })
+        console.log("📦 Creating bundle...")
 
-    console.log("📦✅ Bundle created successfully")
+        await copySources(rootPath, buildPath)
+        await createBundle(`${buildPath}/*`, bundlePath)
 
-    console.log("🚚 Publishing bundle...")
+        console.log("📦✅ Bundle created successfully")
 
-    const formData = new formdata()
+        console.log("🚚 Publishing bundle...")
 
-    formData.append("bundle", fs.createReadStream(bundlePath))
+        const formData = new formdata()
 
-    const response = await axios({
-        method: "POST",
-        url: `${widgetsApi}/widgets/publish`,
-        headers: {
-            ...formData.getHeaders(),
-            Authorization: `Bearer ${token}`,
-        },
-        data: formData,
-    }).catch((error) => {
-        console.error("🛑 Error while publishing bundle \n\t", error.response?.data ?? error)
+        formData.append("file", fs.createReadStream(bundlePath))
 
-        return false
-    })
+        const response = await axios({
+            method: "PUT",
+            url: `${marketplaceAPIOrigin}/publish`,
+            headers: {
+                ...formData.getHeaders(),
+                pkg: JSON.stringify(packageJSON),
+                Authorization: `Bearer ${token}`,
+            },
+            data: formData,
+        }).catch((error) => {
+            console.error("🛑 Error while publishing bundle \n\t", error.response?.data ?? error)
 
-    await fs.promises.rm(bundlePath, { recursive: true, force: true })
-    await fs.promises.rm(tmpPath, { recursive: true, force: true })
+            return false
+        })
 
-    if (response) {
-        console.log("🚚✅ Bundle published successfully! \n", response.data)
+        if (response) {
+            console.log("🚚✅ Bundle published successfully! \n", response.data)
+        }
+
+        await fs.promises.rm(tmpPath, { recursive: true, force: true })
+    } catch (error) {
+        console.error("🛑 Error while publishing bundle \n\t", error)
+        await fs.promises.rm(tmpPath, { recursive: true, force: true })
     }
 }
 
diff --git a/widgets/Clock/package.json b/widgets/Clock/package.json
new file mode 100644
index 00000000..bb0cf10b
--- /dev/null
+++ b/widgets/Clock/package.json
@@ -0,0 +1,6 @@
+{
+    "name": "clock",
+    "version": "1.0.6",
+    "description": "Display the current time",
+    "main": "./src/extension.js"
+}
\ No newline at end of file
diff --git a/widgets/Clock/src/clock.jsx b/widgets/Clock/src/clock.jsx
new file mode 100644
index 00000000..f0054ede
--- /dev/null
+++ b/widgets/Clock/src/clock.jsx
@@ -0,0 +1,21 @@
+import React from "react"
+
+import "./index.less"
+
+const Clock = () => {
+    const [time, setTime] = React.useState(new Date())
+
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(new Date())
+        }, 1000)
+
+        return () => clearInterval(interval)
+    }, [])
+
+    return <div className="clock">
+        {time.toLocaleTimeString()}
+    </div>
+}
+
+export default Clock
\ No newline at end of file
diff --git a/widgets/Clock/src/extension.js b/widgets/Clock/src/extension.js
new file mode 100644
index 00000000..cbc3cea8
--- /dev/null
+++ b/widgets/Clock/src/extension.js
@@ -0,0 +1,45 @@
+export default class Clock {
+    registerWidgets = [
+        {
+            name: "Clock",
+            description: "Display the current time",
+            component: () => import("./clock.jsx"),
+        }
+    ]
+
+    registerPages = [
+        {
+            path: "/clock",
+            component: () => import("./clock.jsx"),
+        }
+    ]
+
+    public = {
+        echo: (...str) => {
+            this.console.log(...str)
+        },
+        fib: (n) => {
+            let a = 0, b = 1
+            for (let i = 0; i < n; i++) {
+                let c = a + b
+                a = b
+                b = c
+            }
+            return a
+        }
+    }
+
+    events = {
+        "test": (data) => {
+            this.console.log("test")
+
+            if (data) {
+                this.console.log(data)
+            }
+        }
+    }
+
+    async onInitialize() {
+        this.console.log("Hi from the extension worker!")
+    }
+}
\ No newline at end of file
diff --git a/widgets/Clock/src/index.less b/widgets/Clock/src/index.less
new file mode 100644
index 00000000..4b5556dc
--- /dev/null
+++ b/widgets/Clock/src/index.less
@@ -0,0 +1,6 @@
+.clock {
+    font-size: 2rem;
+    color: blue;
+
+    font-family: "DM Mono", monospace;
+}
\ No newline at end of file