- }
- className="closeButton"
- onClick={this.handleModalClose}
- shape="circle"
- />
-
-
- }
-
- render() {
- return
- {
- React.createElement(this.state.currentRender, {
- ...this.state.renderParams.props ?? {},
- close: this.close,
- })
- }
-
- + -
+ }) \ No newline at end of file diff --git a/packages/app/src/components/Music/PlaylistView/index.jsx b/packages/app/src/components/Music/PlaylistView/index.jsx index b096aaf9..4ef1530b 100755 --- a/packages/app/src/components/Music/PlaylistView/index.jsx +++ b/packages/app/src/components/Music/PlaylistView/index.jsx @@ -21,19 +21,19 @@ import MusicModel from "@models/music" import "./index.less" const PlaylistTypeDecorators = { - "single": (props) => + "single": () =>
@@ -257,9 +259,9 @@ export default (props) => {
{
- playlist.type && PlaylistTypeDecorators[playlist.type] &&
+ playlistType && PlaylistTypeDecorators[playlistType] &&
-
{
routes.map((route, index) => {
+ const declaration = findRouteDeclaration(route.path)
+
return
{
- PlaylistTypeDecorators[playlist.type]()
+ PlaylistTypeDecorators[playlistType]()
}
}
diff --git a/packages/app/src/components/PagePanels/index.jsx b/packages/app/src/components/PagePanels/index.jsx
index 1655dbe4..13bde614 100755
--- a/packages/app/src/components/PagePanels/index.jsx
+++ b/packages/app/src/components/PagePanels/index.jsx
@@ -84,6 +84,10 @@ export class PagePanelWithNavMenu extends React.Component {
return <>
}
+ if (this.props.tabs.length === 0) {
+ return <>
+ }
+
// slip the active tab by splitting on "."
if (!this.state.activeTab) {
console.error("PagePanelWithNavMenu: activeTab is not defined")
diff --git a/packages/app/src/components/PostCard/components/actions/index.jsx b/packages/app/src/components/PostCard/components/actions/index.jsx
index 0550df22..d095439d 100755
--- a/packages/app/src/components/PostCard/components/actions/index.jsx
+++ b/packages/app/src/components/PostCard/components/actions/index.jsx
@@ -64,7 +64,7 @@ export default (props) => {
onClickReply,
} = props.actions ?? {}
- const genItems = () => {
+ const generateMoreMenuItems = () => {
let items = MoreActionsItems
if (isSelf) {
@@ -104,7 +104,7 @@ export default (props) => {
-
- {children}
- )
- }
-}
-
-class DefaultWindowRender extends React.Component {
- state = {
- actions: [],
- dimensions: {
- height: this.props.height ?? 600,
- width: this.props.width ?? 400,
- },
- position: this.props.defaultPosition,
- visible: false,
- }
-
- componentDidMount = () => {
- this.setDefaultActions()
-
- if (typeof this.props.actions !== "undefined") {
- if (Array.isArray(this.props.actions)) {
- const actions = this.state.actions ?? []
-
- this.props.actions.forEach((action) => {
- actions.push(action)
- })
-
- this.setState({ actions })
- }
- }
-
- if (!this.state.position) {
- this.setState({ position: this.getCenterPosition() })
- }
-
- this.toggleVisibility(true)
- }
-
- toggleVisibility = (to) => {
- this.setState({ visible: to ?? !this.state.visible })
- }
-
- getCenterPosition = () => {
- const dimensions = this.state?.dimensions ?? {}
-
- const windowHeight = dimensions.height ?? 600
- const windowWidth = dimensions.width ?? 400
-
- return {
- x: window.innerWidth / 2 - windowWidth / 2,
- y: window.innerHeight / 2 - windowHeight / 2,
- }
- }
-
- setDefaultActions = () => {
- const { actions } = this.state
-
- actions.push({
- key: "close",
- render: () => {
- this.setState({
- dimensions: {
- width: ref.offsetWidth,
- height: ref.offsetHeight,
- },
- position,
- })
- }}
- minWidth={
- this.props.minWidth
- }
- minHeight={
- this.props.minHeight
- }
- enableResizing={
- this.props.enableResizing ?? true
- }
- disableDragging={
- this.props.disableDragging ?? false
- }
- dragHandleClassName={
- this.props.dragHandleClassName ?? "window_topbar"
- }
- bounds={
- this.props.bounds ?? "#root"
- }
- >
- {
- this.props.useWrapper
- ?
- )
- }
-}
-
-export { DOMWindow, DefaultWindowRender }
\ No newline at end of file
diff --git a/packages/app/src/components/RenderWindow/index.less b/packages/app/src/components/RenderWindow/index.less
deleted file mode 100755
index 921e0306..00000000
--- a/packages/app/src/components/RenderWindow/index.less
+++ /dev/null
@@ -1,93 +0,0 @@
-@wrapper_background: rgba(255, 255, 255, 1);
-
-@topbar_height: 30px;
-@topbar_background: rgba(0, 0, 0, 0.4);
-
-.window_wrapper {
- border-radius: 12px;
-
- background-color: @wrapper_background;
- border: 1px solid rgba(161, 133, 133, 0.2);
- overflow: hidden;
-
- &.translucid {
- border: unset;
- background-color: rgba(0, 0, 0, 0.2);
-
- backdrop-filter: blur(10px);
- --webkit-backdrop-filter: blur(10px);
- filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
- }
-}
-
-.window_topbar {
- position: sticky;
- z-index: 51;
- background-color: @topbar_background;
-
- height: @topbar_height;
- width: 100%;
-
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
-
- > div {
- margin: 0 5px;
- line-height: 0;
- }
-
- .title {
- margin-left: 20px;
-
- color: #fff - @topbar_background;
-
- font-size: 13px;
- font-style: italic;
- font-family: "JetBrains Mono", monospace;
- }
-
- .actions {
- display: flex;
- flex-direction: row-reverse;
- align-items: center;
- justify-content: end;
-
- color: #fff - @topbar_background;
-
- > div {
- transition: all 150ms ease-in-out;
- margin-right: 10px;
- cursor: pointer;
-
- height: fit-content;
- width: fit-content;
- line-height: 0;
-
- display: flex;
- align-items: center;
- justify-content: end;
- }
- > div:hover {
- color: var(--primary-color);
- }
- }
-}
-
-.window_body {
- z-index: 50;
-
- padding: 10px 20px;
- height: calc(100% - @topbar_height);
- width: 100%;
-
- overflow: overlay;
- user-select: text !important;
- --webkit-user-select: text !important;
-
- > div {
- user-select: text !important;
- --webkit-user-select: text !important;
- }
-}
diff --git a/packages/app/src/components/WidgetsBrowser/index.jsx b/packages/app/src/components/WidgetsBrowser/index.jsx
index 1a987f4a..2d74ed9e 100755
--- a/packages/app/src/components/WidgetsBrowser/index.jsx
+++ b/packages/app/src/components/WidgetsBrowser/index.jsx
@@ -5,12 +5,11 @@ import { Icons } from "@components/Icons"
import WidgetItemPreview from "@components/WidgetItemPreview"
import useRequest from "comty.js/hooks/useRequest"
-import WidgetModel from "comty.js/models/widget"
import "./index.less"
export const WidgetBrowser = (props) => {
- const [L_Widgets, R_Widgets, E_Widgets, M_Widgets] = useRequest(WidgetModel.browse)
+ const [L_Widgets, R_Widgets, E_Widgets, M_Widgets] = []
const [searchValue, setSearchValue] = React.useState("")
diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js
index 35b86883..4502f3b8 100755
--- a/packages/app/src/components/index.js
+++ b/packages/app/src/components/index.js
@@ -1,4 +1,3 @@
-import * as Layout from "./Layout"
export { default as Footer } from "./Footer"
export { default as RenderError } from "./RenderError"
@@ -40,9 +39,4 @@ export { default as PostCreator } from "./PostCreator"
export { default as UserBadges } from "./UserBadges"
export { default as UserCard } from "./UserCard"
export { default as FollowersList } from "./FollowersList"
-export { default as UserPreview } from "./UserPreview"
-
-// OTHERS
-export * as Window from "./RenderWindow"
-
-export { Layout }
\ No newline at end of file
+export { default as UserPreview } from "./UserPreview"
\ No newline at end of file
diff --git a/packages/app/src/cores/contextMenu/components/contextMenu/index.less b/packages/app/src/cores/contextMenu/components/contextMenu/index.less
index 19ff4dfe..3900466f 100755
--- a/packages/app/src/cores/contextMenu/components/contextMenu/index.less
+++ b/packages/app/src/cores/contextMenu/components/contextMenu/index.less
@@ -1,5 +1,5 @@
.contextMenu {
- position: absolute;
+ position: fixed;
z-index: 100000;
display: flex;
@@ -8,7 +8,7 @@
top: 0;
left: 0;
- width: 200px;
+ width: 230px;
height: fit-content;
background-color: var(--background-color-primary);
@@ -16,11 +16,11 @@
border-radius: 8px;
- padding: 10px;
+ padding: 7px;
- font-family: "Recursive", sans-serif;
+ font-weight: 600;
+ font-family: var(--fontFamily);
font-size: 0.8rem;
- font-weight: 500;
color: var(--text-color);
h1,
@@ -42,7 +42,7 @@
align-items: center;
justify-content: space-between;
- padding: 10px 10px 10px 20px;
+ padding: 10px 10px 10px 15px;
transition: all 50ms ease-in-out;
@@ -52,7 +52,7 @@
&:hover {
background-color: var(--background-color-accent);
- padding-left: 25px;
+ padding-left: 18px;
}
&:active {
diff --git a/packages/app/src/cores/contextMenu/context_menu.core.js b/packages/app/src/cores/contextMenu/context_menu.core.js
index 407d9def..f618a295 100755
--- a/packages/app/src/cores/contextMenu/context_menu.core.js
+++ b/packages/app/src/cores/contextMenu/context_menu.core.js
@@ -1,10 +1,10 @@
import React from "react"
import Core from "evite/src/core"
-import { DOMWindow } from "@components/RenderWindow"
import ContextMenu from "./components/contextMenu"
-import InternalContexts from "@config/context-menu"
+import DefaultContenxt from "@config/context-menu/default"
+import PostCardContext from "@config/context-menu/post"
export default class ContextMenuCore extends Core {
static namespace = "contextMenu"
@@ -15,13 +15,10 @@ export default class ContextMenuCore extends Core {
registerContext: this.registerContext.bind(this),
}
- contexts = Object()
-
- DOMWindow = new DOMWindow({
- id: "contextMenu",
- className: "contextMenuWrapper",
- clickOutsideToClose: true,
- })
+ contexts = {
+ ...DefaultContenxt,
+ ...PostCardContext,
+ }
async onInitialize() {
if (app.isMobile) {
@@ -65,27 +62,26 @@ export default class ContextMenuCore extends Core {
contexts.push("default-context")
}
- for await (const context of contexts) {
- let contextObject = this.contexts[context] || InternalContexts[context]
+ for await (const [index, context] of contexts.entries()) {
+ let contextObject = this.contexts[context]
+
+ if (!contextObject) {
+ this.console.warn(`Context ${context} not found`)
+ continue
+ }
if (typeof contextObject === "function") {
- contextObject = await contextObject(parentElement, element, {
+ contextObject = await contextObject(items, parentElement, element, {
close: this.hide,
})
}
// push divider
- if (items.length > 0) {
+ if (contexts.length > 0 && index !== contexts.length - 1) {
items.push({
type: "separator"
})
}
-
- if (Array.isArray(contextObject)) {
- items.push(...contextObject)
- } else {
- items.push(contextObject)
- }
}
// fullfill each item with a correspondent index if missing declared
@@ -142,10 +138,13 @@ export default class ContextMenuCore extends Core {
}
show(payload) {
- this.DOMWindow.render(React.createElement(ContextMenu, payload))
+ app.cores.window_mng.render("context-menu", React.createElement(ContextMenu, payload), {
+ createOrUpdate: true,
+ closeOnClickOutside: true,
+ })
}
hide() {
- this.DOMWindow.remove()
+ app.cores.window_mng.close("context-menu")
}
}
\ No newline at end of file
diff --git a/packages/app/src/cores/notifications/feedback.js b/packages/app/src/cores/notifications/feedback.js
index 9095f064..aaab127b 100644
--- a/packages/app/src/cores/notifications/feedback.js
+++ b/packages/app/src/cores/notifications/feedback.js
@@ -12,7 +12,7 @@ class NotificationFeedback {
return (window.app.cores.settings.get("sfx:notifications_volume") ?? 50) / 100
}
- static playHaptic = async (options = {}) => {
+ static playHaptic = async () => {
if (app.cores.settings.get("haptics:notifications_feedback")) {
await Haptics.vibrate()
}
@@ -28,7 +28,11 @@ class NotificationFeedback {
}
}
- static async feedback(type) {
+ static async feedback({ type = "notification", feedback = true }) {
+ if (!feedback) {
+ return false
+ }
+
NotificationFeedback.playHaptic(type)
NotificationFeedback.playAudio(type)
}
diff --git a/packages/app/src/cores/notifications/notifications.core.js b/packages/app/src/cores/notifications/notifications.core.js
index 314afff5..2776e29d 100755
--- a/packages/app/src/cores/notifications/notifications.core.js
+++ b/packages/app/src/cores/notifications/notifications.core.js
@@ -22,10 +22,15 @@ export default class NotificationCore extends Core {
public = {
new: this.new,
+ close: this.close,
}
- async new(notification, options = {}) {
- NotificationUI.notify(notification, options)
- NotificationFeedback.feedback(options.type)
+ async new(notification) {
+ NotificationUI.notify(notification)
+ NotificationFeedback.feedback(notification)
+ }
+
+ async close(id) {
+ NotificationUI.close(id)
}
}
\ No newline at end of file
diff --git a/packages/app/src/cores/notifications/ui.jsx b/packages/app/src/cores/notifications/ui.jsx
index 770f4a71..a7c296e9 100644
--- a/packages/app/src/cores/notifications/ui.jsx
+++ b/packages/app/src/cores/notifications/ui.jsx
@@ -5,12 +5,7 @@ import { notification as Notf, Space, Button } from "antd"
import { Icons, createIconRender } from "@components/Icons"
class NotificationUI {
- static async notify(
- notification,
- options = {
- type: "info"
- }
- ) {
+ static async notify(notification) {
if (typeof notification === "string") {
notification = {
title: "New notification",
@@ -19,8 +14,8 @@ class NotificationUI {
}
const notfObj = {
- duration: options.duration ?? 4,
- key: options.key ?? Date.now(),
+ duration: typeof notification.duration === "undefined" ? 4 : notification.duration,
+ key: notification.key ?? Date.now(),
}
if (notification.title) {
@@ -73,11 +68,11 @@ class NotificationUI {
notfObj.icon = React.isValidElement(notification.icon) ? notification.icon : (createIconRender(notification.icon) ??
{
- options.actions.map((action, index) => {
+ notification.actions.map((action, index) => {
const handleClick = () => {
if (typeof action.onClick === "function") {
action.onClick()
@@ -101,11 +96,24 @@ class NotificationUI {
)
}
- if (typeof Notf[options.type] !== "function") {
- options.type = "info"
+ if (typeof notification.closable) {
+ notfObj.closable = notification.closable
}
- return Notf[options.type](notfObj)
+ if (notification.type === "loading") {
+ notification.type = "open"
+ notfObj.icon =
+ {
+ React.isValidElement(this.props.children)
+ ? React.cloneElement(this.props.children, ctx)
+ : React.createElement(this.props.children, ctx)
+ }
+
+ }
+
+ render() {
+ const { position, dimensions, visible } = this.state
+
+ if (!visible) {
+ return null
+ }
+
+ return
+
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/cores/windows/index.less b/packages/app/src/cores/windows/index.less
new file mode 100644
index 00000000..83cd8a9c
--- /dev/null
+++ b/packages/app/src/cores/windows/index.less
@@ -0,0 +1,115 @@
+@topbar_height: 30px;
+@topbar_background: var(--background-color-accent);
+
+.window_wrapper {
+ border-radius: 12px;
+
+ background-color: var(--background-color-primary);
+ border: 2px solid var(--border-color);
+
+ //filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
+
+ overflow: hidden;
+}
+
+.window_topbar {
+ position: sticky;
+
+ z-index: 51;
+
+ background-color: @topbar_background;
+
+ color: var(--text-color);
+
+ height: @topbar_height;
+ width: 100%;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ >div {
+ margin: 0 5px;
+ line-height: 0;
+ }
+
+ .title {
+ margin-left: 20px;
+
+ color: var(--text-color);
+
+ font-size: 13px;
+ font-style: italic;
+ font-family: "JetBrains Mono", monospace;
+ }
+
+ .actions {
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+ justify-content: end;
+
+ color: var(--text-color);
+
+ >div {
+ transition: all 150ms ease-in-out;
+ margin-right: 10px;
+ cursor: pointer;
+
+ height: fit-content;
+ width: fit-content;
+ line-height: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ }
+
+ >div:hover {
+ color: var(--primary-color);
+ }
+ }
+}
+
+.window_body {
+ z-index: 50;
+
+ padding: 10px 20px;
+ height: calc(100% - @topbar_height);
+ width: 100%;
+
+ overflow: overlay;
+ user-select: text !important;
+ --webkit-user-select: text !important;
+
+ color: var(--text-color);
+
+ >div {
+ user-select: text !important;
+ --webkit-user-select: text !important;
+ }
+
+ .render_error {
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+
+ width: 100%;
+ height: 100%;
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ code {
+ background-color: var(--background-color-accent);
+
+ padding: 5px;
+ border-radius: 8px;
+
+ user-select: text;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/cores/windows/windows.core.jsx b/packages/app/src/cores/windows/windows.core.jsx
new file mode 100644
index 00000000..0ebe4dda
--- /dev/null
+++ b/packages/app/src/cores/windows/windows.core.jsx
@@ -0,0 +1,151 @@
+import React from "react"
+import Core from "evite/src/core"
+
+import { createRoot } from "react-dom/client"
+
+import DefaultWindow from "./components/defaultWindow"
+
+import DefaultWindowContext from "./components/defaultWindow/context"
+
+import "./index.less"
+
+export default class WindowManager extends Core {
+ static namespace = "window_mng"
+
+ static idMount = "windows"
+
+ root = null
+
+ windows = []
+
+ public = {
+ close: this.close.bind(this),
+ render: this.render.bind(this),
+ }
+
+ async onInitialize() {
+ this.root = document.createElement("div")
+
+ this.root.setAttribute("id", this.constructor.idMount)
+
+ document.body.append(this.root)
+ }
+
+ handleWrapperClick = (id, event) => {
+ const element = this.root.querySelector(`#${id}`)
+
+ if (element) {
+ if (!element.contains(event.target)) {
+ this.close(id)
+ }
+ }
+ }
+
+ /**
+ * Creates a new element with the specified id and appends it to the root element.
+ * If the element already exists and createOrUpdate option is false, it will throw an error.
+ * If the element already exists and createOrUpdate option is true, it will update the element.
+ * If useFrame option is true, it wraps the fragment with a DefaultWindow component before rendering.
+ *
+ * @param {string} id - The id of the element to create or update.
+ * @param {ReactElement} fragment - The React element to render inside the created element.
+ * @param {Object} options - The options for creating or updating the element.
+ * @param {boolean} options.useFrame - Specifies whether to wrap the fragment with a DefaultWindow component.
+ * @param {boolean} options.createOrUpdate - Specifies whether to create a new element or update an existing one.
+ * @return {HTMLElement} The created or updated element.
+ */
+ render(
+ id,
+ fragment,
+ {
+ useFrame = false,
+ createOrUpdate = false,
+ closeOnClickOutside = false,
+ } = {}
+ ) {
+ let element = document.createElement("div")
+ let node = null
+ let win = null
+
+ // check if window already exist
+ if (this.root.querySelector(`#${id}`) && !createOrUpdate) {
+ const newId = `${id}_${Date.now()}`
+
+ this.console.warn(`Window ${id} already exist, overwritting id to ${newId}.\nYou can use {createOrUpdate = true} option to force refresh render of window`)
+
+ id = newId
+ }
+
+ if (this.root.querySelector(`#${id}`) && createOrUpdate) {
+ element = document.getElementById(id)
+
+ win = this.windows.find((_node) => {
+ return _node.id === id
+ })
+
+ if (win) {
+ node = win.node
+ }
+ } else {
+ element.setAttribute("id", id)
+
+ this.root.appendChild(element)
+
+ node = createRoot(element)
+
+ win = {
+ id: id,
+ node: node,
+ }
+
+ this.windows.push(win)
+ }
+
+ if (useFrame) {
+ fragment =
+ {fragment}
+
+ }
+
+ if (closeOnClickOutside) {
+ document.addEventListener("click", (e) => this.handleWrapperClick(id, e))
+ }
+
+ node.render(React.cloneElement(fragment, {
+ close: () => {
+ this.close(id)
+ }
+ }))
+
+ return element
+ }
+
+ /**
+ * Closes the window with the given ID.
+ *
+ * @param {string} id - The ID of the window to be closed.
+ * @return {boolean} Returns true if the window was successfully closed, false otherwise.
+ */
+ close(id) {
+ const element = document.getElementById(id)
+
+ const win = this.windows.find((node) => {
+ return node.id === id
+ })
+
+ if (!win) {
+ this.console.warn(`Window ${id} not found`)
+
+ return false
+ }
+
+ win.node.unmount()
+ this.root.removeChild(element)
+
+ this.windows = this.windows.filter((node) => {
+ return node.id !== id
+ })
+
+ return true
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/hooks/useChat/index.js b/packages/app/src/hooks/useChat/index.js
new file mode 100644
index 00000000..a19d4139
--- /dev/null
+++ b/packages/app/src/hooks/useChat/index.js
@@ -0,0 +1,98 @@
+import React from "react"
+
+export default (to_user_id) => {
+ const [socket, setSocket] = React.useState(null)
+ const [messages, setMessages] = React.useState([])
+ const [scroller, setScroller] = React.useState(null)
+
+ const [isLocalTyping, setIsLocalTyping] = React.useState(false)
+ const [isRemoteTyping, setIsRemoteTyping] = React.useState(false)
+
+ const [timeoutOffTypingEvent, setTimeoutOffTypingEvent] = React.useState(null)
+
+ async function sendMessage(message) {
+ emitTypingEvent(false)
+
+ await socket.emit("chat:send:message", {
+ to_user_id: to_user_id,
+ content: message,
+ })
+ }
+
+ async function emitTypingEvent(to) {
+ if (isLocalTyping === true && to === true) {
+ return debouncedOffTypingEvent()
+ }
+
+ await socket.emit("chat:state:typing", {
+ to_user_id: to_user_id,
+ is_typing: to,
+ })
+
+ setIsLocalTyping(to)
+ }
+
+ async function debouncedOffTypingEvent() {
+ if (timeoutOffTypingEvent) {
+ clearTimeout(timeoutOffTypingEvent)
+ }
+
+ setTimeoutOffTypingEvent(setTimeout(() => {
+ emitTypingEvent(false)
+ }, 5000))
+ }
+
+ const listenEvents = {
+ "chat:receive:message": (message) => {
+ setMessages((messages) => {
+ return [
+ ...messages,
+ message
+ ]
+ })
+ },
+ "chat:state:typing": (state) => {
+ setIsRemoteTyping(state.is_typing)
+ },
+ }
+
+ React.useEffect(() => {
+ if (scroller?.current) {
+ const paddingBottom = scroller.current.style.paddingBottom.replace("px", "")
+
+ scroller.current?.scrollTo({
+ top: scroller.current.scrollHeight + paddingBottom,
+ behavior: "smooth",
+ })
+ }
+ }, [messages])
+
+ React.useEffect(() => {
+ const targetSocket = app.cores.api.client().sockets.chats
+
+ setSocket(targetSocket)
+
+ for (const [event, handler] of Object.entries(listenEvents)) {
+ targetSocket.on(event, handler)
+ }
+
+ return () => {
+ for (const [event, handler] of Object.entries(listenEvents)) {
+ targetSocket.off(event, handler)
+ }
+
+ if (timeoutOffTypingEvent) {
+ clearTimeout(timeoutOffTypingEvent)
+ }
+ }
+ }, [])
+
+ return {
+ sendMessage,
+ messages,
+ setMessages,
+ setScroller,
+ emitTypingEvent,
+ isRemoteTyping,
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/hooks/useTextRoom/index.jsx b/packages/app/src/hooks/useTextRoom/index.jsx
new file mode 100644
index 00000000..7008bff6
--- /dev/null
+++ b/packages/app/src/hooks/useTextRoom/index.jsx
@@ -0,0 +1,70 @@
+import React from "react"
+import { EventEmitter } from "@foxify/events"
+
+function useTextRoom(route, options = {
+ persistent: false,
+}) {
+ const eventEmitter = new EventEmitter()
+
+ const [lines, setLines] = React.useState([])
+
+ const socket = app.cores.api.client().sockets.chats
+
+ function pushToLines(line) {
+ setLines((lines) => {
+ return [
+ ...lines,
+ line,
+ ]
+ })
+ }
+
+ function deleteLine(message) {
+ setLines((lines) => {
+ return lines.filter((line) => line._id !== message._id)
+ })
+ }
+
+ function send(payload) {
+ socket.emit("room:send:message", {
+ ...payload,
+ route: route,
+ })
+ }
+
+ const socketEvents = {
+ "room:message": (message) => {
+ eventEmitter.emit("room:message", message)
+ pushToLines(message)
+ },
+ "room:delete:message": (message) => {
+ eventEmitter.emit("room:delete:message", message)
+ deleteLine(message)
+ }
+ }
+
+ React.useEffect(() => {
+ socket.emit("join:room", {
+ ...options,
+ room: route,
+ })
+
+ for (const [event, handler] of Object.entries(socketEvents)) {
+ socket.on(event, handler)
+ }
+
+ return () => {
+ socket.emit("leave:room", {
+ room: route,
+ })
+
+ for (const [event, handler] of Object.entries(socketEvents)) {
+ socket.off(event, handler)
+ }
+ }
+ }, [])
+
+ return [send, lines, setLines, eventEmitter]
+}
+
+export default useTextRoom
\ No newline at end of file
diff --git a/packages/app/src/layout.jsx b/packages/app/src/layout.jsx
index e66e7e1a..665e09df 100755
--- a/packages/app/src/layout.jsx
+++ b/packages/app/src/layout.jsx
@@ -44,14 +44,7 @@ export default class Layout extends React.PureComponent {
}
transitionLayer.classList.remove("fade-opacity-leave")
- },
- "router.navigate": async (path, options) => {
- this.progressBar.start()
-
- await this.makePageTransition(options)
-
- this.progressBar.done()
- },
+ }
}
componentDidMount() {
@@ -82,33 +75,6 @@ export default class Layout extends React.PureComponent {
this.setState({ renderError: { info, stack } })
}
- async makePageTransition(options = {}) {
- if (document.startViewTransition) {
- return document.startViewTransition(async () => {
- await new Promise((resolve) => {
- setTimeout(resolve, options.state?.transitionDelay ?? 250)
- })
- })
- }
-
- const content_layout = document.getElementById("content_layout")
-
- if (!content_layout) {
- console.warn("content_layout not found, no animation will be played")
-
- return false
- }
-
- content_layout.classList.add("fade-transverse-leave")
-
- return await new Promise((resolve) => {
- setTimeout(() => {
- resolve()
- content_layout.classList.remove("fade-transverse-leave")
- }, options.state?.transitionDelay ?? 250)
- })
- }
-
layoutInterface = window.app.layout = {
set: (layout) => {
if (typeof Layouts[layout] !== "function") {
diff --git a/packages/app/src/components/Layout/bottomBar/index.jsx b/packages/app/src/layouts/components/bottomBar/index.jsx
similarity index 99%
rename from packages/app/src/components/Layout/bottomBar/index.jsx
rename to packages/app/src/layouts/components/bottomBar/index.jsx
index 09eed364..eff618e9 100755
--- a/packages/app/src/components/Layout/bottomBar/index.jsx
+++ b/packages/app/src/layouts/components/bottomBar/index.jsx
@@ -8,7 +8,7 @@ import { Icons, createIconRender } from "@components/Icons"
import { WithPlayerContext, Context } from "@contexts/WithPlayerContext"
-import { QuickNavMenuItems, QuickNavMenu } from "@components/Layout/quickNav"
+import { QuickNavMenuItems, QuickNavMenu } from "@layouts/components/quickNav"
import PlayerView from "@pages/@mobile-views/player"
import CreatorView from "@pages/@mobile-views/creator"
diff --git a/packages/app/src/components/Layout/bottomBar/index.less b/packages/app/src/layouts/components/bottomBar/index.less
similarity index 100%
rename from packages/app/src/components/Layout/bottomBar/index.less
rename to packages/app/src/layouts/components/bottomBar/index.less
diff --git a/packages/app/src/components/Layout/draggableDrawer/index.jsx b/packages/app/src/layouts/components/draggableDrawer/index.jsx
similarity index 100%
rename from packages/app/src/components/Layout/draggableDrawer/index.jsx
rename to packages/app/src/layouts/components/draggableDrawer/index.jsx
diff --git a/packages/app/src/components/Layout/draggableDrawer/index.less b/packages/app/src/layouts/components/draggableDrawer/index.less
similarity index 100%
rename from packages/app/src/components/Layout/draggableDrawer/index.less
rename to packages/app/src/layouts/components/draggableDrawer/index.less
diff --git a/packages/app/src/components/Layout/drawer/index.jsx b/packages/app/src/layouts/components/drawer/index.jsx
similarity index 100%
rename from packages/app/src/components/Layout/drawer/index.jsx
rename to packages/app/src/layouts/components/drawer/index.jsx
diff --git a/packages/app/src/layouts/components/floatingStack/index.jsx b/packages/app/src/layouts/components/floatingStack/index.jsx
deleted file mode 100755
index c2852cbb..00000000
--- a/packages/app/src/layouts/components/floatingStack/index.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from "react"
-import classnames from "classnames"
-
-import { DOMWindow } from "@components/RenderWindow"
-
-import "./index.less"
-
-class FloatingStackItem extends React.PureComponent {
- state = {
- renderError: null
- }
-
- componentDidCatch(error, info) {
- console.log(error, info)
-
- this.setState({
- renderError: error,
- })
- }
-
- render() {
- if (this.state.renderError) {
- return {
- win.destroy()
+ app.cores.window_mng.close(id)
}}
- includeCloseButton={includeCloseButton}
framed={framed}
- frameContentStyle={frameContentStyle}
+ className={className}
confirmOnOutsideClick={confirmOnOutsideClick}
confirmOnClickTitle={confirmOnClickTitle}
confirmOnClickContent={confirmOnClickContent}
diff --git a/packages/app/src/layouts/components/modals/index.less b/packages/app/src/layouts/components/modals/index.less
index 3e30784c..45275f76 100755
--- a/packages/app/src/layouts/components/modals/index.less
+++ b/packages/app/src/layouts/components/modals/index.less
@@ -23,7 +23,7 @@
top: 0;
left: 0;
-
+
width: 100vw;
height: 100vh;
@@ -43,7 +43,7 @@
}
&.active {
- background-color: rgba(var(--bg_color_6), 0.5);
+ background-color: rgba(var(--bg_color_6), 0.1);
backdrop-filter: blur(@modal_background_blur);
-webkit-backdrop-filter: blur(@modal_background_blur);
diff --git a/packages/app/src/components/Layout/quickNav/index.jsx b/packages/app/src/layouts/components/quickNav/index.jsx
similarity index 100%
rename from packages/app/src/components/Layout/quickNav/index.jsx
rename to packages/app/src/layouts/components/quickNav/index.jsx
diff --git a/packages/app/src/components/Layout/sidebar/index.jsx b/packages/app/src/layouts/components/sidebar/index.jsx
similarity index 68%
rename from packages/app/src/components/Layout/sidebar/index.jsx
rename to packages/app/src/layouts/components/sidebar/index.jsx
index a49a658f..523dffb1 100755
--- a/packages/app/src/components/Layout/sidebar/index.jsx
+++ b/packages/app/src/layouts/components/sidebar/index.jsx
@@ -31,6 +31,9 @@ const onClickHandlers = {
search: () => {
window.app.controls.openSearcher()
},
+ messages: () => {
+ window.app.controls.openMessages()
+ },
create: () => {
window.app.controls.openCreator()
},
@@ -63,6 +66,37 @@ const generateTopItems = (extra = []) => {
})
}
+const BottomMenuDefaultItems = [
+ {
+ key: "search",
+ label:
+ {(t) => t("Search")}
+ ,
+ icon:
+ {(t) => t("Messages")}
+ ,
+ icon:
+ {(t) => t("Notifications")}
+ ,
+ icon:
+ {(t) => t("Settings")}
+ ,
+ icon:
+ ,
+ })
+ }
+
+ if (!app.userData) {
+ items.push({
+ key: "login",
+ label:
+ {t => t("Login")}
+ ,
+ icon:
- {({ x }) => {
- return
diff --git a/packages/app/src/pages/account/index.less b/packages/app/src/pages/account/index.less
index a832c54b..d9888f58 100755
--- a/packages/app/src/pages/account/index.less
+++ b/packages/app/src/pages/account/index.less
@@ -108,7 +108,9 @@
.actions {
display: flex;
- flex-direction: column;
+ flex-direction: row;
+
+ gap: 10px;
height: fit-content;
width: 20vw;
diff --git a/packages/app/src/pages/auth/forms/selector/index.jsx b/packages/app/src/pages/auth/forms/selector/index.jsx
index 7b38bc30..f47247b7 100755
--- a/packages/app/src/pages/auth/forms/selector/index.jsx
+++ b/packages/app/src/pages/auth/forms/selector/index.jsx
@@ -17,14 +17,14 @@ const MainSelector = (props) => {
+
-
+
+
+ {
+ processString(messageRegexs)(this.state.data.message ?? "")
+ }
+
+
{
- processString(messageRegexs)(this.state.data.message ?? "")
+ !this.props.disableAttachments && this.state.data.attachments && this.state.data.attachments.length > 0 && app.navigation.goToPost(this.state.data._id)}
+ >
+ View {this.state.hasReplies} replies
+
}
app.navigation.goToPost(this.state.data._id)}
- >
- View {this.state.hasReplies} replies
-
- }
-
+
}
}
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less
index cc178712..5ec61855 100755
--- a/packages/app/src/components/PostCard/index.less
+++ b/packages/app/src/components/PostCard/index.less
@@ -33,6 +33,13 @@
color: var(--text-color);
}
+ .post_card_content {
+ display: flex;
+ flex-direction: column;
+
+ gap: 15px;
+ }
+
.post_content {
position: relative;
diff --git a/packages/app/src/components/RenderWindow/index.jsx b/packages/app/src/components/RenderWindow/index.jsx
deleted file mode 100755
index d990bc70..00000000
--- a/packages/app/src/components/RenderWindow/index.jsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import { Rnd } from "react-rnd"
-import { Icons } from "@components/Icons"
-
-import "./index.less"
-
-class DOMWindow {
- constructor(props = {}) {
- this.props = props
-
- this.id = this.props.id
- this.key = 0
-
- this.currentRender = null
- this.root = document.getElementById("app_windows")
- this.element = document.createElement("div")
-
- this.element.setAttribute("id", this.id)
- this.element.setAttribute("key", this.key)
- this.element.setAttribute("classname", this.props.className)
-
- // if props clickOutsideToClose is true, add event listener to close window
- if (this.props.clickOutsideToClose) {
- document.addEventListener("click", this.handleWrapperClick)
- }
-
- // handle root container
- if (!this.root) {
- this.root = document.createElement("div")
- this.root.setAttribute("id", "app_windows")
-
- document.body.append(this.root)
- }
-
- // get all windows opened has container
- const rootNodes = this.root.childNodes
-
- // ensure this window has last key from rootNode
- if (rootNodes.length > 0) {
- const lastChild = rootNodes[rootNodes.length - 1]
- const lastChildKey = Number(lastChild.getAttribute("key"))
-
- this.key = lastChildKey + 1
- }
- }
-
- handleWrapperClick = (event) => {
- if (!this.currentRender) {
- return
- }
-
- // if click in not renderer fragment, close window
- if (!this.element.contains(event.target)) {
- this.remove()
- }
- }
-
- render = (fragment) => {
- this.root.appendChild(this.element)
-
- this.currentRender = fragment
-
- return ReactDOM.render(fragment, this.element)
- }
-
- remove = () => {
- this.root.removeChild(this.element)
- this.currentRender = null
- }
-
- destroy = () => {
- this.element.remove()
- this.currentRender = null
- }
-
- createDefaultWindow = (children, props) => {
- return this.render(
- {React.isValidElement(action.render) ? action.render : React.createElement(action.render)}
-
- )
- })
- }
-
- return null
- }
-
- getComponentRender = () => {
- return React.isValidElement(this.props.children)
- ? React.cloneElement(this.props.children, this.props.renderProps)
- : React.createElement(this.props.children, this.props.renderProps)
- }
-
- render() {
- const { position, dimensions, visible } = this.state
-
- if (!visible) {
- return null
- }
-
- return (
-
-
- : this.props.children
- }
-
-
-
- {this.props.id}
- {this.renderActions()}
- {this.getComponentRender()}
-
+ {React.isValidElement(action.render) ? action.render : React.createElement(action.render)}
+
+ )
+ })
+ }
+
+ return null
+ }
+
+ getComponentRender = () => {
+ const ctx = {
+ ...this.props,
+ updateTitle: this.updateTitle,
+ updateDimensions: this.updateDimensions,
+ updatePosition: this.updatePosition,
+ close: this.props.close,
+ position: this.state.position,
+ dimensions: this.state.dimensions,
+ }
+
+ return
+
+
+ {this.state.title}
+ {this.renderActions()}
+
+ {
+ this.state.renderError &&
+
+
+ }
+ {
+ !this.state.renderError && this.getComponentRender()
+ }
+ Render Error
+{this.state.renderError.message}
+
-
- }
-
- return Render Error
-
-
- {this.props.children}
-
-
- }
-}
-
-export default class FloatingStack extends React.Component {
- state = {
- renders: [],
- globalVisibility: true,
- }
-
- public = {
- add: (id, render) => {
- try {
- if (!id) {
- console.error(`FloatingStack: id is required`)
- return false
- }
- if (!render) {
- console.error(`FloatingStack: render is required`)
- return false
- }
-
- if (this.state.renders.find((item) => item.id === id)) {
- console.error(`FloatingStack: id ${id} already exists`)
- return false
- }
-
- this.setState({
- renders: [
- ...this.state.renders,
- {
- id,
- render: React.createElement(render),
- },
- ]
- })
-
- return render
- } catch (error) {
- console.log(error)
- return null
- }
- },
- remove: (id) => {
- this.setState({
- renders: this.state.renders.filter((item) => {
- return item.id !== id
- })
- })
-
- return true
- },
- toggleGlobalVisibility: (to) => {
- if (typeof to !== "boolean") {
- to = !this.state.globalVisibility
- }
-
- this.setState({
- globalVisibility: to,
- })
- }
- }
-
- componentDidMount() {
- window.app.layout.floatingStack = this.public
- }
-
- componentWillUnmount() {
- window.app.layout.floatingStack = null
- delete window.app.layout.floatingStack
- }
-
- render() {
- return
- {
- this.state.renders.map((item) => {
- return
- {item.render}
-
- })
- }
-
- }
-}
-
-export const createWithDom = () => {
- const dom = new DOMWindow({
- id: "FloatingStack",
- })
-
- dom.render(
+ return
+ {({ x }) => {
+ return
+ visible: this.state.visible,
}
+ )}
+ style={{
+ transform: `translateX(-${x}%)`,
+ }}
+ onMouseEnter={this.onMouseEnter}
+ onMouseLeave={this.handleMouseLeave}
+ >
+ {
+ window.__TAURI__ && navigator.platform.includes("Mac") &&
+ }
-
}
}
\ No newline at end of file
diff --git a/packages/app/src/components/Layout/sidebar/index.less b/packages/app/src/layouts/components/sidebar/index.less
similarity index 93%
rename from packages/app/src/components/Layout/sidebar/index.less
rename to packages/app/src/layouts/components/sidebar/index.less
index 84e1d961..a26c31e7 100755
--- a/packages/app/src/components/Layout/sidebar/index.less
+++ b/packages/app/src/layouts/components/sidebar/index.less
@@ -173,15 +173,27 @@
&.user_avatar {
.ant-menu-title-content {
+ width: 100%;
+
display: inline-flex;
-
+
align-items: flex-start;
justify-content: center;
- width: fit-content;
opacity: 1;
+
+ .ant-dropdown-trigger {
+ width: 100%;
+
+ img {
+ width: fit-content;
+ border-radius: 10px;
+ }
+ }
}
+
+
padding: 0 !important;
}
}
diff --git a/packages/app/src/components/Layout/sidedrawer/index.jsx b/packages/app/src/layouts/components/sidedrawer/index.jsx
similarity index 100%
rename from packages/app/src/components/Layout/sidedrawer/index.jsx
rename to packages/app/src/layouts/components/sidedrawer/index.jsx
diff --git a/packages/app/src/components/Layout/sidedrawer/index.less b/packages/app/src/layouts/components/sidedrawer/index.less
similarity index 100%
rename from packages/app/src/components/Layout/sidedrawer/index.less
rename to packages/app/src/layouts/components/sidedrawer/index.less
diff --git a/packages/app/src/components/Layout/toolsBar/index.jsx b/packages/app/src/layouts/components/toolsBar/index.jsx
similarity index 100%
rename from packages/app/src/components/Layout/toolsBar/index.jsx
rename to packages/app/src/layouts/components/toolsBar/index.jsx
diff --git a/packages/app/src/components/Layout/toolsBar/index.less b/packages/app/src/layouts/components/toolsBar/index.less
similarity index 98%
rename from packages/app/src/components/Layout/toolsBar/index.less
rename to packages/app/src/layouts/components/toolsBar/index.less
index 4e0a6a9e..a34b8e07 100755
--- a/packages/app/src/components/Layout/toolsBar/index.less
+++ b/packages/app/src/layouts/components/toolsBar/index.less
@@ -6,7 +6,7 @@
top: 0;
right: 0;
- max-width: 20vw;
+ max-width: 420px;
min-width: 320px;
height: 100vh;
diff --git a/packages/app/src/components/Layout/topBar/index.jsx b/packages/app/src/layouts/components/topBar/index.jsx
similarity index 100%
rename from packages/app/src/components/Layout/topBar/index.jsx
rename to packages/app/src/layouts/components/topBar/index.jsx
diff --git a/packages/app/src/components/Layout/topBar/index.less b/packages/app/src/layouts/components/topBar/index.less
similarity index 100%
rename from packages/app/src/components/Layout/topBar/index.less
rename to packages/app/src/layouts/components/topBar/index.less
diff --git a/packages/app/src/layouts/default/index.jsx b/packages/app/src/layouts/default/index.jsx
index 3ff362b4..fb864856 100755
--- a/packages/app/src/layouts/default/index.jsx
+++ b/packages/app/src/layouts/default/index.jsx
@@ -2,32 +2,20 @@ import React from "react"
import classnames from "classnames"
import { Layout } from "antd"
-import {
- Sidebar,
- Drawer,
- Sidedrawer,
- BottomBar,
- TopBar,
- ToolsBar,
- Header,
-} from "@components/Layout"
+import Sidebar from "@layouts/components/sidebar"
+import Drawer from "@layouts/components/drawer"
+import Sidedrawer from "@layouts/components/sidedrawer"
+import BottomBar from "@layouts/components/bottomBar"
+import TopBar from "@layouts/components/topBar"
+import ToolsBar from "@layouts/components/toolsBar"
+import Header from "@layouts/components/header"
+import InitializeModalsController from "@layouts/components/modals"
import BackgroundDecorator from "@components/BackgroundDecorator"
-import { createWithDom as FloatingStack } from "../components/floatingStack"
-import InitializeModalsController from "../components/modals"
-
const DesktopLayout = (props) => {
InitializeModalsController()
- React.useEffect(() => {
- const floatingStack = FloatingStack()
-
- return () => {
- floatingStack.remove()
- }
- }, [])
-
return <>
diff --git a/packages/app/src/pages/account/index.jsx b/packages/app/src/pages/account/index.jsx
index 83035c39..39e342ef 100755
--- a/packages/app/src/pages/account/index.jsx
+++ b/packages/app/src/pages/account/index.jsx
@@ -94,7 +94,6 @@ export default class Account extends React.Component {
})
}
-
onClickFollow = async () => {
const result = await FollowsModel.toggleFollow({
user_id: this.state.user._id,
@@ -183,6 +182,13 @@ export default class Account extends React.Component {
followed={this.state.following}
self={this.state.isSelf}
/>
+
+ {
+ !this.state.isSelf &&
+ )
+ }
+ ref={this.sidebarRef}
+ >
-
+ }}
+
-
-
-
- 
-
-
-
-
-
-
-
+
- }}
-
-
+
+
+
+
+
+
+
+
+
+
+
{
app.userData && {
- app.navigation.goMain()
- }}
- >
- Continue as {app.userData.username}
-
+ type="default"
+ size="large"
+ onClick={() => {
+ app.navigation.goMain()
+ }}
+ >
+ Continue as {app.userData.username}
+
}
element.clientHeight || element.scrollWidth > element.clientWidth;
+}
+
+const RenderArtist = (props) => {
+ const { artist } = props
+
+ if (!artist) {
+ return null
+ }
+
+ if (Array.isArray(artist)) {
+ return
-
}
-class SyncLyrics extends React.Component {
- static contextType = Context
-
- state = {
- loading: true,
- notAvailable: false,
-
- currentManifest: null,
- currentStatus: null,
-
- canvas_url: null,
- lyrics: null,
- currentLine: null,
-
- colorAnalysis: null,
-
- classnames: {
- "cinematic-mode": false,
- "centered-player": false,
- "video-canvas-enabled": false,
- }
- }
-
- visualizerRef = React.createRef()
-
- videoCanvasRef = React.createRef()
-
- coverCanvasRef = React.createRef()
-
- events = {
- "player.state.update:track_manifest": (currentManifest) => {
- console.log(currentManifest)
- this.setState({ currentManifest })
-
- if (document.startViewTransition) {
- document.startViewTransition(this.loadLyrics)
- } else {
- this.loadLyrics()
- }
- },
- "player.state.update:playback_status": (currentStatus) => {
- this.setState({ currentStatus })
- }
- }
-
- toggleClassName = (className, to) => {
- if (typeof to === "undefined") {
- to = !this.state.classnames[className]
- }
-
- if (to) {
- if (this.state.classnames[className] === true) {
- return false
- }
-
- //app.message.info("Toogling on " + className)
-
- this.setState({
- classnames: {
- ...this.state.classnames,
- [className]: true
- },
- })
-
- return true
- } else {
- if (this.state.classnames[className] === false) {
- return false
- }
-
- //app.message.info("Toogling off " + className)
-
- this.setState({
- classnames: {
- ...this.state.classnames,
- [className]: false
- },
- })
-
- return true
- }
- }
-
- toggleVideoCanvas = (to) => {
- return this.toggleClassName("video-canvas-enabled", to)
- }
-
- toggleCenteredControllerMode = (to) => {
- return this.toggleClassName("centered-player", to)
- }
-
- toggleCinematicMode = (to) => {
- return this.toggleClassName("cinematic-mode", to)
- }
-
- isCurrentLine = (line) => {
- if (!this.state.currentLine) {
- return false
- }
-
- return this.state.currentLine.startTimeMs === line.startTimeMs
- }
-
- loadLyrics = async () => {
- if (this.syncInterval) {
- clearInterval(this.syncInterval)
- }
-
- if (!this.context.track_manifest) {
- return false
- }
-
- this.setState({
- loading: true,
- notAvailable: false,
- lyrics: null,
- currentLine: null,
- canvas_url: null,
- })
-
- const api = app.cores.api.instance().instances.music
-
- let response = await request({
- instance: api,
- method: "get",
- url: `/lyrics/${this.state.currentManifest._id}`,
- }).catch((err) => {
- console.error(err)
-
- this.setState({
- notAvailable: true,
- })
-
- return {}
- })
-
- let data = response.data ?? {
- lines: [],
- syncType: null,
- }
-
- console.log(this.state.currentManifest)
- console.log(data)
-
- if (data.lines.length > 0 && data.syncType === "LINE_SYNCED") {
- data.lines = data.lines.map((line, index) => {
- const ref = React.createRef()
-
- line.ref = ref
-
- line.startTimeMs = Number(line.startTimeMs)
-
- const nextLine = data.lines[index + 1]
-
- // calculate end time
- line.endTimeMs = nextLine ? Number(nextLine.startTimeMs) : Math.floor(app.cores.player.duration() * 1000)
-
- return line
- })
- }
-
- if (data.canvas_url) {
- //app.message.info("Video canvas loaded")
- console.log(`[SyncLyrics] Video canvas loaded`)
-
- this.toggleVideoCanvas(true)
- } else {
- //app.message.info("No video canvas available for this song")
- console.log(`[SyncLyrics] No video canvas available for this song`)
-
- this.toggleVideoCanvas(false)
- }
-
- // if has no lyrics or are unsynced, toggle cinematic mode off and center controller
- if (data.lines.length === 0 || data.syncType !== "LINE_SYNCED") {
- //app.message.info("No lyrics available for this song")
-
- console.log(`[SyncLyrics] No lyrics available for this song, sync type [${data.syncType}]`)
-
- this.toggleCinematicMode(false)
- this.toggleCenteredControllerMode(true)
- } else {
- //app.message.info("Lyrics loaded, starting sync...")
- console.log(`[SyncLyrics] Starting sync with type [${data.syncType}]`)
-
- this.toggleCenteredControllerMode(false)
- this.startLyricsSync()
- }
-
- // transform times
- this.setState({
- loading: false,
- syncType: data.syncType,
- canvas_url: data.canvas_url ?? null,
- lyrics: data.lines,
- })
- }
-
- startLyricsSync = () => {
- // create interval to sync lyrics
- if (this.syncInterval) {
- clearInterval(this.syncInterval)
- }
-
- // scroll to top
- this.visualizerRef.current.scrollTop = 0
-
- this.syncInterval = setInterval(() => {
- if (!this.state.lyrics || !Array.isArray(this.state.lyrics) || this.state.lyrics.length === 0 || !this.state.lyrics[0]) {
- console.warn(`Clearing interval because lyrics is not found or lyrics is empty, probably because memory leak or unmounted component`)
- clearInterval(this.syncInterval)
- return false
- }
-
- const time = app.cores.player.seek()
-
- // transform audio seek time to lyrics time (ms from start) // remove decimals
- const transformedTime = Math.floor(time * 1000)
-
- const hasStartedFirst = transformedTime >= this.state.lyrics[0].startTimeMs
-
- if (!hasStartedFirst) {
- if (this.state.canvas_url) {
- this.toggleCinematicMode(true)
- }
-
- return false
- }
-
- // find the closest line to the transformed time
- const line = this.state.lyrics.find((line) => {
- // match the closest line to the transformed time
- return transformedTime >= line.startTimeMs && transformedTime <= line.endTimeMs
- })
-
- if (!line || !line.ref) {
- console.warn(`Clearing interval because cannot find line to sync or line REF is not found, probably because memory leak or unmounted component`)
- clearInterval(this.syncInterval)
-
- return false
- }
-
- if (line) {
- if (this.isCurrentLine(line)) {
- return false
- }
-
- // set current line
- this.setState({
- currentLine: line,
- })
-
- //console.log(line)
-
- if (!line.ref.current) {
- console.log(line)
- console.warn(`Clearing interval because line CURRENT ref is not found, probably because memory leak or unmounted component`)
- clearInterval(this.syncInterval)
-
- return false
- }
-
- this.visualizerRef.current.scrollTo({
- top: line.ref.current.offsetTop - (this.visualizerRef.current.offsetHeight / 2),
- behavior: "smooth",
- })
-
- if (this.state.canvas_url) {
- if (line.words === "♪" || line.words === "♫" || line.words === " " || line.words === "") {
- //console.log(`[SyncLyrics] Toogling cinematic mode on because line is empty`)
-
- this.toggleCinematicMode(true)
- } else {
- //console.log(`[SyncLyrics] Toogling cinematic mode off because line is not empty`)
-
- this.toggleCinematicMode(false)
- }
- } else {
- if (this.state.classnames["cinematic-mode"] === true) {
- this.toggleCinematicMode(false)
- }
- }
- }
- }, 100)
- }
-
- componentDidMount = async () => {
- // register player events
- for (const [event, callback] of Object.entries(this.events)) {
- app.eventBus.on(event, callback)
- }
-
- // get current playback status and time
- const {
- track_manifest,
- playback_status,
- } = app.cores.player.state
-
- await this.setState({
- currentManifest: track_manifest,
- currentStatus: playback_status,
- colorAnalysis: track_manifest.cover_analysis,
- })
-
- if (app.layout.sidebar) {
- app.controls.toggleUIVisibility(false)
- }
-
- app.layout.toggleCenteredContent(false)
-
- app.cores.style.compactMode(true)
- app.cores.style.applyVariant("dark")
-
- // // request full screen to browser
- // if (document.fullscreenEnabled) {
- // document.documentElement.requestFullscreen()
- // }
-
- // // listen when user exit full screen to exit cinematic mode
- // document.addEventListener("fullscreenchange", () => {
- // if (!document.fullscreenElement) {
- // app.location.back()
- // }
- // })
-
- window._hacks = {
- toggleVideoCanvas: this.toggleVideoCanvas,
- toggleCinematicMode: this.toggleCinematicMode,
- toggleCenteredControllerMode: this.toggleCenteredControllerMode,
- }
-
- await this.loadLyrics()
- }
-
- componentWillUnmount() {
- // unregister player events
- for (const [event, callback] of Object.entries(this.events)) {
- app.eventBus.off(event, callback)
- }
-
- // clear sync interval
- if (this.syncInterval) {
- clearInterval(this.syncInterval)
- }
-
- delete window._hacks
-
- if (app.layout.sidebar) {
- app.controls.toggleUIVisibility(true)
- }
-
- app.cores.style.compactMode(false)
- app.cores.style.applyInitialVariant()
-
- // // exit full screen
- // if (document.fullscreenEnabled) {
- // document.exitFullscreen()
- // }
- }
-
- renderLines() {
- if (!this.state.lyrics || this.state.notAvailable || this.state.syncType !== "LINE_SYNCED") {
- return null
- }
-
- return this.state.lyrics.map((line, index) => {
- return {
return
{
-
}
\ No newline at end of file
diff --git a/packages/app/src/patches.js b/packages/app/src/patches.js
index afa6f4a9..b65fe3aa 100644
--- a/packages/app/src/patches.js
+++ b/packages/app/src/patches.js
@@ -1,6 +1,8 @@
// Patch global prototypes
import { Buffer } from "buffer"
+globalThis.IS_MOBILE_HOST = window.navigator.userAgent === "capacitor"
+
window.Buffer = Buffer
Array.prototype.findAndUpdateObject = function (discriminator, obj) {
diff --git a/packages/app/src/router.jsx b/packages/app/src/router.jsx
index bb40f96a..83fe29ca 100755
--- a/packages/app/src/router.jsx
+++ b/packages/app/src/router.jsx
@@ -50,6 +50,7 @@ const generateRoutes = () => {
.replace(/\/src\/pages|index|\.mobile|\.jsx$/g, "")
.replace(/\/src\/pages|index|\.mobile|\.tsx$/g, "")
+ path = path.replace(/\[([a-z]+)\]/g, ":$1")
path = path.replace(/\[\.{3}.+\]/, "*").replace(/\[(.+)\]/, ":$1")
return {
@@ -59,7 +60,72 @@ const generateRoutes = () => {
})
}
-function generatePageElementWrapper(route, element, bindProps) {
+function findRouteDeclaration(route) {
+ return routesDeclaration.find((layout) => {
+ const routePath = layout.path.replace(/\*/g, ".*").replace(/!/g, "^")
+
+ return new RegExp(routePath).test(route)
+ }) ?? {
+ path: route,
+ useLayout: "default",
+ }
+}
+
+function isAuthenticated() {
+ return !!app.userData
+}
+
+function handleRouteDeclaration(declaration) {
+ React.useEffect(() => {
+ if (declaration) {
+ // if not authenticated and is not in public route, redirect
+ if (!isAuthenticated() && !declaration.public && (window.location.pathname !== config.app?.authPath)) {
+ if (typeof window.app.location.push === "function") {
+ window.app.location.push(config.app?.authPath ?? "/login")
+
+ app.cores.notifications.new({
+ title: "Please login to use this feature.",
+ duration: 15,
+ })
+ } else {
+ window.location.href = config.app?.authPath ?? "/login"
+ }
+ } else {
+ if (declaration.useLayout) {
+ app.layout.set(declaration.useLayout)
+ }
+
+ if (typeof declaration.centeredContent !== "undefined") {
+ let finalBool = null
+
+ if (typeof declaration.centeredContent === "boolean") {
+ finalBool = declaration.centeredContent
+ } else {
+ if (app.isMobile) {
+ finalBool = declaration.centeredContent?.mobile ?? null
+ } else {
+ finalBool = declaration.centeredContent?.desktop ?? null
+ }
+ }
+
+ app.layout.toggleCenteredContent(finalBool)
+ }
+
+ if (typeof declaration.useTitle !== "undefined") {
+ if (typeof declaration.useTitle === "function") {
+ declaration.useTitle = declaration.useTitle(path, params)
+ }
+
+ document.title = `${declaration.useTitle} - ${config.app.siteName}`
+ } else {
+ document.title = config.app.siteName
+ }
+ }
+ }
+ }, [])
+}
+
+function generatePageElementWrapper(path, element, props, declaration) {
return React.createElement((props) => {
const params = useParams()
const url = new URL(window.location)
@@ -67,76 +133,15 @@ function generatePageElementWrapper(route, element, bindProps) {
get: (target, prop) => target.searchParams.get(prop),
})
- const routeDeclaration = routesDeclaration.find((layout) => {
- const routePath = layout.path.replace(/\*/g, ".*").replace(/!/g, "^")
-
- return new RegExp(routePath).test(route)
- }) ?? {
- path: route,
- useLayout: "default",
- }
-
- route = route.replace(/\?.+$/, "").replace(/\/{2,}/g, "/")
- route = route.replace(/\/$/, "")
-
- if (routeDeclaration) {
- if (!bindProps.user && (window.location.pathname !== config.app?.authPath)) {
- if (!routeDeclaration.public) {
- if (typeof window.app.location.push === "function") {
- window.app.location.push(config.app?.authPath ?? "/login")
- return
- }
-
- window.location.href = config.app?.authPath ?? "/login"
-
- return
- }
- }
-
- if (routeDeclaration.useLayout) {
- app.layout.set(routeDeclaration.useLayout)
- }
-
- if (typeof routeDeclaration.centeredContent !== "undefined") {
- let finalBool = null
-
- if (typeof routeDeclaration.centeredContent === "boolean") {
- finalBool = routeDeclaration.centeredContent
- } else {
- if (app.isMobile) {
- finalBool = routeDeclaration.centeredContent?.mobile ?? null
- } else {
- finalBool = routeDeclaration.centeredContent?.desktop ?? null
- }
- }
-
- app.layout.toggleCenteredContent(finalBool)
- }
-
- if (typeof routeDeclaration.useTitle !== "undefined") {
- if (typeof routeDeclaration.useTitle === "function") {
- routeDeclaration.useTitle = routeDeclaration.useTitle(route, params)
- }
-
- document.title = `${routeDeclaration.useTitle} - ${config.app.siteName}`
- } else {
- document.title = config.app.siteName
- }
- }
-
- if (typeof routeDeclaration?.mobileTopBarSpacer === "boolean" && app.isMobile) {
- app.layout.toggleTopBarSpacer(routeDeclaration.mobileTopBarSpacer)
- } else {
- app.layout.toggleTopBarSpacer(false)
- }
+ handleRouteDeclaration(declaration)
return React.createElement(
loadable(element, {
- fallback: React.createElement(bindProps.staticRenders?.PageLoad || DefaultLoadingRender),
+ fallback: React.createElement(props.staticRenders?.PageLoad || DefaultLoadingRender),
}),
{
...props,
- ...bindProps,
+ ...props,
url: url,
params: params,
query: query,
@@ -160,36 +165,22 @@ const NavigationController = (props) => {
state = {}
}
- const transitionDuration = app.cores.style.getValue("page-transition-duration") ?? "250ms"
-
- state.transitionDelay = Number(transitionDuration.replace("ms", ""))
-
app.eventBus.emit("router.navigate", to, {
state,
})
app.location.last = window.location
- if (state.transitionDelay >= 100) {
- await new Promise((resolve) => setTimeout(resolve, state.transitionDelay))
- }
-
return navigate(to, {
state
})
}
async function backLocation() {
- const transitionDuration = app.cores.style.getValue("page-transition-duration") ?? "250ms"
-
app.eventBus.emit("router.navigate")
app.location.last = window.location
- if (transitionDuration >= 100) {
- await new Promise((resolve) => setTimeout(resolve, transitionDuration))
- }
-
return window.history.back()
}
@@ -220,10 +211,12 @@ export const PageRender = React.memo((props) => {
return {artist.join(",")}
+ } + + return{artist}
+} + +const RenderAlbum = (props) => { + const { album } = props + + if (!album) { + return null + } + + if (Array.isArray(album)) { + return{album.join(",")}
+ } + + return{album}
+} + +const PlayerController = React.forwardRef((props, ref) => { + const context = React.useContext(Context) + + const titleRef = React.useRef() + + const [titleIsOverflown, setTitleIsOverflown] = React.useState(false) + + const [currentTime, setCurrentTime] = React.useState(0) + const [trackDuration, setTrackDuration] = React.useState(0) + const [draggingTime, setDraggingTime] = React.useState(false) + const [currentDragWidth, setCurrentDragWidth] = React.useState(0) + const [syncInterval, setSyncInterval] = React.useState(null) + + async function onDragEnd(seekTime) { + setDraggingTime(false) + + app.cores.player.seek(seekTime) + } + + async function syncPlayback() { + if (!context.track_manifest) { + return false + } + + const currentTrackTime = app.cores.player.seek() + + setCurrentTime(currentTrackTime) + } + + //* Handle when playback status change + React.useEffect(() => { + if (context.playback_status === "playing") { + setSyncInterval(setInterval(syncPlayback, 1000)) + } else { + if (syncInterval) { + clearInterval(syncInterval) + } + } + }, [context.playback_status]) + + React.useEffect(() => { + setTitleIsOverflown(isOverflown(titleRef.current)) + setTrackDuration(app.cores.player.duration()) + }, [context.track_manifest]) + + const isStopped = context.playback_status === "stopped" + + return
+
+})
+
+export default PlayerController
\ No newline at end of file
diff --git a/packages/app/src/pages/lyrics/components/text/index.jsx b/packages/app/src/pages/lyrics/components/text/index.jsx
new file mode 100644
index 00000000..f4b0485e
--- /dev/null
+++ b/packages/app/src/pages/lyrics/components/text/index.jsx
@@ -0,0 +1,147 @@
+import React from "react"
+import classnames from "classnames"
+import { Motion, spring } from "react-motion"
+
+import { Context } from "@contexts/WithPlayerContext"
+
+const LyricsText = React.forwardRef((props, textRef) => {
+ const context = React.useContext(Context)
+
+ const { lyrics } = props
+
+ const [syncInterval, setSyncInterval] = React.useState(null)
+ const [currentLineIndex, setCurrentLineIndex] = React.useState(0)
+ const [visible, setVisible] = React.useState(false)
+
+ function syncPlayback() {
+ if (!lyrics) {
+ return false
+ }
+
+ const currentTrackTime = app.cores.player.seek() * 1000
+
+ const lineIndex = lyrics.lrc.findIndex((line) => {
+ return currentTrackTime >= line.startTimeMs && currentTrackTime <= line.endTimeMs
+ })
+
+ if (lineIndex === -1) {
+ if (!visible) {
+ setVisible(false)
+ }
+
+ return false
+ }
+
+ const line = lyrics.lrc[lineIndex]
+
+ setCurrentLineIndex(lineIndex)
+
+ if (line.break) {
+ return setVisible(false)
+ }
+
+ if (line.text) {
+ return setVisible(true)
+ }
+ }
+
+ function startSyncInterval() {
+ setSyncInterval(setInterval(syncPlayback, 100))
+ }
+
+ //* Handle when current line index change
+ React.useEffect(() => {
+ if (currentLineIndex === 0) {
+ setVisible(false)
+ } else {
+ // find line element by id
+ const lineElement = textRef.current.querySelector(`#lyrics-line-${currentLineIndex}`)
+
+ // center scroll to current line
+ if (lineElement) {
+ lineElement.scrollIntoView({
+ behavior: "smooth",
+ block: "center",
+ })
+ }
+ }
+ }, [currentLineIndex])
+
+ //* Handle when playback status change
+ React.useEffect(() => {
+ if (lyrics) {
+ if (typeof lyrics?.lrc !== "undefined") {
+ if (context.playback_status === "playing") {
+ startSyncInterval()
+ } else {
+ if (syncInterval) {
+ clearInterval(syncInterval)
+ }
+ } startSyncInterval()
+ }
+ }
+
+ }, [context.playback_status])
+
+ //* Handle when lyrics object change
+ React.useEffect(() => {
+ clearInterval(syncInterval)
+
+ if (lyrics) {
+ if (typeof lyrics?.lrc !== "undefined") {
+ if (context.playback_status === "playing") {
+ startSyncInterval()
+ }
+ }
+ }
+ }, [lyrics])
+
+ React.useEffect(() => {
+ return () => {
+ clearInterval(syncInterval)
+ }
+ }, [])
+
+ if (!lyrics?.lrc) {
+ return null
+ }
+
+ return
+
+
+
+
+
+ {
+
+
+ + { + context.playback_status === "stopped" ? "Nothing is playing" : <> + {context.track_manifest?.title ?? "Nothing is playing"} + + } +
+ } + + { + titleIsOverflown && + } +
+
+
+
+
+ {
+ setDraggingTime(true)
+ }}
+ onMouseUp={(e) => {
+ const rect = e.currentTarget.getBoundingClientRect()
+ const seekTime = trackDuration * (e.clientX - rect.left) / rect.width
+
+ onDragEnd(seekTime)
+ }}
+ onMouseMove={(e) => {
+ const rect = e.currentTarget.getBoundingClientRect()
+ const atWidth = (e.clientX - rect.left) / rect.width * 100
+
+ setCurrentDragWidth(atWidth)
+ }}
+ >
+
+
+
+ {
+ context.track_manifest?.metadata.lossless &&
+ Explicit
+
+ }
+
+
+
+ {({ opacity }) => {
+ return
+
+})
+
+export default LyricsText
\ No newline at end of file
diff --git a/packages/app/src/pages/lyrics/components/video/index.jsx b/packages/app/src/pages/lyrics/components/video/index.jsx
new file mode 100644
index 00000000..d8df998f
--- /dev/null
+++ b/packages/app/src/pages/lyrics/components/video/index.jsx
@@ -0,0 +1,166 @@
+import React from "react"
+
+import { Context } from "@contexts/WithPlayerContext"
+
+const maxLatencyInMs = 55
+
+const LyricsVideo = React.forwardRef((props, videoRef) => {
+ const context = React.useContext(Context)
+
+ const { lyrics } = props
+
+ const [syncInterval, setSyncInterval] = React.useState(null)
+ const [syncingVideo, setSyncingVideo] = React.useState(false)
+ const [currentVideoLatency, setCurrentVideoLatency] = React.useState(0)
+
+ async function seekVideoToSyncAudio() {
+ if (lyrics) {
+ if (lyrics.video_source && typeof lyrics.sync_audio_at_ms !== "undefined") {
+ const currentTrackTime = app.cores.player.seek()
+
+ setSyncingVideo(true)
+
+ videoRef.current.currentTime = currentTrackTime + (lyrics.sync_audio_at_ms / 1000) + app.cores.player.gradualFadeMs / 1000
+ }
+ }
+ }
+
+ async function syncPlayback() {
+ if (!lyrics) {
+ 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") {
+ const currentTrackTime = app.cores.player.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) {
+ console.log(`Syncing video...`)
+ return false
+ }
+
+ if (currentVideoTimeDiff > maxOffset) {
+ console.warn(`Video offset exceeds`, maxOffset)
+ seekVideoToSyncAudio()
+ }
+ }
+ }
+
+ function startSyncInterval() {
+ setSyncInterval(setInterval(syncPlayback, 100))
+ }
+
+ 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 (typeof lyrics?.sync_audio_at_ms !== "undefined") {
+ if (context.playback_status === "playing") {
+ videoRef.current.play()
+
+ setSyncInterval(setInterval(syncPlayback, 500))
+ } else {
+ videoRef.current.pause()
+
+ if (syncInterval) {
+ clearInterval(syncInterval)
+ }
+ }
+ }
+ }, [context.playback_status])
+
+ //* Handle when lyrics object change
+ React.useEffect(() => {
+ if (lyrics) {
+ clearInterval(syncInterval)
+ setCurrentVideoLatency(0)
+ setSyncingVideo(false)
+
+ if (lyrics.video_source) {
+ videoRef.current.src = lyrics.video_source
+
+ videoRef.current.load()
+
+ if (typeof lyrics.sync_audio_at_ms !== "undefined") {
+ videoRef.current.currentTime = lyrics.sync_audio_at_ms / 1000
+
+ if (context.playback_status === "playing") {
+ videoRef.current.play()
+ startSyncInterval()
+ } else {
+ videoRef.current.pause()
+ }
+
+ const currentTime = app.cores.player.seek()
+
+ if (currentTime > 0) {
+ seekVideoToSyncAudio()
+ }
+ } else {
+ videoRef.current.loop = true
+ videoRef.current.play()
+ }
+ }
+ }
+ }, [lyrics])
+
+ React.useEffect(() => {
+ clearInterval(syncInterval)
+
+ return () => {
+ clearInterval(syncInterval)
+ }
+ }, [])
+
+ return <>
+
+ {
+ lyrics.lrc.map((line, index) => {
+ return
+ }}
+ + {line.text} +
+ }) + } +
+
+
+
+
+})
+
+export default LyricsVideo
\ No newline at end of file
diff --git a/packages/app/src/pages/lyrics/index.jsx b/packages/app/src/pages/lyrics/index.jsx
old mode 100755
new mode 100644
index df378bc4..f4f3ea58
--- a/packages/app/src/pages/lyrics/index.jsx
+++ b/packages/app/src/pages/lyrics/index.jsx
@@ -1,750 +1,76 @@
import React from "react"
import classnames from "classnames"
-import Marquee from "react-fast-marquee"
-
-import Image from "@components/Image"
-import Controls from "@components/Player/Controls"
+import useMaxScreen from "@utils/useMaxScreen"
import { WithPlayerContext, Context } from "@contexts/WithPlayerContext"
-import request from "comty.js/handlers/request"
+import MusicService from "@models/music"
+
+import PlayerController from "./components/controller"
+import LyricsVideo from "./components/video"
+import LyricsText from "./components/text"
import "./index.less"
-function composeRgbValues(values) {
- let value = ""
+const EnchancedLyrics = (props) => {
+ const context = React.useContext(Context)
+ const [lyrics, setLyrics] = React.useState(null)
- // only get the first 3 values
- for (let i = 0; i < 3; i++) {
- // if last value, don't add comma
- if (i === 2) {
- value += `${values[i]}`
- continue
+ const videoRef = React.useRef()
+ const textRef = React.useRef()
+
+ async function loadLyrics(track_id) {
+ const result = await MusicService.getTrackLyrics(track_id)
+
+ if (result) {
+ setLyrics(result)
}
-
- value += `${values[i]}, `
}
- return value
+ useMaxScreen()
+
+ //* Handle when context change track_manifest
+ React.useEffect(() => {
+ if (context.track_manifest) {
+ loadLyrics(context.track_manifest._id)
+ }
+ }, [context.track_manifest])
+
+ //* Handle when lyrics data change
+ React.useEffect(() => {
+ console.log(lyrics)
+ }, [lyrics])
+
+ return
+
+ Maximun latency
+{maxLatencyInMs}ms
+
+
+ {syncingVideo ? Video Latency
+{(currentVideoLatency * 1000).toFixed(2)}ms
+Syncing video...
: null} +
+
}
-function calculateLineTime(line) {
- if (!line) {
- return 0
- }
-
- return line.endTimeMs - line.startTimeMs
-}
-
-function isOverflown(element) {
- if (!element) {
- return false
- }
-
- return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
-}
-
-class PlayerController extends React.Component {
- state = {
- colorAnalysis: null,
- currentDragWidth: 0,
- titleOverflown: false,
-
- currentDuration: 0,
- currentTime: 0,
-
- currentPlaying: app.cores.player.state["track_manifest"],
- loading: app.cores.player.state["loading"] ?? false,
- playbackStatus: app.cores.player.state["playback_status"] ?? "stopped",
-
- audioMuted: app.cores.player.state["muted"] ?? false,
- volume: app.cores.player.state["volume"],
-
- syncModeLocked: app.cores.player.state["control_locked"] ?? false,
- syncMode: app.cores.player.state["sync_mode"],
- }
-
- events = {
- "player.seeked": (seekTime) => {
- this.setState({
- currentTime: seekTime,
- })
- },
- "player.state.update:playback_status": (data) => {
- this.setState({ playbackStatus: data })
- },
- "player.state.update:track_manifest": (data) => {
- this.setState({ titleOverflown: false })
-
- this.setState({ currentPlaying: data })
- },
- "player.state.update:control_locked": (to) => {
- this.setState({ syncModeLocked: to })
- },
- "player.state.update:sync_mode": (to) => {
- this.setState({ syncMode: to })
- },
- "player.state.update:muted": (data) => {
- this.setState({ audioMuted: data })
- },
- "player.state.update:volume": (data) => {
- this.setState({ audioVolume: data })
- },
- "player.state.update:loading": (data) => {
- this.setState({ loading: data })
- },
- }
-
- titleRef = React.createRef()
-
- startSync() {
- // create a interval to get state from player
- if (this.syncInterval) {
- clearInterval(this.syncInterval)
- }
-
- this.syncInterval = setInterval(() => {
- const time = app.cores.player.seek()
- const duration = app.cores.player.duration()
-
- this.setState({
- currentDuration: duration,
- currentTime: time,
- colorAnalysis: app.cores.player.state.track_manifest?.metadata.cover_analysis,
- })
-
- const titleOverflown = isOverflown(this.titleRef.current)
-
- this.setState({ titleOverflown: titleOverflown })
- }, 800)
- }
-
- onClickPreviousButton = () => {
- app.cores.player.playback.previous()
- }
-
- onClickNextButton = () => {
- app.cores.player.playback.next()
- }
-
- onClicktogglePlayButton = () => {
- if (this.state?.playbackStatus === "playing") {
- app.cores.player.playback.pause()
- } else {
- app.cores.player.playback.play()
- }
- }
-
- updateVolume = (value) => {
- app.cores.player.volume(value)
- }
-
- toggleMute = () => {
- app.cores.player.toggleMute()
- }
-
- componentDidMount() {
- for (const event in this.events) {
- app.eventBus.on(event, this.events[event])
- }
-
- if (this.syncInterval) {
- clearInterval(this.syncInterval)
- }
-
- this.startSync()
- }
-
- componentWillUnmount() {
- for (const event in this.events) {
- app.eventBus.off(event, this.events[event])
- }
-
- if (this.syncInterval) {
- clearInterval(this.syncInterval)
- }
- }
-
- onDragEnd = (seekTime) => {
- this.setState({
- currentDragWidth: 0,
- dragging: false,
- })
-
- app.cores.player.seek(seekTime)
- }
-
- render() {
- //const bgColor = RGBStringToValues(getComputedStyle(document.documentElement).getPropertyValue("--background-color-accent-values"))
-
- return
-
- }
-}
-
-export default (props) => {
+const EnchancedLyricsPage = (props) => {
return
-
-
-
-
-
-
-
-
-
-
-
- {
-
- - { - this.state.plabackState === "stopped" ? "Nothing is playing" : <> - {this.state.currentPlaying?.title ?? "Nothing is playing"} - - } -
- } - - {this.state.titleOverflown && - } -
- {
- (this.state.currentPlaying?.metadata?.artist ?? this.state.currentPlaying?.artist) && <>
-
- - {this.state.currentPlaying?.metadata?.artist ?? this.state.currentPlaying?.artist ?? "Unknown"} -
- { - (this.state.currentPlaying?.metadata?.album ?? this.state.currentPlaying?.album) && <> - - -- {this.state.currentPlaying?.metadata?.album ?? this.state.currentPlaying?.album ?? "Unknown"} -
- - } - - } -
-
- {
- this.setState({
- dragging: true,
- })
- }}
- onMouseUp={(e) => {
- const rect = e.currentTarget.getBoundingClientRect()
- const seekTime = this.state.currentDuration * (e.clientX - rect.left) / rect.width
-
- this.onDragEnd(seekTime)
- }}
- onMouseMove={(e) => {
- const rect = e.currentTarget.getBoundingClientRect()
- const atWidth = (e.clientX - rect.left) / rect.width * 100
-
- this.setState({ currentDragWidth: atWidth })
- }}
- >
-
-
-
-
- })
- }
-
- render() {
- return - {line.words} -
- {
- return {
- ...acc,
- [key]: value,
- }
- }, {}),
- },
- )}
- style={{
- "--predominant-color": this.state.colorAnalysis?.hex ?? "unset",
- "--predominant-color-rgb-values": this.state.colorAnalysis?.value ? composeRgbValues(this.state.colorAnalysis?.value) : [0, 0, 0],
- "--line-time": `${calculateLineTime(this.state.currentLine)}ms`,
- "--line-animation-play-state": this.state.currentStatus === "playing" ? "running" : "paused",
- }}
- >
-
-
-
-
- }
-}
\ No newline at end of file
+export default EnchancedLyricsPage
\ No newline at end of file
diff --git a/packages/app/src/pages/lyrics/index.less b/packages/app/src/pages/lyrics/index.less
old mode 100755
new mode 100644
index d807b326..39fed992
--- a/packages/app/src/pages/lyrics/index.less
+++ b/packages/app/src/pages/lyrics/index.less
@@ -1,405 +1,130 @@
-@enabled-video-canvas-opacity: 0.4;
-// in px
-@cover-width: 150px;
-@left-panel-width: 300px;
+.lyrics {
+ position: relative;
+
+ z-index: 100;
-.lyrics_viewer {
display: flex;
flex-direction: column;
- isolation: isolate;
-
- //align-items: center;
-
- width: 100vw;
- height: 100vh;
-
- padding: 50px 0;
-
- overflow-y: hidden;
-
- transition: all 150ms ease-in-out;
-
- background-color: rgba(var(--predominant-color-rgb-values), 0.8);
- background:
- linear-gradient(20deg, rgba(var(--predominant-color-rgb-values), 0.8), rgba(var(--predominant-color-rgb-values), 0.2)),
- url(https://grainy-gradients.vercel.app/noise.svg);
-
- //background-size: 1%;
- background-position: center;
-
- &.video-canvas-enabled {
- background-color: rgba(var(--predominant-color-rgb-values), 1);
-
- .lyrics_viewer_video_canvas {
- video {
- opacity: @enabled-video-canvas-opacity;
- }
+ &.stopped {
+ .lyrics-video {
+ filter: blur(6px);
}
}
- &.centered-player {
- .lyrics_viewer_cover {
- width: 100vw;
-
- height: 80vh; //fallback
- height: 80dvh;
-
- opacity: 1;
-
- bottom: 20vh;
- }
-
- .player_controller_wrapper {
- top: 0;
- left: 0;
-
- width: 100%;
- height: 100%;
-
- align-items: center;
- justify-content: center;
-
- margin: 0;
-
- .player_controller {
- margin-top: 40%;
-
- max-width: 50vw;
- max-height: 50vh;
-
- width: 100%;
- //height: 100%;
-
- border-radius: 18px;
-
- gap: 0;
-
- padding: 20px 40px;
-
- .player_controller_left {
- width: 100%;
- max-width: 100%;
- min-width: 100%;
- }
-
- .player_controller_cover {
- width: 0px;
-
- min-width: 0px;
-
- img {
- min-width: 0px;
- }
- }
-
- .player_controller_info {
- .player_controller_info_title {
- font-size: 3rem;
- }
- }
- }
- }
- }
-
- &.cinematic-mode {
- .lyrics_viewer_mask {
- backdrop-filter: blur(0px);
- -webkit-backdrop-filter: blur(0px)
- }
-
- .lyrics_viewer_video_canvas {
- video {
- opacity: 1;
- }
- }
-
- .lyrics_viewer_content {
- .lyrics_viewer_lines {
- opacity: 0;
- }
- }
- }
-
- &.text_dark {
- .lyrics_viewer_content {
- .lyrics_viewer_lines {
- .lyrics_viewer_lines_line {
- color: var(--text-color-white);
-
- h2 {
- color: var(--text-color-white);
- }
- }
- }
- }
- }
-
- .lyrics_viewer_mask {
+ .lyrics-video {
+ z-index: 105;
position: absolute;
- z-index: 200;
-
top: 0;
left: 0;
- width: 100%;
- height: 100%;
+ width: 100vw;
+ height: 100vh;
- backdrop-filter: blur(21px);
- -webkit-backdrop-filter: blur(21px)
+ object-fit: cover;
+
+ transition: all 150ms ease-out;
}
- .lyrics_viewer_video_canvas {
- position: absolute;
- top: 0;
-
- width: 100%;
- //height: 100dvh;
- height: 100%;
-
- display: flex;
- flex-direction: row;
-
- align-items: center;
- justify-content: center;
-
- transition: all 150ms ease-in-out;
-
- video {
- width: 100%;
- height: 100%;
-
- opacity: 0;
-
- object-fit: cover;
-
- transition: all 150ms ease-in-out;
-
- }
- }
-
- .lyrics_viewer_cover {
- position: absolute;
+ .lyrics-text-wrapper {
+ z-index: 110;
+ position: fixed;
bottom: 0;
left: 0;
- z-index: 250;
+ padding: 60px;
- display: flex;
- flex-direction: row;
+ .lyrics-text {
+ display: flex;
+ flex-direction: column;
- align-items: center;
- justify-content: center;
+ width: 600px;
+ height: 200px;
- opacity: 0;
+ padding: 20px;
+ gap: 30px;
- width: 0px;
- height: 0px;
+ overflow: hidden;
- transition: all 150ms ease-in-out;
-
- overflow: hidden;
-
- img {
- width: 25vw;
- height: 25vw;
-
- max-width: 500px;
- max-height: 500px;
-
- object-fit: cover;
+ background-color: rgba(var(--background-color-accent-values), 0.6);
border-radius: 12px;
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
- }
- }
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
- .lyrics_viewer_content {
- z-index: 250;
- transition: all 150ms ease-in-out;
+ .line {
+ font-size: 2rem;
- .lyrics_viewer_lines {
- display: flex;
- flex-direction: column;
+ opacity: 0.1;
- align-items: center;
- justify-content: center;
-
- width: 90%;
-
- margin: auto;
-
- font-family: "Space Grotesk", sans-serif;
-
- transition: all 150ms ease-in-out;
-
- &::after,
- &::before {
- content: "";
- display: block;
- width: 100%;
- //height: 50dvh;
- height: 50vh;
- }
-
- .lyrics_viewer_lines_line {
- transition: all 150ms ease-in-out;
- z-index: 250;
-
- text-wrap: balance;
-
- h2 {
- text-wrap: balance;
- }
+ margin: 0;
&.current {
- margin: 20px 0;
- font-size: 2rem;
-
- animation: spacing-letters var(--line-time) ease-in-out forwards;
- animation-play-state: var(--line-animation-play-state);
+ opacity: 1;
}
}
}
}
-}
-@keyframes spacing-letters {
- 0% {
- letter-spacing: 0.3rem;
- }
+ .lyrics-player-controller-wrapper {
+ position: fixed;
+ z-index: 115;
- 100% {
- letter-spacing: 0;
- }
-}
+ bottom: 0;
+ right: 0;
-.player_controller_wrapper {
- display: flex;
- flex-direction: column;
+ padding: 60px;
- position: absolute;
+ .lyrics-player-controller {
+ position: relative;
- bottom: 0;
- left: 0;
-
- margin: 50px;
-
- z-index: 350;
-
- transition: all 150ms ease-in-out;
-
- .marquee-container {
- gap: 60px;
- }
-
- .player_controller {
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
-
- align-items: center;
-
- width: 100%;
-
- min-width: 350px;
- max-width: 500px;
-
- height: 220px;
-
- background-color: rgba(var(--background-color-accent-values), 0.4);
- // background:
- // linear-gradient(20deg, rgba(var(--background-color-accent-values), 0.8), transparent),
- // url(https://grainy-gradients.vercel.app/noise.svg);
-
- -webkit-backdrop-filter: blur(21px);
- backdrop-filter: blur(21px);
-
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-
- padding: 20px;
-
- border-radius: 12px;
-
- gap: 20px;
-
- color: var(--text-color);
-
- transition: all 150ms ease-in-out;
-
- overflow: hidden;
-
- &:hover {
- .player_controller_controls {
- height: 8vh;
- max-height: 100px;
- opacity: 1;
- }
-
- .player_controller_progress_wrapper {
- bottom: 7px;
-
- .player_controller_progress {
- height: 10px;
-
- width: 90%;
-
- background-color: var(--background-color-accent);
- }
- }
- }
-
- .player_controller_cover {
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
- width: @cover-width;
- min-width: @cover-width;
- max-width: @cover-width;
+ gap: 10px;
- height: 100%;
+ width: 300px;
- img {
- width: 100%;
- height: 100%;
+ padding: 30px;
- object-fit: cover;
+ border-radius: 12px;
- border-radius: 12px;
- }
- }
+ backdrop-filter: blur(5px);
+ -webkit-backdrop-filter: blur(5px);
- .player_controller_left {
- flex: 0;
- display: flex;
- flex-direction: column;
-
- align-items: center;
- justify-content: center;
-
- height: 100%;
- width: @left-panel-width;
+ background-color: rgba(var(--background-color-accent-values), 0.8);
transition: all 150ms ease-in-out;
- .player_controller_info {
+ &:hover {
+ gap: 20px;
+
+ .player-controls {
+ opacity: 1;
+ height: 30px;
+ }
+
+ .lyrics-player-controller-tags {
+ opacity: 1;
+ height: 10px;
+ }
+ }
+
+ .lyrics-player-controller-info {
display: flex;
flex-direction: column;
- //align-items: flex-start;
-
width: 100%;
gap: 10px;
transition: all 150ms ease-in-out;
- .player_controller_info_title {
+ .lyrics-player-controller-info-title {
font-size: 1.5rem;
font-weight: 600;
@@ -411,7 +136,7 @@
margin: 0;
}
- .player_controller_info_title_text {
+ .lyrics-player-controller-title-text {
transition: all 150ms ease-in-out;
width: 90%;
@@ -428,7 +153,7 @@
}
}
- .player_controller_info_artist {
+ .lyrics-player-controller-info-details {
display: flex;
flex-direction: row;
@@ -437,120 +162,99 @@
gap: 7px;
font-size: 0.6rem;
+
font-weight: 400;
+ // do not wrap text
+ white-space: nowrap;
+
h3 {
margin: 0;
}
}
}
- }
- .player_controller_controls {
- display: flex;
- flex-direction: row;
+ .player-controls {
+ opacity: 0;
+ height: 0px;
+ transition: all 150ms ease-in-out;
+ }
- align-items: center;
- justify-content: center;
+ .lyrics-player-controller-progress-wrapper {
+ width: 100%;
- gap: 8px;
+ .lyrics-player-controller-progress {
+ display: flex;
+ flex-direction: row;
- padding: 10px;
-
- width: 100%;
-
- height: 0px;
- opacity: 0;
-
- transition: all 150ms ease-in-out;
-
- .playButton {
- position: relative;
-
- display: flex;
-
- align-items: center;
- justify-content: center;
-
- .loadCircle {
- position: absolute;
-
- z-index: 330;
-
- top: 0;
- right: 0;
- left: 0;
+ align-items: center;
width: 100%;
- height: 100%;
margin: auto;
- align-self: center;
- justify-self: center;
+ transition: all 150ms ease-in-out;
- transform: scale(1.5);
+ border-radius: 12px;
- svg {
- width: 100%;
- height: 100%;
+ background-color: rgba(var(--background-color-accent-values), 0.8);
- path {
- stroke: var(--text-color);
- stroke-width: 1;
+ &:hover {
+ .lyrics-player-controller-progress-bar {
+ height: 10px;
}
}
+
+ .lyrics-player-controller-progress-bar {
+ height: 5px;
+
+ background-color: white;
+
+ border-radius: 12px;
+
+ transition: all 150ms ease-in-out;
+ }
}
}
- }
- .player_controller_progress_wrapper {
- position: absolute;
-
- box-sizing: border-box;
-
- bottom: 0;
- left: 0;
-
- margin: auto;
-
- width: 100%;
-
- .player_controller_progress {
+ .lyrics-player-controller-tags {
display: flex;
flex-direction: row;
align-items: center;
- height: 5px;
- width: 100%;
+ justify-content: center;
- margin: auto;
+ width: 100%;
+ height: 0px;
+
+ gap: 10px;
+
+ opacity: 0;
transition: all 150ms ease-in-out;
-
- border-radius: 12px;
-
- .player_controller_progress_bar {
- height: 100%;
-
- background-color: var(--background-color-contrast);
-
- border-radius: 12px;
-
- transition: all 150ms ease-in-out;
- }
}
}
}
-}
-@keyframes bottom-to-top {
- 0% {
- bottom: 0;
- }
+ .videoDebugOverlay {
+ position: fixed;
- 100% {
- bottom: 20vh;
+ top: 20px;
+ right: 20px;
+
+ z-index: 115;
+
+ display: flex;
+
+ flex-direction: column;
+
+ padding: 10px;
+ border-radius: 12px;
+
+ background-color: rgba(var(--background-color-accent-values), 0.8);
+
+ width: 200px;
+ height: fit-content;
}
}
\ No newline at end of file
diff --git a/packages/app/src/pages/messages/[to_user_id]/index.jsx b/packages/app/src/pages/messages/[to_user_id]/index.jsx
new file mode 100644
index 00000000..eeb2781d
--- /dev/null
+++ b/packages/app/src/pages/messages/[to_user_id]/index.jsx
@@ -0,0 +1,161 @@
+import React from "react"
+import * as antd from "antd"
+import classnames from "classnames"
+
+import UserPreview from "@components/UserPreview"
+
+import useChat from "@hooks/useChat"
+import ChatsService from "@models/chats"
+
+import lodash from "lodash"
+
+import "./index.less"
+
+const ChatPage = (props) => {
+ const { to_user_id } = props.params
+
+ const messagesRef = React.useRef()
+
+ const [isOnBottomView, setIsOnBottomView] = React.useState(true)
+ const [currentText, setCurrentText] = React.useState("")
+
+ const [L_History, R_History, E_History, M_History] = app.cores.api.useRequest(ChatsService.getChatHistory, to_user_id)
+
+ const {
+ sendMessage,
+ messages,
+ setMessages,
+ setScroller,
+ emitTypingEvent,
+ isRemoteTyping,
+ } = useChat(to_user_id)
+
+ async function submitMessage() {
+ if (!currentText) {
+ return false
+ }
+
+ await sendMessage(currentText)
+
+ setCurrentText("")
+ }
+
+ async function onInputChange(e) {
+ const value = e.target.value
+
+ setCurrentText(value)
+
+ if (value === "") {
+ emitTypingEvent(false)
+ } {
+ emitTypingEvent(true)
+ }
+ }
+
+ React.useEffect(() => {
+ if (R_History) {
+ setMessages(R_History.list)
+ // scroll to bottom
+ messagesRef.current?.scrollTo({
+ top: messagesRef.current.scrollHeight,
+ behavior: "smooth",
+ })
+ }
+ }, [R_History])
+
+ React.useEffect(() => {
+ if (isOnBottomView === true) {
+ setScroller(messagesRef)
+ } else {
+ setScroller(null)
+ }
+ }, [isOnBottomView])
+
+ if (E_History) {
+ return
-
-
-
-
-
-
-
-
-
- {
- this.renderLines()
- }
-
-
+
+}
+
+export default ChatPage
\ No newline at end of file
diff --git a/packages/app/src/pages/messages/[to_user_id]/index.less b/packages/app/src/pages/messages/[to_user_id]/index.less
new file mode 100644
index 00000000..dd49886d
--- /dev/null
+++ b/packages/app/src/pages/messages/[to_user_id]/index.less
@@ -0,0 +1,108 @@
+.chat-page {
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ height: 90vh;
+
+ gap: 20px;
+
+ .chat-page-header {
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+
+ gap: 20px;
+ }
+
+ .chat-page-messages {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ height: 80vh;
+
+ background-color: var(--background-color-accent);
+
+ border-radius: 12px;
+
+ padding: 10px;
+ padding-bottom: 20px;
+
+ overflow-y: overlay;
+
+ &.empty {
+ align-items: center;
+ justify-content: center;
+ }
+
+ .chat-page-line-wrapper {
+ display: flex;
+ flex-direction: column;
+
+ gap: 10px;
+
+ &.self {
+ align-self: flex-end;
+ }
+
+ .chat-page-line {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--background-color-primary);
+
+ width: fit-content;
+ max-width: 300px;
+
+ gap: 10px;
+
+ padding: 10px;
+ border-radius: 12px;
+
+ .chat-page-line-avatar {
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+
+ gap: 7px;
+
+ img {
+ width: 30px;
+ height: 30px;
+ border-radius: 12px;
+ }
+ }
+
+ .chat-page-line-text {
+ p {
+ white-space: pre-wrap;
+ line-break: break-all;
+ word-break: break-all;
+
+ margin: 0;
+
+ user-select: text;
+ }
+ }
+ }
+ }
+ }
+
+ .chat-page-input-wrapper {
+ position: absolute;
+
+ bottom: 0;
+ left: 0;
+
+ width: 100%;
+
+ .chat-page-input {
+ display: flex;
+ flex-direction: row;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/pages/messages/index.jsx b/packages/app/src/pages/messages/index.jsx
new file mode 100644
index 00000000..21d17128
--- /dev/null
+++ b/packages/app/src/pages/messages/index.jsx
@@ -0,0 +1,13 @@
+import React from "react"
+
+import "./index.less"
+
+const MessagesPage = (props) => {
+ return
+
+
+ Typing...
+ } +
+ {
+ messages.length === 0 &&
+
+
+
+ })
+ }
+
+
+
+ 
+
+ {line.user.username}
+
+
+
+
+
+ + {line.content} +
+
+
+
+
+
+
+
+}
+
+export default MessagesPage
\ No newline at end of file
diff --git a/packages/app/src/pages/messages/index.less b/packages/app/src/pages/messages/index.less
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/app/src/pages/music/track/[id]/index.jsx b/packages/app/src/pages/music/[type]/[id]/index.jsx
similarity index 68%
rename from packages/app/src/pages/music/track/[id]/index.jsx
rename to packages/app/src/pages/music/[type]/[id]/index.jsx
index 1a2d45b8..0789c939 100644
--- a/packages/app/src/pages/music/track/[id]/index.jsx
+++ b/packages/app/src/pages/music/[type]/[id]/index.jsx
@@ -7,10 +7,10 @@ import MusicService from "@models/music"
import "./index.less"
-const TrackPage = (props) => {
- const { id } = props.params
+const Item = (props) => {
+ const { type, id } = props.params
- const [loading, result, error, makeRequest] = app.cores.api.useRequest(MusicService.getTrackData, id)
+ const [loading, result, error, makeRequest] = app.cores.api.useRequest(MusicService.getReleaseData, id)
if (error) {
return