+ {props.checked && (
+
+
+ )
}
const Poll = (props) => {
- const { editMode, onClose, formRef } = props
+ const { editMode, onClose, formRef } = props
- const [options, setOptions] = React.useState(props.options ?? [])
- const [hasVoted, setHasVoted] = React.useState(false)
- const [totalVotes, setTotalVotes] = React.useState(0)
+ const [options, setOptions] = React.useState(props.options ?? [])
+ const [hasVoted, setHasVoted] = React.useState(false)
+ const [totalVotes, setTotalVotes] = React.useState(0)
- useWsEvents({
- "post.poll.vote": (data) => {
- const { post_id, option_id, user_id, previous_option_id } = data
+ useWsEvents(
+ {
+ "post.poll.vote": (data) => {
+ const { post_id, option_id, user_id, previous_option_id } = data
- if (post_id !== props.post_id) {
- return false
- }
+ if (post_id !== props.post_id) {
+ return false
+ }
- console.debug(`U[${user_id}] vote to option [${option_id}]`)
+ console.debug(`U[${user_id}] vote to option [${option_id}]`)
- setOptions((prev) => {
- prev = prev.map((option) => {
- return option
- })
+ setOptions((prev) => {
+ prev = prev.map((option) => {
+ return option
+ })
- if (user_id === app.userData._id) {
- // remove all `voted` properties
- prev = prev.map((option) => {
- delete option.voted
+ if (user_id === app.userData._id) {
+ // remove all `voted` properties
+ prev = prev.map((option) => {
+ delete option.voted
- option.voted = option.id === option_id
+ option.voted = option.id === option_id
- return option
- })
- }
+ return option
+ })
+ }
- if (previous_option_id) {
- const previousOptionIndex = prev.findIndex((option) => option.id === previous_option_id)
+ if (previous_option_id) {
+ const previousOptionIndex = prev.findIndex(
+ (option) => option.id === previous_option_id,
+ )
- if (previousOptionIndex !== -1) {
- prev[previousOptionIndex].count = prev[previousOptionIndex].count - 1
- }
- }
+ if (previousOptionIndex !== -1) {
+ prev[previousOptionIndex].count =
+ prev[previousOptionIndex].count - 1
+ }
+ }
- if (option_id) {
- const newOptionIndex = prev.findIndex((option) => option.id === option_id)
+ if (option_id) {
+ const newOptionIndex = prev.findIndex(
+ (option) => option.id === option_id,
+ )
- if (newOptionIndex !== -1) {
- prev[newOptionIndex].count += 1
- }
- }
+ if (newOptionIndex !== -1) {
+ prev[newOptionIndex].count += 1
+ }
+ }
- return prev
- })
- }
- }, {
- socketName: "posts"
- })
+ return prev
+ })
+ },
+ },
+ {
+ socketName: "posts",
+ },
+ )
- async function onVote(id) {
- console.debug(`Voting poll option`, {
- option_id: id,
- post_id: props.post_id,
- })
+ async function onVote(id) {
+ console.debug(`Voting poll option`, {
+ option_id: id,
+ post_id: props.post_id,
+ })
- await PostModel.votePoll({
- post_id: props.post_id,
- option_id: id,
- })
- }
+ await PostModel.votePoll({
+ post_id: props.post_id,
+ option_id: id,
+ })
+ }
- React.useEffect(() => {
- if (options) {
- const totalVotes = options.reduce((sum, option) => {
- return sum + option.count
- }, 0)
+ React.useEffect(() => {
+ if (options) {
+ const totalVotes = options.reduce((sum, option) => {
+ return sum + option.count
+ }, 0)
- setTotalVotes(totalVotes)
+ setTotalVotes(totalVotes)
- const hasVoted = options.some((option) => {
- return option.voted
- })
+ const hasVoted = options.some((option) => {
+ return option.voted
+ })
- setHasVoted(hasVoted)
- }
- }, [options])
+ setHasVoted(hasVoted)
+ }
+ }, [options])
- return
+ {props.checked && createIconRender("FaCheck")}
-
+ {props.option.label}
+
- {
- props.checked && createIconRender("FaCheck")
- }
+ {props.showPercentage && (
+ {Math.floor(props.percentage)}%
+ )}
- {
- props.showPercentage &&
- {Math.floor(props.percentage)}%
-
- }
-
-
- {props.option.label}
-
-
-
- {
- !editMode && options.map((option, index) => {
- const percentage = totalVotes > 0 ? (option.count / totalVotes) * 100 : 0
+ return (
+
+ )
}
-export default Poll
\ No newline at end of file
+export default Poll
diff --git a/packages/app/src/components/PostCard/components/attachments/index.jsx b/packages/app/src/components/PostCard/components/attachments/index.jsx
index 6796301d..89ab8ebd 100755
--- a/packages/app/src/components/PostCard/components/attachments/index.jsx
+++ b/packages/app/src/components/PostCard/components/attachments/index.jsx
@@ -1,6 +1,5 @@
import React from "react"
import { Skeleton, Button } from "antd"
-import Plyr from "plyr-react"
import mimetypes from "mime"
import BearCarousel from "bear-react-carousel"
@@ -9,167 +8,176 @@ import ImageViewer from "@components/ImageViewer"
import ContentFailed from "../contentFailed"
import "bear-react-carousel/dist/index.css"
-import "plyr-react/dist/plyr.css"
import "./index.less"
const renderDebug = localStorage.getItem("render_debug") === "true"
const Attachment = React.memo((props) => {
- const [loaded, setLoaded] = React.useState(false)
+ const [loaded, setLoaded] = React.useState(false)
- const [mimeType, setMimeType] = React.useState(null)
+ const [mimeType, setMimeType] = React.useState(null)
- try {
- const { url, id } = props.attachment
+ try {
+ const { url, id } = props.attachment
- const onDoubleClickAttachment = (e) => {
- if (mimeType.split("/")[0] === "image") {
- e.preventDefault()
- e.stopPropagation()
+ const onDoubleClickAttachment = (e) => {
+ if (mimeType.split("/")[0] === "image") {
+ e.preventDefault()
+ e.stopPropagation()
- app.controls.openFullImageViewer(url)
- }
- }
+ app.controls.openFullImageViewer(url)
+ }
+ }
- const getMediaType = async () => {
- let extension = null
+ const getMediaType = async () => {
+ let extension = null
- // get media type by parsing the url
- const mediaExtname = /\.([a-zA-Z0-9]+)$/.exec(url)
+ // get media type by parsing the url
+ const mediaExtname = /\.([a-zA-Z0-9]+)$/.exec(url)
- if (mediaExtname) {
- extension = mediaExtname[1]
- } else {
- // try to get media by creating requesting the url
- const response = await fetch(url, {
- method: "HEAD",
- })
+ if (mediaExtname) {
+ extension = mediaExtname[1]
+ } else {
+ // try to get media by creating requesting the url
+ const response = await fetch(url, {
+ method: "HEAD",
+ })
- extension = response.headers.get("content-type").split("/")[1]
- }
+ extension = response.headers.get("content-type").split("/")[1]
+ }
- extension = extension.toLowerCase()
+ extension = extension.toLowerCase()
- if (!extension) {
- setLoaded(true)
+ if (!extension) {
+ setLoaded(true)
- console.error("Failed to get media type", url, extension)
+ console.error("Failed to get media type", url, extension)
- return
- }
+ return
+ }
- const mimeType = mimetypes.getType(extension)
+ const mimeType = mimetypes.getType(extension)
- setMimeType(mimeType)
+ setMimeType(mimeType)
- setLoaded(true)
- }
+ setLoaded(true)
+ }
- const renderMedia = () => {
- if (!mimeType) {
- return null
- }
+ const renderMedia = () => {
+ if (!mimeType) {
+ return null
+ }
- switch (mimeType.split("/")[0]) {
- case "image": {
- return
+ {!editMode &&
+ options.map((option, index) => {
+ const percentage =
+ totalVotes > 0 ? (option.count / totalVotes) * 100 : 0
- return
-
- {(fields, { add, remove }) => {
- return <>
- {
- fields.map((field, index) => {
- return add()}
- icon={createIconRender("PlusOutlined")}
- >
- Add Option
-
-
- }}
-
-
- }
+ add()}
+ icon={createIconRender("PlusOutlined")}
+ >
+ Add Option
+
+
+ )
+ }}
+
+
+ )}
- {
- editMode &&
+ {editMode && (
+
-
-
+ {editMode && (
+
+
+ {(fields, { add, remove }) => {
+ return (
+ <>
+ {fields.map((field, index) => {
+ return (
+
+ remove(field.name)
+ }
+ icon={createIconRender(
+ "MdRemove",
+ )}
+ />
+ )}
+
+ )
+ })}
-
+
+
- {
- fields.length > 1 && remove(field.name)}
- icon={createIconRender("MdRemove")}
- />
- }
-
- })
- }
+ {fields.length > 1 && (
+
-
- }
-
+
+ )}
+ - Unsupported media type [{mimeType}] -
- } - } - } + switch (mimeType.split("/")[0]) { + case "image": { + returnUnsupported media type [{mimeType}]
+ } + } + } - React.useEffect(() => { - getMediaType() - }, []) + React.useEffect(() => { + getMediaType() + }, []) - if (!loaded) { - return
- {renderMedia()}
-
- } catch (error) {
- console.error(error)
+ return (
+
+ {renderMedia()}
+
+ )
+ } catch (error) {
+ console.error(error)
- return
- {
- props.flags && props.flags.includes("nsfw") && !nsfwAccepted &&
-
+
+ ),
+ }
+ })}
+ isEnableNavButton
+ isEnableMouseMove
+ isEnablePagination
+ setController={setController}
+ onSlideChange={setCarouselState}
+ isDebug={renderDebug}
+ />
+ )}
+
+ )
+})
diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx
index 79b5a2b2..cf231885 100755
--- a/packages/app/src/components/PostCard/index.jsx
+++ b/packages/app/src/components/PostCard/index.jsx
@@ -1,7 +1,7 @@
import React from "react"
import classnames from "classnames"
-import Plyr from "plyr-react"
-import { motion } from "framer-motion"
+import ReactPlayer from "react-player/lazy"
+import { motion } from "motion/react"
import Poll from "@components/Poll"
import { Icons } from "@components/Icons"
@@ -14,249 +14,288 @@ import PostAttachments from "./components/attachments"
import "./index.less"
const articleAnimationProps = {
- layout: true,
- initial: { y: -100, opacity: 0 },
- animate: { y: 0, opacity: 1, },
- exit: { scale: 0, opacity: 0 },
- transition: { duration: 0.1, },
+ layout: true,
+ initial: { y: -100, opacity: 0 },
+ animate: { y: 0, opacity: 1 },
+ exit: { scale: 0, opacity: 0 },
+ transition: { duration: 0.1 },
}
const messageRegexs = [
- {
- regex: /https?:\/\/(?:www\.)?youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})(&[a-zA-Z0-9_-]+=[a-zA-Z0-9_-]+)*/g,
- fn: (key, result) => {
- return
- {
- if (typeof attachment !== "object") {
- attachment = {
- url: attachment,
- }
- }
+ {props.attachments?.length > 0 && (
+ {
+ if (typeof attachment !== "object") {
+ attachment = {
+ url: attachment,
+ }
+ }
- return {
- key: index,
- children:
-
- }
- })}
- isEnableNavButton
- isEnableMouseMove
- isEnablePagination
- setController={setController}
- onSlideChange={setCarouselState}
- isDebug={renderDebug}
- />
- }
-
-})
\ No newline at end of file
+ return {
+ key: index,
+ children: (
+ - This post may contain sensitive content. -
+ return ( +
+ {props.flags && props.flags.includes("nsfw") && !nsfwAccepted && (
+
+ )}
- {
- props.attachments?.length > 0 &&
+
- }
+
+ This post may contain sensitive content.
- -
-
-
-
- }
+ return (
+
-
-
+
+
+
+ )
+ }
- componentDidMount = () => {
- app.cores.api.listenEvent(`post.update.${this.state.data._id}`, this.handleDataUpdate, "posts")
- }
+ componentDidMount = () => {
+ app.cores.api.listenEvent(
+ `post.update.${this.state.data._id}`,
+ this.handleDataUpdate,
+ "posts",
+ )
+ }
- componentWillUnmount = () => {
- app.cores.api.unlistenEvent(`post.update.${this.state.data._id}`, this.handleDataUpdate, "posts")
- }
+ componentWillUnmount = () => {
+ app.cores.api.unlistenEvent(
+ `post.update.${this.state.data._id}`,
+ this.handleDataUpdate,
+ "posts",
+ )
+ }
- render() {
- return
+
+
-
+
- }
-}
\ No newline at end of file
+ {!this.props.disableHasReplies &&
+ !!this.state.hasReplies && (
+
+
+
-
-
-
-
- {
- processString(messageRegexs)(this.state.data.message ?? "")
- }
-
+
+
+ {this.state.data.poll_options && (
+
+ {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
+
+
+ )}
+
-
+ return (
+
+
+ )
}
const NoResultComponent = () => {
- return
-
- }
-
-
+
+ )}
+
-
- }
-
- const PostListProps = {
- list: this.state.list,
-
- disableReplyTag: this.props.disableReplyTag,
- disableHasReplies: this.props.disableHasReplies,
-
- onLikePost: this.onLikePost,
- onSavePost: this.onSavePost,
- onDeletePost: this.onDeletePost,
- onEditPost: this.onEditPost,
- onReplyPost: this.onReplyPost,
- onDoubleClick: this.onDoubleClickPost,
-
- onLoadMore: this.onLoadMore,
- hasMore: this.state.hasMore,
- loading: this.state.loading,
-
- realtimeUpdates: this.state.realtimeUpdates,
- resumingLoading: this.state.resumingLoading,
- onResumeRealtimeUpdates: this.onResumeRealtimeUpdates,
- }
-
- if (app.isMobile) {
- return Whoa, nothing on here...
-
-
- }
+ state = {
+ openPost: null,
+
+ loading: false,
+ resumingLoading: false,
+ initialLoading: true,
+ scrollingToTop: false,
+
+ topVisible: true,
+
+ realtimeUpdates: true,
+
+ hasMore: true,
+ list: this.props.list ?? [],
+ }
+
+ parentRef = this.props.innerRef
+ listRef = React.createRef()
+
+ timelineWsEvents = {
+ "feed.new": (data) => {
+ console.log("New feed => ", data)
+
+ if (!this.state.realtimeUpdates) {
+ return
+ }
+
+ this.setState({
+ list: [data, ...this.state.list],
+ })
+ },
+ "post.new": (data) => {
+ console.log("New post => ", data)
+
+ if (!this.state.realtimeUpdates) {
+ return
+ }
+
+ this.setState({
+ list: [data, ...this.state.list],
+ })
+ },
+ "post.delete": (id) => {
+ console.log("Deleted post => ", id)
+
+ this.setState({
+ list: this.state.list.filter((post) => {
+ return post._id !== id
+ }),
+ })
+ },
+ }
+
+ handleLoad = async (fn, params = {}) => {
+ this.setState({
+ loading: true,
+ })
+
+ let payload = {
+ trim: this.state.list.length,
+ limit: app.cores.settings.get("feed_max_fetch"),
+ }
+
+ if (this.props.loadFromModelProps) {
+ payload = {
+ ...payload,
+ ...this.props.loadFromModelProps,
+ }
+ }
+
+ if (params.replace) {
+ payload.trim = 0
+ }
+
+ const result = await fn(payload).catch((err) => {
+ console.error(err)
+
+ app.message.error("Failed to load more posts")
+
+ return null
+ })
+
+ console.log("Loaded posts => ", result)
+
+ if (result) {
+ if (result.length === 0) {
+ return this.setState({
+ hasMore: false,
+ })
+ }
+
+ if (params.replace) {
+ this.setState({
+ list: result,
+ })
+ } else {
+ this.setState({
+ list: [...this.state.list, ...result],
+ })
+ }
+ }
+
+ this.setState({
+ loading: false,
+ })
+ }
+
+ addPost = (post) => {
+ this.setState({
+ list: [post, ...this.state.list],
+ })
+ }
+
+ removePost = (id) => {
+ this.setState({
+ list: this.state.list.filter((post) => {
+ return post._id !== id
+ }),
+ })
+ }
+
+ _hacks = {
+ addPost: this.addPost,
+ removePost: this.removePost,
+ addRandomPost: () => {
+ const randomId = Math.random().toString(36).substring(7)
+
+ this.addPost({
+ _id: randomId,
+ message: `Random post ${randomId}`,
+ user: {
+ _id: randomId,
+ username: "random user",
+ avatar: `https://api.dicebear.com/7.x/thumbs/svg?seed=${randomId}`,
+ },
+ })
+ },
+ listRef: this.listRef,
+ }
+
+ onResumeRealtimeUpdates = async () => {
+ console.log("Resuming realtime updates")
+
+ this.setState({
+ resumingLoading: true,
+ scrollingToTop: true,
+ })
+
+ this.listRef.current.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ })
+
+ // reload posts
+ await this.handleLoad(this.props.loadFromModel, {
+ replace: true,
+ })
+
+ this.setState({
+ realtimeUpdates: true,
+ resumingLoading: false,
+ })
+ }
+
+ onScrollList = (e) => {
+ const { scrollTop } = e.target
+
+ if (this.state.scrollingToTop && scrollTop === 0) {
+ this.setState({
+ scrollingToTop: false,
+ })
+ }
+
+ if (scrollTop > 200) {
+ if (this.state.topVisible) {
+ this.setState({
+ topVisible: false,
+ })
+
+ if (typeof this.props.onTopVisibility === "function") {
+ this.props.onTopVisibility(false)
+ }
+ }
+
+ if (
+ !this.props.realtime ||
+ this.state.resumingLoading ||
+ this.state.scrollingToTop
+ ) {
+ return null
+ }
+
+ this.setState({
+ realtimeUpdates: false,
+ })
+ } else {
+ if (!this.state.topVisible) {
+ this.setState({
+ topVisible: true,
+ })
+
+ if (typeof this.props.onTopVisibility === "function") {
+ this.props.onTopVisibility(true)
+ }
+
+ // if (this.props.realtime || !this.state.realtimeUpdates && !this.state.resumingLoading && scrollTop < 5) {
+ // this.onResumeRealtimeUpdates()
+ // }
+ }
+ }
+ }
+
+ componentDidMount = async () => {
+ if (typeof this.props.loadFromModel === "function") {
+ await this.handleLoad(this.props.loadFromModel)
+ }
+
+ this.setState({
+ initialLoading: false,
+ })
+
+ if (this.props.watchTimeline) {
+ if (!Array.isArray(this.props.watchTimeline)) {
+ console.error("watchTimeline prop must be an array")
+ } else {
+ this.props.watchTimeline.forEach((event) => {
+ if (typeof this.timelineWsEvents[event] !== "function") {
+ console.error(
+ `The event "${event}" is not defined in the timelineWsEvents object`,
+ )
+ }
+
+ app.cores.api.listenEvent(
+ event,
+ this.timelineWsEvents[event],
+ "posts",
+ )
+ })
+ }
+ }
+
+ if (this.listRef && this.listRef.current) {
+ this.listRef.current.addEventListener("scroll", this.onScrollList)
+ }
+
+ window._hacks = this._hacks
+ }
+
+ componentWillUnmount = async () => {
+ if (this.props.watchTimeline) {
+ if (!Array.isArray(this.props.watchTimeline)) {
+ console.error("watchTimeline prop must be an array")
+ } else {
+ this.props.watchTimeline.forEach((event) => {
+ if (typeof this.timelineWsEvents[event] !== "function") {
+ console.error(
+ `The event "${event}" is not defined in the timelineWsEvents object`,
+ )
+ }
+
+ app.cores.api.unlistenEvent(
+ event,
+ this.timelineWsEvents[event],
+ "posts",
+ )
+ })
+ }
+ }
+
+ if (this.listRef && this.listRef.current) {
+ this.listRef.current.removeEventListener(
+ "scroll",
+ this.onScrollList,
+ )
+ }
+
+ window._hacks = null
+ }
+
+ componentDidUpdate = async (prevProps, prevState) => {
+ if (prevProps.list !== this.props.list) {
+ this.setState({
+ list: this.props.list,
+ })
+ }
+ }
+
+ onLikePost = async (data) => {
+ let result = await PostModel.toggleLike({ post_id: data._id }).catch(
+ () => {
+ antd.message.error("Failed to like post")
+
+ return false
+ },
+ )
+
+ return result
+ }
+
+ onSavePost = async (data) => {
+ let result = await PostModel.toggleSave({ post_id: data._id }).catch(
+ () => {
+ antd.message.error("Failed to save post")
+
+ return false
+ },
+ )
+
+ return result
+ }
+
+ onEditPost = (data) => {
+ app.controls.openPostCreator({
+ edit_post: data._id,
+ })
+ }
+
+ onReplyPost = (data) => {
+ app.controls.openPostCreator({
+ reply_to: data._id,
+ })
+ }
+
+ onDoubleClickPost = (data) => {
+ app.navigation.goToPost(data._id)
+ }
+
+ onDeletePost = async (data) => {
+ antd.Modal.confirm({
+ title: "Are you sure you want to delete this post?",
+ content: "This action is irreversible",
+ okText: "Yes",
+ okType: "danger",
+ cancelText: "No",
+ onOk: async () => {
+ await PostModel.deletePost({ post_id: data._id }).catch(() => {
+ antd.message.error("Failed to delete post")
+ })
+ },
+ })
+ }
+
+ ontoggleOpen = (to, data) => {
+ if (typeof this.props.onOpenPost === "function") {
+ this.props.onOpenPost(to, data)
+ }
+ }
+
+ onLoadMore = async () => {
+ if (typeof this.props.onLoadMore === "function") {
+ return this.handleLoad(this.props.onLoadMore)
+ } else if (this.props.loadFromModel) {
+ return this.handleLoad(this.props.loadFromModel)
+ }
+ }
+
+ render() {
+ if (this.state.initialLoading) {
+ return
+
+ )
+ }
+
+ const PostListProps = {
+ list: this.state.list,
+
+ disableReplyTag: this.props.disableReplyTag,
+ disableHasReplies: this.props.disableHasReplies,
+
+ onLikePost: this.onLikePost,
+ onSavePost: this.onSavePost,
+ onDeletePost: this.onDeletePost,
+ onEditPost: this.onEditPost,
+ onReplyPost: this.onReplyPost,
+ onDoubleClick: this.onDoubleClickPost,
+
+ onLoadMore: this.onLoadMore,
+ hasMore: this.state.hasMore,
+ loading: this.state.loading,
+
+ realtimeUpdates: this.state.realtimeUpdates,
+ resumingLoading: this.state.resumingLoading,
+ onResumeRealtimeUpdates: this.onResumeRealtimeUpdates,
+ }
+
+ if (app.isMobile) {
+ return Whoa, nothing on here...
+
+
+ )
+ }
}
-export default React.forwardRef((props, ref) =>
-
- }
+ const renderItems = () => {
+ if (items.length === 0) {
+ return (
+ No items
-
+
+ )
+ }
- return items.map((item, index) => {
- if (item.type === "separator") {
- return
- }
+ return items.map((item, index) => {
+ if (item.type === "separator") {
+ return
+ }
- return No items
+ handleItemClick(item)}
- className="item"
- >
-
+ )
+ })
+ }
- return - {item.label} -
+ return ( + handleItemClick(item)}
+ className="item"
+ >
+
- })
- }
+ {createIconRender(item.icon)}
+ {item.label}
- { - item.description &&- {item.description} -
- } + {item.description && ( +{item.description}
+ )} - { - createIconRender(item.icon) - } -
-
- {
- renderItems()
- }
-
-
- }
-
+
+ {renderItems()}
+
+
+ )}
+
- {
- props.playback === "playing" ?
+ return (
+
+ {props.playback === "playing" ? (
+
+ )
}
const AccountButton = React.forwardRef((props, ref) => {
- const user = app.userData
+ const user = app.userData
- const handleClick = () => {
- if (!user) {
- return app.navigation.goAuth()
- }
+ const handleClick = () => {
+ if (!user) {
+ return app.navigation.goAuth()
+ }
- return app.navigation.goToAccount()
- }
+ return app.navigation.goToAccount()
+ }
- const handleHold = () => {
- app.layout.draggable.actions({
- list: [
- {
- key: "settings",
- icon: "FiSettings",
- label: "Settings",
- onClick: () => {
- app.navigation.goToSettings()
- },
- },
- {
- key: "account",
- icon: "FiUser",
- label: "Account",
- onClick: () => {
- app.navigation.goToAccount()
- },
- },
- {
- key: "logout",
- icon: "FiLogOut",
- label: "Logout",
- danger: true,
- onClick: () => {
- app.eventBus.emit("app.logout_request")
- },
- }
- ]
- })
- }
+ const handleHold = () => {
+ app.layout.draggable.actions({
+ list: [
+ {
+ key: "settings",
+ icon: "FiSettings",
+ label: "Settings",
+ onClick: () => {
+ app.navigation.goToSettings()
+ },
+ },
+ {
+ key: "account",
+ icon: "FiUser",
+ label: "Account",
+ onClick: () => {
+ app.navigation.goToAccount()
+ },
+ },
+ {
+ key: "logout",
+ icon: "FiLogOut",
+ label: "Logout",
+ danger: true,
+ onClick: () => {
+ app.eventBus.emit("app.logout_request")
+ },
+ },
+ ],
+ })
+ }
- return
-
+ return (
+
- {
- user ?
-
+
+ )
})
export class BottomBar extends React.Component {
- static contextType = Context
+ static contextType = Context
- state = {
- visible: false,
- quickNavVisible: false,
- render: null,
- tourOpen: false,
- }
+ state = {
+ visible: false,
+ quickNavVisible: false,
+ render: null,
+ tourOpen: false,
+ }
- busEvents = {
- "runtime.crash": () => {
- this.toggleVisibility(false)
- }
- }
+ busEvents = {
+ "runtime.crash": () => {
+ this.toggleVisibility(false)
+ },
+ }
- navBtnRef = React.createRef()
- accountBtnRef = React.createRef()
+ navBtnRef = React.createRef()
+ accountBtnRef = React.createRef()
- componentDidMount = () => {
- this.interface = app.layout.bottom_bar = {
- toggleVisible: this.toggleVisibility,
- isVisible: () => this.state.visible,
- render: (fragment) => {
- this.setState({ render: fragment })
- },
- clear: () => {
- this.setState({ render: null })
- },
- toggleTour: () => {
- this.setState({ tourOpen: !this.state.tourOpen })
- },
- }
+ componentDidMount = () => {
+ this.interface = app.layout.bottom_bar = {
+ toggleVisible: this.toggleVisibility,
+ isVisible: () => this.state.visible,
+ render: (fragment) => {
+ this.setState({ render: fragment })
+ },
+ clear: () => {
+ this.setState({ render: null })
+ },
+ toggleTour: () => {
+ this.setState({ tourOpen: !this.state.tourOpen })
+ },
+ }
- setTimeout(() => {
- this.setState({ visible: true })
- }, 10)
+ setTimeout(() => {
+ this.setState({ visible: true })
+ }, 10)
- // Register bus events
- Object.keys(this.busEvents).forEach((key) => {
- app.eventBus.on(key, this.busEvents[key])
- })
+ // Register bus events
+ Object.keys(this.busEvents).forEach((key) => {
+ app.eventBus.on(key, this.busEvents[key])
+ })
- setTimeout(() => {
- const isTourFinished = localStorage.getItem("mobile_tour")
+ setTimeout(() => {
+ const isTourFinished = localStorage.getItem("mobile_tour")
- if (!isTourFinished) {
- this.toggleTour(true)
+ if (!isTourFinished) {
+ this.toggleTour(true)
- localStorage.setItem("mobile_tour", true)
- }
- }, 500)
- }
+ localStorage.setItem("mobile_tour", true)
+ }
+ }, 500)
+ }
- componentWillUnmount = () => {
- delete window.app.layout.bottom_bar
+ componentWillUnmount = () => {
+ delete window.app.layout.bottom_bar
- // Unregister bus events
- Object.keys(this.busEvents).forEach((key) => {
- app.eventBus.off(key, this.busEvents[key])
- })
- }
+ // Unregister bus events
+ Object.keys(this.busEvents).forEach((key) => {
+ app.eventBus.off(key, this.busEvents[key])
+ })
+ }
- getTourSteps = () => {
- return tourSteps.map((step) => {
- step.target = () => this[step.refName].current
+ getTourSteps = () => {
+ return tourSteps.map((step) => {
+ step.target = () => this[step.refName].current
- return step
- })
- }
+ return step
+ })
+ }
- toggleVisibility = (to) => {
- if (typeof to === "undefined") {
- to = !this.state.visible
- }
+ toggleVisibility = (to) => {
+ if (typeof to === "undefined") {
+ to = !this.state.visible
+ }
- this.setState({ visible: to })
- }
+ this.setState({ visible: to })
+ }
- handleItemClick = (item) => {
- if (item.dispatchEvent) {
- app.eventBus.emit(item.dispatchEvent)
- } else if (item.location) {
- app.location.push(item.location)
- }
- }
+ handleItemClick = (item) => {
+ if (item.dispatchEvent) {
+ app.eventBus.emit(item.dispatchEvent)
+ } else if (item.location) {
+ app.location.push(item.location)
+ }
+ }
- handleNavTouchStart = (e) => {
- this._navTouchStart = setTimeout(() => {
- this.setState({ quickNavVisible: true })
+ handleNavTouchStart = (e) => {
+ this._navTouchStart = setTimeout(() => {
+ this.setState({ quickNavVisible: true })
- if (app.cores.haptics?.vibrate) {
- app.cores.haptics.vibrate(80)
- }
+ if (app.cores.haptics?.vibrate) {
+ app.cores.haptics.vibrate(80)
+ }
- // remove the timeout
- this._navTouchStart = null
- }, 400)
- }
+ // remove the timeout
+ this._navTouchStart = null
+ }, 400)
+ }
- handleNavTouchEnd = (event) => {
- if (this._lastHovered) {
- this._lastHovered.classList.remove("hover")
- }
+ handleNavTouchEnd = (event) => {
+ if (this._lastHovered) {
+ this._lastHovered.classList.remove("hover")
+ }
- if (this._navTouchStart) {
- clearTimeout(this._navTouchStart)
+ if (this._navTouchStart) {
+ clearTimeout(this._navTouchStart)
- this._navTouchStart = null
+ this._navTouchStart = null
- return false
- }
+ return false
+ }
- this.setState({ quickNavVisible: false })
+ this.setState({ quickNavVisible: false })
- // get cords of the touch
- const x = event.changedTouches[0].clientX
- const y = event.changedTouches[0].clientY
+ // get cords of the touch
+ const x = event.changedTouches[0].clientX
+ const y = event.changedTouches[0].clientY
- // get the element at the touch
- const element = document.elementFromPoint(x, y)
+ // get the element at the touch
+ const element = document.elementFromPoint(x, y)
- // get the closest element with the attribute
- const closest = element.closest(".quick-nav_item")
+ // get the closest element with the attribute
+ const closest = element.closest(".quick-nav_item")
- if (!closest) {
- return false
- }
+ if (!closest) {
+ return false
+ }
- const item = QuickNavMenuItems.find((item) => {
- return item.id === closest.getAttribute("quicknav-item")
- })
+ const item = QuickNavMenuItems.find((item) => {
+ return item.id === closest.getAttribute("quicknav-item")
+ })
- if (!item) {
- return false
- }
+ if (!item) {
+ return false
+ }
- if (item.location) {
- app.location.push(item.location)
+ if (item.location) {
+ app.location.push(item.location)
- if (app.cores.haptics?.vibrate) {
- app.cores.haptics.vibrate([40, 80])
- }
- }
- }
+ if (app.cores.haptics?.vibrate) {
+ app.cores.haptics.vibrate([40, 80])
+ }
+ }
+ }
- handleNavTouchMove = (event) => {
- // check if the touch is hovering a quicknav item
- const x = event.changedTouches[0].clientX
- const y = event.changedTouches[0].clientY
+ handleNavTouchMove = (event) => {
+ // check if the touch is hovering a quicknav item
+ const x = event.changedTouches[0].clientX
+ const y = event.changedTouches[0].clientY
- // get the element at the touch
- const element = document.elementFromPoint(x, y)
+ // get the element at the touch
+ const element = document.elementFromPoint(x, y)
- // get the closest element with the attribute
- const closest = element.closest("[quicknav-item]")
+ // get the closest element with the attribute
+ const closest = element.closest("[quicknav-item]")
- if (!closest) {
- if (this._lastHovered) {
- this._lastHovered.classList.remove("hover")
- }
+ if (!closest) {
+ if (this._lastHovered) {
+ this._lastHovered.classList.remove("hover")
+ }
- this._lastHovered = null
+ this._lastHovered = null
- return false
- }
+ return false
+ }
- if (this._lastHovered !== closest) {
- if (this._lastHovered) {
- this._lastHovered.classList.remove("hover")
- }
+ if (this._lastHovered !== closest) {
+ if (this._lastHovered) {
+ this._lastHovered.classList.remove("hover")
+ }
- this._lastHovered = closest
+ this._lastHovered = closest
- closest.classList.add("hover")
+ closest.classList.add("hover")
- if (app.cores.haptics?.vibrate) {
- app.cores.haptics.vibrate(40)
- }
- }
- }
+ if (app.cores.haptics?.vibrate) {
+ app.cores.haptics.vibrate(40)
+ }
+ }
+ }
- toggleTour = (to) => {
- if (typeof to === "undefined") {
- to = !this.state.tourOpen
- }
+ toggleTour = (to) => {
+ if (typeof to === "undefined") {
+ to = !this.state.tourOpen
+ }
- this.setState({
- tourOpen: to
- })
- }
+ this.setState({
+ tourOpen: to,
+ })
+ }
- render() {
- if (this.state.render) {
- return
+ {user ? (
+
+
- {this.state.render}
-
- }
+ render() {
+ if (this.state.render) {
+ return {this.state.render}
+ }
- const heightValue = this.state.visible ? Number(app.cores.style.getDefaultVar("bottom-bar-height").replace("px", "")) : 0
+ const heightValue = Number(
+ app.cores.style
+ .getDefaultVar("bottom-bar-height")
+ .replace("px", ""),
+ )
- return <>
- {
- this.state.tourOpen &&
-
+
+ )}
+
+
+ )
+ }
}
export default (props) => {
- return
-
+
-
+ {this.state.visible && (
+
+
- }
-
-
- }
+
-
+
- {createIconRender("FiPlusCircle")}
-
-
+
-
+
-
+
- {
- this.context.track_manifest &&
+ {createIconRender("FiPlusCircle")}
+
+
-
- }
+ {this.context.track_manifest && (
+
+
+ )}
-
+
-
-
+
- {createIconRender("FiSearch")}
-
-
+
-
+ {createIconRender("FiSearch")}
+
+
-
-
- }}
-
- {
- render?.component && React.cloneElement(render?.component, render?.options?.props ?? {})
- }
-
-
+ {render?.component &&
+ React.cloneElement(
+ render?.component,
+ render?.options?.props ?? {},
+ )}
+
+
+ return (
+ <>
- {this.state.drawers}
+ {this.state.maskVisible && (
+ this.closeLastDrawer()}
+ initial={{
+ opacity: 0,
+ }}
+ animate={{
+ opacity: 1,
+ }}
+ exit={{
+ opacity: 0,
+ }}
+ transition={{
+ type: "spring",
+ stiffness: 100,
+ damping: 20,
+ }}
+ />
+ )}
-
-
+
+
+ {this.state.drawers}
+
+
+ )
}
-}
\ No newline at end of file
+}
diff --git a/packages/app/src/layouts/components/header/index.jsx b/packages/app/src/layouts/components/header/index.jsx
index d0c5f013..b1787d93 100755
--- a/packages/app/src/layouts/components/header/index.jsx
+++ b/packages/app/src/layouts/components/header/index.jsx
@@ -1,64 +1,64 @@
import React from "react"
import classnames from "classnames"
-import { Motion, spring } from "react-motion"
+import { motion, AnimatePresence } from "motion/react"
import useLayoutInterface from "@hooks/useLayoutInterface"
import "./index.less"
export default (props) => {
- const [render, setRender] = React.useState(null)
+ const [render, setRender] = React.useState(null)
- useLayoutInterface("header", {
- render: (component, options) => {
- if (component === null) {
- return setRender(null)
- }
+ useLayoutInterface("header", {
+ render: (component, options) => {
+ if (component === null) {
+ return setRender(null)
+ }
- return setRender({
- component,
- options
- })
- },
- })
+ return setRender({
+ component,
+ options,
+ })
+ },
+ })
- React.useEffect(() => {
- if (render) {
- app.layout.toggleDisableTopLayoutPadding(true)
- } else {
- app.layout.toggleDisableTopLayoutPadding(false)
- }
- }, [render])
+ React.useEffect(() => {
+ if (render) {
+ app.layout.toggleDisableTopLayoutPadding(true)
+ } else {
+ app.layout.toggleDisableTopLayoutPadding(false)
+ }
+ }, [render])
- return
-
- }}
-
- {
- render?.component && React.cloneElement(
- render?.component,
- render?.options?.props ?? {}
- )
- }
-
-
+ {render?.component &&
+ React.cloneElement(
+ render?.component,
+ render?.options?.props ?? {},
+ )}
+
+
-
+
+ )}
+
+ )
+ }
+}
diff --git a/packages/app/src/layouts/components/toolsBar/index.less b/packages/app/src/layouts/components/toolsBar/index.less
index e8c1f7ad..0aa0e088 100755
--- a/packages/app/src/layouts/components/toolsBar/index.less
+++ b/packages/app/src/layouts/components/toolsBar/index.less
@@ -1,79 +1,78 @@
@import "@styles/vars.less";
.tools-bar-wrapper {
- position: sticky;
+ position: sticky;
- top: 0;
- right: 0;
+ top: 0;
+ right: 0;
- z-index: 150;
+ z-index: 150;
- height: 100vh;
- height: 100dvh;
- max-width: 420px;
+ height: 100vh;
+ height: 100dvh;
+ max-width: 420px;
- padding: 10px;
+ padding: 10px;
- .visible {
- min-width: 320px;
- }
+ .visible {
+ min-width: 320px;
+ }
- &:not(.visible) {
- min-width: 0;
- padding: 0;
-
- }
+ &:not(.visible) {
+ min-width: 0;
+ padding: 0;
+ }
}
.tools-bar {
- position: relative;
+ position: relative;
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
- border-radius: 12px;
+ border-radius: 12px;
- border-radius: @sidebar_borderRadius;
- box-shadow: @card-shadow;
+ border-radius: @sidebar_borderRadius;
+ box-shadow: @card-shadow;
- padding: 10px;
+ padding: 10px;
- background-color: var(--background-color-accent);
+ background-color: var(--background-color-accent);
- gap: 20px;
+ gap: 20px;
- flex: 0;
+ flex: 0;
- .attached_renders {
- position: relative;
+ .attached_renders {
+ position: relative;
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
- align-items: center;
+ align-items: center;
- width: 100%;
- height: fit-content;
+ width: 100%;
+ height: fit-content;
- gap: 10px;
+ gap: 10px;
- &.bottom {
- position: absolute;
+ &.bottom {
+ position: absolute;
- bottom: 0;
- left: 0;
+ bottom: 0;
+ left: 0;
- padding: 10px;
- }
+ padding: 10px;
+ }
- .card {
- width: 100%;
- height: fit-content;
+ .card {
+ width: 100%;
+ height: fit-content;
- background-color: var(--background-color-primary);
- }
- }
-}
\ No newline at end of file
+ background-color: var(--background-color-primary);
+ }
+ }
+}
diff --git a/packages/app/src/pages/account/index.jsx b/packages/app/src/pages/account/index.jsx
index 4ce83003..fce56175 100755
--- a/packages/app/src/pages/account/index.jsx
+++ b/packages/app/src/pages/account/index.jsx
@@ -1,7 +1,7 @@
import React from "react"
import * as antd from "antd"
import classnames from "classnames"
-import { motion, AnimatePresence } from "framer-motion"
+import { motion, AnimatePresence } from "motion/react"
import { Icons } from "@components/Icons"
import FollowButton from "@components/FollowButton"
@@ -21,10 +21,10 @@ import FollowersTab from "./tabs/followers"
import "./index.less"
const TabsComponent = {
- "posts": PostsTab,
- "followers": FollowersTab,
- "details": DetailsTab,
- "music": MusicTab,
+ posts: PostsTab,
+ followers: FollowersTab,
+ details: DetailsTab,
+ music: MusicTab,
}
export default class Account extends React.Component {
@@ -60,7 +60,7 @@ export default class Account extends React.Component {
}
user = await UserModel.data({
- username: requestedUser
+ username: requestedUser,
}).catch((error) => {
console.error(error)
@@ -77,7 +77,9 @@ export default class Account extends React.Component {
console.log(`Loaded User [${user.username}] >`, user)
- const followersResult = await FollowsModel.getFollowers(user._id).catch(() => false)
+ const followersResult = await FollowsModel.getFollowers(
+ user._id,
+ ).catch(() => false)
if (followersResult) {
followersCount = followersResult.count
@@ -118,7 +120,10 @@ export default class Account extends React.Component {
handlePageTransition = (key) => {
if (typeof key !== "string") {
- console.error("Cannot handle page transition. Invalid key, only valid passing string", key)
+ console.error(
+ "Cannot handle page transition. Invalid key, only valid passing string",
+ key,
+ )
return
}
@@ -129,7 +134,7 @@ export default class Account extends React.Component {
}
this.setState({
- tabActiveKey: key
+ tabActiveKey: key,
})
}
@@ -137,119 +142,119 @@ export default class Account extends React.Component {
const user = this.state.user
if (this.state.isNotExistent) {
- return
-
+ {isVisible && (
+
+
- }}
-
- }
-}
\ No newline at end of file
+
- {
- this.state.renders.top.map((render, index) => {
- return React.createElement(render.component, {
- ...render.props,
- key: index,
- })
- })
- }
-
+ return (
+
+
-
+ {this.state.renders.top.map((render, index) => {
+ return React.createElement(
+ render.component,
+ {
+ ...render.props,
+ key: index,
+ },
+ )
+ })}
+
-
- {
- this.state.renders.bottom.map((render, index) => {
- return React.createElement(render.component, {
- ...render.props,
- key: index,
- })
- })
- }
-
-
+ {this.state.renders.bottom.map(
+ (render, index) => {
+ return React.createElement(
+ render.component,
+ {
+ ...render.props,
+ key: index,
+ },
+ )
+ },
+ )}
+
+
- {
- user.cover &&
this.toggleCoverExpanded()}
- id="profile-cover"
- />
- }
-
-
-
-
+ {user.cover && (
+
this.toggleCoverExpanded()}
+ id="profile-cover"
/>
+ )}
-
+ )
}
-}
\ 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
index c5b8449c..e784df86 100644
--- a/packages/app/src/pages/lyrics/components/text/index.jsx
+++ b/packages/app/src/pages/lyrics/components/text/index.jsx
@@ -1,153 +1,162 @@
import React from "react"
import classnames from "classnames"
-import { Motion, spring } from "react-motion"
+import { motion, AnimatePresence } from "motion/react"
import { usePlayerStateContext } from "@contexts/WithPlayerContext"
const LyricsText = React.forwardRef((props, textRef) => {
- const [playerState] = usePlayerStateContext()
+ const [playerState] = usePlayerStateContext()
- const { lyrics } = props
+ const { lyrics } = props
- const [syncInterval, setSyncInterval] = React.useState(null)
- const [currentLineIndex, setCurrentLineIndex] = React.useState(0)
- const [visible, setVisible] = React.useState(false)
+ const [syncInterval, setSyncInterval] = React.useState(null)
+ const [currentLineIndex, setCurrentLineIndex] = React.useState(0)
+ const [visible, setVisible] = React.useState(false)
- function syncPlayback() {
- const currentTrackTime = app.cores.player.controls.seek() * 1000
+ function syncPlayback() {
+ const currentTrackTime = app.cores.player.controls.seek() * 1000
- const lineIndex = lyrics.synced_lyrics.findIndex((line) => {
- return currentTrackTime >= line.startTimeMs && currentTrackTime <= line.endTimeMs
- })
+ const lineIndex = lyrics.synced_lyrics.findIndex((line) => {
+ return (
+ currentTrackTime >= line.startTimeMs &&
+ currentTrackTime <= line.endTimeMs
+ )
+ })
- if (lineIndex === -1) {
- if (!visible) {
- setVisible(false)
- }
+ if (lineIndex === -1) {
+ if (!visible) {
+ setVisible(false)
+ }
- return false
- }
+ return false
+ }
- const line = lyrics.synced_lyrics[lineIndex]
+ const line = lyrics.synced_lyrics[lineIndex]
- setCurrentLineIndex(lineIndex)
+ setCurrentLineIndex(lineIndex)
- if (line.break) {
- return setVisible(false)
- }
+ if (line.break) {
+ return setVisible(false)
+ }
- if (line.text) {
- return setVisible(true)
- }
- }
+ if (line.text) {
+ return setVisible(true)
+ }
+ }
- function startSyncInterval() {
- if (!lyrics || !lyrics.synced_lyrics) {
- stopSyncInterval()
- return false
- }
+ function startSyncInterval() {
+ if (!lyrics || !lyrics.synced_lyrics) {
+ stopSyncInterval()
+ return false
+ }
- if (playerState.playback_status !== "playing") {
- stopSyncInterval()
- return false
- }
+ if (playerState.playback_status !== "playing") {
+ stopSyncInterval()
+ return false
+ }
- if (syncInterval) {
- stopSyncInterval()
- }
+ if (syncInterval) {
+ stopSyncInterval()
+ }
- setSyncInterval(setInterval(syncPlayback, 100))
- }
+ setSyncInterval(setInterval(syncPlayback, 100))
+ }
- function stopSyncInterval() {
- clearInterval(syncInterval)
- setSyncInterval(null)
- }
+ function stopSyncInterval() {
+ clearInterval(syncInterval)
+ setSyncInterval(null)
+ }
- //* Handle when current line index change
- React.useEffect(() => {
- if (currentLineIndex === 0) {
- setVisible(false)
- } else {
- setVisible(true)
+ //* Handle when current line index change
+ React.useEffect(() => {
+ if (currentLineIndex === 0) {
+ setVisible(false)
+ } else {
+ setVisible(true)
- // find line element by id
- const lineElement = textRef.current.querySelector(`#lyrics-line-${currentLineIndex}`)
+ // 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",
- })
- } else {
- // scroll to top
- textRef.current.scrollTop = 0
- }
- }
- }, [currentLineIndex])
+ // center scroll to current line
+ if (lineElement) {
+ lineElement.scrollIntoView({
+ behavior: "smooth",
+ block: "center",
+ })
+ } else {
+ // scroll to top
+ textRef.current.scrollTop = 0
+ }
+ }
+ }, [currentLineIndex])
- //* Handle when playback status change
- React.useEffect(() => {
- startSyncInterval()
- }, [playerState.playback_status])
+ //* Handle when playback status change
+ React.useEffect(() => {
+ startSyncInterval()
+ }, [playerState.playback_status])
- //* Handle when manifest object change, reset...
- React.useEffect(() => {
- setVisible(false)
- setCurrentLineIndex(0)
- }, [playerState.track_manifest])
+ //* Handle when manifest object change, reset...
+ React.useEffect(() => {
+ setVisible(false)
+ setCurrentLineIndex(0)
+ }, [playerState.track_manifest])
- React.useEffect(() => {
- startSyncInterval()
- }, [lyrics])
+ React.useEffect(() => {
+ startSyncInterval()
+ }, [lyrics])
- React.useEffect(() => {
- return () => {
- clearInterval(syncInterval)
- }
- }, [])
+ React.useEffect(() => {
+ return () => {
+ clearInterval(syncInterval)
+ }
+ }, [])
- if (!lyrics?.synced_lyrics) {
- return null
- }
+ if (!lyrics?.synced_lyrics) {
+ return null
+ }
- return
-
-
+
-
-
+
+
+
+
+
+
+
+ {React.createElement(
+ TabsComponent[this.state.tabActiveKey],
+ {
+ onTopVisibility:
+ this.onPostListTopVisibility,
+ state: this.state,
+ },
+ )}
+
+
+
+
+
+ this.handlePageTransition(e.key)}
+ items={GenerateMenuItems([
+ {
+ id: "posts",
+ label: "Posts",
+ icon: "FiBookOpen",
+ },
+ {
+ id: "music",
+ label: "Music",
+ icon: "MdAlbum",
+ },
+ {
+ id: "followers",
+ label: "Followers",
+ icon: "FiUsers",
+ },
+ {
+ id: "details",
+ label: "Details",
+ icon: "FiInfo",
+ },
+ ])}
+ />
-
-
- {
- React.createElement(TabsComponent[this.state.tabActiveKey], {
- onTopVisibility: this.onPostListTopVisibility,
- state: this.state
- })
- }
-
-
-
-
-
- this.handlePageTransition(e.key)}
- items={GenerateMenuItems([
- {
- id: "posts",
- label: "Posts",
- icon: "FiBookOpen",
- },
- {
- id: "music",
- label: "Music",
- icon: "MdAlbum",
- },
- {
- id: "followers",
- label: "Followers",
- icon: "FiUsers",
- },
- {
- id: "details",
- label: "Details",
- icon: "FiInfo",
- }
- ])}
- />
-
-
- {({ opacity }) => {
- return
-
+ return (
+
- {
- lyrics.synced_lyrics.map((line, index) => {
- return
- }}
- - {line.text} -
- }) - } -
+
+ {visible && (
+
+ {lyrics.synced_lyrics.map((line, index) => {
+ return (
+
+ )}
+
+
+ )
})
-export default LyricsText
\ No newline at end of file
+export default LyricsText
diff --git a/packages/app/src/settings/about/index.jsx b/packages/app/src/settings/about/index.jsx
index 680b21c3..2d4ee8de 100755
--- a/packages/app/src/settings/about/index.jsx
+++ b/packages/app/src/settings/about/index.jsx
@@ -10,281 +10,299 @@ import config from "@config"
import "./index.less"
const connectionsTooltipStrings = {
- secure: "This connection is secure",
- insecure: "This connection is insecure, cause it's not using HTTPS protocol and the server cannot be verified on the trusted certificate authority.",
- warning: "This connection is secure but the server cannot be verified on the trusted certificate authority.",
+ secure: "This connection is secure",
+ insecure:
+ "This connection is insecure, cause it's not using HTTPS protocol and the server cannot be verified on the trusted certificate authority.",
+ warning:
+ "This connection is secure but the server cannot be verified on the trusted certificate authority.",
}
export default {
- id: "about",
- icon: "FiInfo",
- label: "About",
- group: "bottom",
- render: () => {
- const isProduction = import.meta.env.PROD
+ id: "about",
+ icon: "FiInfo",
+ label: "About",
+ group: "bottom",
+ render: () => {
+ const isProduction = import.meta.env.PROD
- const [serverManifest, setServerManifest] = React.useState(null)
- const [serverOrigin, setServerOrigin] = React.useState(null)
- const [secureConnection, setSecureConnection] = React.useState(false)
- const [capInfo, setCapInfo] = React.useState(null)
+ const [serverManifest, setServerManifest] = React.useState(null)
+ const [serverOrigin, setServerOrigin] = React.useState(null)
+ const [secureConnection, setSecureConnection] = React.useState(false)
+ const [capInfo, setCapInfo] = React.useState(null)
- const setCapacitorInfo = async () => {
- if (Capacitor.Plugins.App) {
- const info = await Capacitor.Plugins.App.getInfo()
+ const setCapacitorInfo = async () => {
+ if (Capacitor) {
+ if (Capacitor.Plugins.App) {
+ const info = await Capacitor.Plugins.App.getInfo()
- setCapInfo(info)
- }
- }
+ setCapInfo(info)
+ }
+ }
+ }
- const checkServerVersion = async () => {
- const serverManifest = await app.cores.api.customRequest()
+ const checkServerVersion = async () => {
+ const serverManifest = await app.cores.api.customRequest()
- setServerManifest(serverManifest.data)
- }
+ setServerManifest(serverManifest.data)
+ }
- const checkServerOrigin = async () => {
- const instance = app.cores.api.client()
+ const checkServerOrigin = async () => {
+ const instance = app.cores.api.client()
- if (instance) {
- setServerOrigin(instance.mainOrigin)
+ if (instance) {
+ setServerOrigin(instance.mainOrigin)
- if (instance.mainOrigin.startsWith("https")) {
- setSecureConnection(true)
- }
- }
- }
+ if (instance.mainOrigin.startsWith("https")) {
+ setSecureConnection(true)
+ }
+ }
+ }
- React.useEffect(() => {
- checkServerVersion()
- checkServerOrigin()
+ React.useEffect(() => {
+ checkServerVersion()
+ checkServerOrigin()
- setCapacitorInfo()
- }, [])
+ setCapacitorInfo()
+ }, [])
- return + {line.text} +
+ ) + })} +
-
+ )
+ },
+}
diff --git a/packages/app/vite.config.js b/packages/app/vite.config.js
index 117f9319..1310e204 100755
--- a/packages/app/vite.config.js
+++ b/packages/app/vite.config.js
@@ -11,70 +11,46 @@ const oneYearInSeconds = 60 * 60 * 24 * 365
const sslDirPath = path.join(__dirname, ".ssl")
const config = {
- plugins: [
- react(),
- ],
- resolve: {
- alias: aliases,
- },
- server: {
- host: "0.0.0.0",
- port: 8000,
- fs: {
- allow: ["..", "../../"],
- },
- headers: {
- "Strict-Transport-Security": `max-age=${oneYearInSeconds}`
- },
- proxy: {
- "/api": {
- target: backendUri,
- rewrite: (path) => path.replace(/^\/api/, ""),
- hostRewrite: true,
- changeOrigin: true,
- xfwd: true,
- ws: true,
- toProxy: true,
- secure: false,
- }
- }
- },
- css: {
- preprocessorOptions: {
- less: {
- javascriptEnabled: true,
- }
- }
- },
- optimizeDeps: {
- esbuildOptions: {
- target: "esnext"
- }
- },
- build: {
- target: "esnext",
- rollupOptions: {
- output: {
- manualChunks(id) {
- if (id.includes("node_modules")) {
- return id.toString().split("node_modules/")[1].split("/")[0].toString()
- }
- }
- }
- }
- },
- esbuild: {
- supported: {
- "top-level-await": true
- },
- }
+ plugins: [react()],
+ resolve: {
+ alias: aliases,
+ },
+ server: {
+ host: "0.0.0.0",
+ port: 8000,
+ fs: {
+ allow: ["..", "../../"],
+ },
+ headers: {
+ "Strict-Transport-Security": `max-age=${oneYearInSeconds}`,
+ },
+ proxy: {
+ "/api": {
+ target: backendUri,
+ rewrite: (path) => path.replace(/^\/api/, ""),
+ hostRewrite: true,
+ changeOrigin: true,
+ xfwd: true,
+ ws: true,
+ toProxy: true,
+ secure: false,
+ },
+ },
+ },
+ css: {
+ preprocessorOptions: {
+ less: {
+ javascriptEnabled: true,
+ },
+ },
+ },
}
if (fs.existsSync(sslDirPath)) {
- config.server.https = {
- key: path.join(__dirname, ".ssl", "privkey.pem"),
- cert: path.join(__dirname, ".ssl", "cert.pem"),
- }
+ config.server.https = {
+ key: path.join(__dirname, ".ssl", "privkey.pem"),
+ cert: path.join(__dirname, ".ssl", "cert.pem"),
+ }
}
-export default defineConfig(config)
\ No newline at end of file
+export default defineConfig(config)
-
+ return (
+
-
-
- 
-
-
-
-
- Beta
-
- {config.author}
- Licensed with {config.package?.license ?? "unlicensed"}
- {config.app.siteName}
-
-
- {isProduction ?
-
-
+
+
+
-
+
+
+
+
+
+
+
+ Beta
+
+ {config.author}
+
+ Licensed with{" "}
+ {config.package?.license ?? "unlicensed"}{" "}
+
+ {config.app.siteName}
+
+
+
+
+ {isProduction ? (
+
+
+
-
-
-
-
+
-
+
+
+
+
+
-
+
+
-
-
-
+
+
+
+
+
+
-
+
+
-
-
-
+
+
-
- {serverOrigin ?? "Unknown"}
-
-
+ {serverOrigin ?? "Unknown"}
+
+
-
-
-
-
+
-
+
+
+
+
+
-
+
+
-
+
-
+
+
-
+
-
-
+
-
-
-
+
+
-
+
+
+
- Version
-Version
+
- {serverManifest?.version ?? "Unknown"}
-
-
+ {serverManifest?.version ?? "Unknown"}
+
+
-
+ Thanks to our sponsors
-
+
- Thanks to our sponsors
+
-
+
-
- }
-}
\ No newline at end of file
+
-
-
-
+
+
+
+
-
+
+
+
- Platform
-Platform
+
- {Capacitor.platform}
-
- Web App
+
-
-
-
+
-
+
+
-
+
+
+
- React
-React
+
- {React.version ?? "Unknown"}
-
-
+ {React.version ?? "Unknown"}
+
+
-
-
-
+
-
+
+
-
+
+
+
- Engine
-Engine
+
- {app.__version ?? "Unknown"}
-
-
+ {app.__version ?? "Unknown"}
+
+
-
- {
- capInfo &&
-
+
-
+
+
-
+
+
+
- Comty.js
-Comty.js
+
- {__comty_shared_state.version ?? "Unknown"}
-
-
+ {__comty_shared_state.version ?? "Unknown"}
+
+
-
+ )}
- {
- capInfo &&
-
- }
+
-
+ {capInfo && (
+
+
-
+
+
+
- App ID
-App ID
+
- {capInfo.id}
-
- {capInfo.id}
+
-
+ )}
- {
- capInfo &&
-
- }
+
-
+ {capInfo && (
+
+
-
+
+
+
- App Build
-App Build
+
- {capInfo.build}
-
- {capInfo.build}
+
-
+ )}
-
-
- }
+
-
+ {capInfo && (
+
+
-
+
+
+
- App Version
-App Version
+
- {capInfo.version}
-
- {capInfo.version}
+
-
-
-
-
-
+
+
-
+
+
+
- View Open Source Licenses
-View Open Source Licenses
+
-
-
+
+