Skip to content

Commit

Permalink
add oaii
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiyiya
shiyiya committed Jan 10, 2025
1 parent 7aa345d commit 94a40d9
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 181 deletions.
14 changes: 6 additions & 8 deletions packages/index/src/components/comment/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
padding-left: 50px;
position: relative;

&:hover {
.video-comment-edit__input:not(:disabled) {
height: 100px;
}
}
// &:hover {
// .video-comment-edit__input:not(:disabled) {
// height: 100px;
// }
// }

&__avatar {
position: absolute;
Expand All @@ -45,7 +45,7 @@
border-radius: 6px;
color: var(--text1);
width: 100%;
height: 42px;
height: 142px;
transition: 0.2s;
padding: 10px 10px;
outline: none;
Expand All @@ -58,13 +58,11 @@
}

&:not(:empty) {
height: 100px;
border-color: var(--primary-color);
}

&:focus {
border-color: var(--primary-color);
height: 100px;
box-shadow: 0 0 0 0.125em rgb(102 104 171 / 25%);
}

Expand Down
66 changes: 25 additions & 41 deletions packages/index/src/components/comment/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,38 @@ import { FocusEventHandler, useEffect, useState } from 'react'
import toast from 'react-hot-toast'
import classNames from 'classnames'
import { getTimeDistance } from '@web/shared/utils/date'
import { useUserStore } from '@web/shared/UserContext'
import { axios } from '@web/shared/constants'
import { oaii } from '@web/shared/constants'
import { CommentSkeleton } from '../../skeleton/CommentSkeleton'
import './index.scss'
import { Player } from '@web/shared/components/player/OPlayer'

interface CommentProps {
id: string
uid?: string
postId: string
onFocus?: FocusEventHandler<HTMLTextAreaElement>
onBlur?: FocusEventHandler<HTMLTextAreaElement>
comments: any[]
player: { current: Player }
setMetaInfo: any
}

const Comment = ({ id, onFocus, onBlur }: CommentProps) => {
const [comments, setComments] = useState<R.Comment[] | null>(null)
const Comment = ({ comments, onFocus, onBlur, postId, player, setMetaInfo }: CommentProps) => {
const [comment, setComment] = useState<string>('')
const user = useUserStore()

useEffect(() => {
axios
.get(`/post/${id}/comments`)
.then((c) => {
setComments(c?.data || [])
})
.catch(() => {
setComments([])
})
}, [])

const [isLoading, setLoading] = useState<boolean>(false)
const doComment = () => {
if (!comment) {
toast.error('写点什么吧')
return
}

axios.post(`/post/${id}/comment`, { data: { content: comment } }).then((_) => {
if (!_.err) {
setLoading(true)
oaii
.post(`/biu`, {
data: { content: comment, post_id: `${postId}`, video_time: player.current.currentTime }
})
.then((_) => {
setLoading(false)
setMetaInfo((prev) => ({ ...prev, comment: [_].concat(prev.comment) }))
setComment('')
setComments([_.data, ...comments!])
}
})
})
}

const ctrlEnter = (e: any) => {
Expand All @@ -56,23 +48,18 @@ const Comment = ({ id, onFocus, onBlur }: CommentProps) => {
<h4>评论</h4>
</div>
<div className="video-comment-edit">
<img
className="video-comment-edit__avatar"
src={user?.Avatar || '/ic_launcher_round.png'}
alt=""
/>
<img className="video-comment-edit__avatar" src={'/ic_launcher_round.png'} alt="" />
<textarea
className="video-comment-edit__input"
placeholder="留下评论..."
disabled={!user}
value={comment}
onChange={(e) => setComment(e.target.value)}
onKeyDown={ctrlEnter}
onFocus={(e) => onFocus?.(e)}
onBlur={(e) => onBlur?.(e)}
></textarea>
<button
disabled={!user || !!!comment}
disabled={!comment || isLoading}
className="button is-primary video-comment-edit__button"
onClick={doComment}
>
Expand All @@ -83,20 +70,17 @@ const Comment = ({ id, onFocus, onBlur }: CommentProps) => {
{comments ? (
comments.length > 0 ? (
<ul>
{comments.map((item) => (
<li
key={item.ID}
className={classNames('comment-item', { '--o': user?.ID == item.Uid })}
>
{comments.map((item, i) => (
<li key={item.ID} className={classNames('comment-item')}>
<div className="comment-item__head">
<img className="comment-item__avatar" src={item.Creator?.Avatar} alt="" />
<img className="comment-item__avatar" src={'/ic_launcher_round.png'} alt="" />
<div>
<span className="comment-item__name">{item.Creator?.Nickname}</span>
<p className="comment-item__time">{getTimeDistance(item.CreatedAt)}</p>
<span className="comment-item__name"># {i}</span>
<p className="comment-item__time">{getTimeDistance(item.createdAt)}</p>
</div>
</div>
<div className="comment-item__content">
<p>{item.Content}</p>
<p>{item.content}</p>
</div>
</li>
))}
Expand Down
7 changes: 6 additions & 1 deletion packages/index/src/pages/player/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,19 @@ $pr: 340px;
margin-right: 1em;
cursor: pointer;
justify-content: center;
fill: #757575;

&:nth-last-child(1) {
fill: hsl(348, 86%, 61%);
color: hsl(348, 86%, 61%);
}

.icon {
margin-right: 6px;

svg {
width: 22px;
height: 22px;
fill: #757575;
}
}

Expand Down
110 changes: 19 additions & 91 deletions packages/index/src/pages/player/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import { getTimeDistance } from '@web/shared/utils/date'
import ReactPlayer, { PlayerEvent, Player, isMobile } from '@web/shared/components/player/OPlayer'
import { axios, corsAxios } from '@web/shared/constants'
import { corsAxios, oaii } from '@web/shared/constants'
import toast from 'react-hot-toast'
import classNames from 'classnames'
import { Helmet } from 'react-helmet'
Expand All @@ -12,18 +12,14 @@ import { Tags } from '../../components/tag/Tag'
import PlayerInfo from './info'
import { clicliAdapter } from '../../enime.adp'

import { ReactComponent as FaEye } from '../../assets/icon/fa-eye.svg'
import { ReactComponent as FaHeart } from '../../assets/icon/fa-heart.svg'
import { ReactComponent as FaInfo } from '../../assets/icon/fa-info-circle.svg'
import { ReactComponent as FaMessage } from '../../assets/icon/fa-message.svg'
import { ReactComponent as FaStar } from '../../assets/icon/fa-star.svg'

import './index.scss'

export default function PlayerPage({ id }: any) {
const [modal, setModal] = useState(false)
const [isLiked, setIsLiked] = useState(false)
const [isCollected, setIsCollected] = useState(false)
const [lastEpisode, lastDuration, update] = useLastPlayed(id)

const [state, setState] = useState<R.Post | any>({} as R.Post)
Expand All @@ -34,6 +30,8 @@ export default function PlayerPage({ id }: any) {
const [source, _] = useState<any>({ poster: 'https://api.imlazy.ink/img', title: 'LOADING ...' })
const [displayEpBar, setDisplayEpBar] = useState(false)

const [metaInfo, setMetaInfo] = useState({ like: 0, comment: [] })

useEffect(() => {
// axios.get(`/post/${id}`)
import(`../../mock/post/${id}.json`)
Expand All @@ -52,7 +50,6 @@ export default function PlayerPage({ id }: any) {
if (!_.err) {
_.data && setState(_.data)
_.data.IsLiked == 2 && setIsLiked(true)
_.data.IsCollected == 2 && setIsCollected(true)

// axios.get(`/post/${id}/videos`)

Expand Down Expand Up @@ -97,16 +94,6 @@ export default function PlayerPage({ id }: any) {
}, [lastEpisode, video])

useEffect(() => {
if (document.location.search.includes('live')) {
setVideo([
{
Episode: 1,
Title: 'live',
VideoUrl: `https://www.tm0.net/live/uu${id}.m3u8?hls_ctx=85097108`
} as any
])
return
}
if (!isAdp) return
player.current?.context.ui?.menu.unregister('Source')
corsAxios
Expand All @@ -117,6 +104,10 @@ export default function PlayerPage({ id }: any) {
setVideo(it.Episodes)
player.current?.context.playlist.changeSourceList(it.Episodes)
})

Promise.all([oaii.get('/biu?post_id=' + id), oaii.get('/like?post_id=' + id)]).then(([comment, like]) => {
setMetaInfo({ comment, like })
})
}, [isAdp])

useEffect(() => {
Expand All @@ -139,56 +130,11 @@ export default function PlayerPage({ id }: any) {
}, [])

const likeHandler = useCallback(() => {
const c = isLiked ? -1 : 1
const LikesCount = state.LikesCount || 0

setIsLiked((isLiked) => !isLiked)
setState((state) => ({ ...state, LikesCount: LikesCount + c }))
;(isLiked ? axios.delete(`/like/post/${id}`) : axios.post(`/like/post/${id}`))
.then((_) => {
if (_.err) {
setIsLiked((isLiked) => !isLiked)
setState((state) => ({ ...state, LikesCount: state.LikesCount - c }))
} else {
if (isLiked) {
toast.error('你所热爱的，就是你的生活。\r\n --------?')
} else {
toast.success('nice!')
}
}
})
.catch(() => {
setTimeout(() => {
setIsLiked((isLiked) => !isLiked)
setState((state) => ({ ...state, LikesCount: state.LikesCount - c }))
}, 300)
})
}, [state, isLiked])

const collectHandler = useCallback(() => {
const c = isCollected ? -1 : 1

setIsCollected((isCollected) => !isCollected)
setState((state) => ({ ...state, CollectionCount: state.CollectionCount + c }))
;(isCollected ? axios.delete(`/collect/post/${id}`) : axios.post(`/collect/post/${id}`))
.then((_) => {
if (_.err) {
setIsCollected((isCollected) => !isCollected)
setState((state) => ({ ...state, CollectionCount: state.CollectionCount - c }))
} else {
if (isCollected) {
} else {
toast.success('nice!')
}
}
})
.catch(() => {
setTimeout(() => {
setIsCollected((isCollected) => !isCollected)
setState((state) => ({ ...state, CollectionCount: state.CollectionCount - 1 }))
}, 300)
})
}, [state, isCollected])
oaii.post(`/like`, { data: { post_id: id } }).then((_) => {
toast.error('你所热爱的，就是你的生活。\r\n --------?')
setMetaInfo((prev) => ({ comment: prev.comment, like: prev.like + 1 }))
})
}, [])

const onEvent = ({ type, payload }: PlayerEvent) => {
const time = payload?.target?.currentTime
Expand All @@ -211,19 +157,7 @@ export default function PlayerPage({ id }: any) {
}
}

const {
Title,
Creator,
Tags: tags,
IsOriginal,
Hits,
CommentCount,
LikesCount,
CollectionCount,
Content,
Meta,
Cover
} = state
const { Title, Creator, Tags: tags, IsOriginal, Content, Meta, Cover } = state

return (
<div className={classNames('player', { 'no-side': !displayEpBar })}>
Expand Down Expand Up @@ -284,29 +218,23 @@ export default function PlayerPage({ id }: any) {
</div>
</div>
<div className="video-actions">
<div className="icon-text">
{/* <div className="icon-text">
<span className="icon">
<FaEye />
</span>
<span className="text">{Hits || '-'}</span>
</div>
</div> */}
<div className="icon-text">
<span className="icon">
<FaMessage />
</span>
<span className="text">{CommentCount || '-'}</span>
<span className="text">{metaInfo.comment.length || '-'}</span>
</div>
<div className={classNames('icon-text', { '--active': isLiked })} onClick={likeHandler}>
<div className={classNames('icon-text')} onClick={likeHandler}>
<span className="icon">
<FaHeart />
</span>
<span className="text">{LikesCount || '-'}</span>
</div>
<div className={classNames('icon-text', { '--active': isCollected })} onClick={collectHandler}>
<span className="icon">
<FaStar />
</span>
<span className="text">{CollectionCount || '-'}</span>
<span className="text">{metaInfo.like || '-'}</span>
</div>
</div>
{state.ID ? (
Expand Down Expand Up @@ -368,7 +296,7 @@ export default function PlayerPage({ id }: any) {
<VideoMetaSkeleton className="video-info__skeleton" height={'200px'} />
)}

<Comment id={id} />
<Comment postId={id} comments={metaInfo.comment} setMetaInfo={setMetaInfo} player={player as any} />
<PlayerInfo post={state} show={modal} onChange={setModal} />
</div>
)
Expand Down
6 changes: 5 additions & 1 deletion packages/shared/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,4 +76,8 @@ const corsAxios = http.create<R.Response<any>>(
localStorage.getItem('noproxy') ? 'https://www.clicli.cc' : 'https://cli.airmole.net'
)

export { axios, corsAxios }
const oaii = http.create<R.Response<any>>(
localStorage.getItem('noproxy') ? 'https://oaii.vercel.app/api' : 'https://api.jinlilili.top/api'
)

export { axios, corsAxios, oaii }
Loading

0 comments on commit 94a40d9

Please sign in to comment.