mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
support for spectrum 6
This commit is contained in:
parent
6e38d41293
commit
eeb84add9e
@ -15,334 +15,346 @@ import { FiLink } from "react-icons/fi"
|
||||
import "./index.less"
|
||||
|
||||
const ProfileData = (props) => {
|
||||
if (!props.profile_id) {
|
||||
return null
|
||||
}
|
||||
if (!props.profile_id) {
|
||||
return null
|
||||
}
|
||||
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const [fetching, setFetching] = React.useState(true)
|
||||
const [error, setError] = React.useState(null)
|
||||
const [profile, setProfile] = React.useState(null)
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const [fetching, setFetching] = React.useState(true)
|
||||
const [error, setError] = React.useState(null)
|
||||
const [profile, setProfile] = React.useState(null)
|
||||
|
||||
async function fetchData(profile_id) {
|
||||
setFetching(true)
|
||||
async function fetchData(profile_id) {
|
||||
setFetching(true)
|
||||
|
||||
const result = await Streaming.getProfile({ profile_id }).catch((error) => {
|
||||
console.error(error)
|
||||
setError(error)
|
||||
return null
|
||||
})
|
||||
const result = await Streaming.getProfile({ profile_id }).catch(
|
||||
(error) => {
|
||||
console.error(error)
|
||||
setError(error)
|
||||
return null
|
||||
},
|
||||
)
|
||||
|
||||
if (result) {
|
||||
setProfile(result)
|
||||
}
|
||||
if (result) {
|
||||
setProfile(result)
|
||||
}
|
||||
|
||||
setFetching(false)
|
||||
}
|
||||
setFetching(false)
|
||||
}
|
||||
|
||||
async function handleChange(key, value) {
|
||||
setLoading(true)
|
||||
async function handleChange(key, value) {
|
||||
setLoading(true)
|
||||
|
||||
const result = await Streaming.createOrUpdateStream({
|
||||
[key]: value,
|
||||
_id: profile._id,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
antd.message.error("Failed to update")
|
||||
return false
|
||||
})
|
||||
const result = await Streaming.createOrUpdateStream({
|
||||
[key]: value,
|
||||
_id: profile._id,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
antd.message.error("Failed to update")
|
||||
return false
|
||||
})
|
||||
|
||||
if (result) {
|
||||
antd.message.success("Updated")
|
||||
setProfile(result)
|
||||
}
|
||||
if (result) {
|
||||
antd.message.success("Updated")
|
||||
setProfile(result)
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
setLoading(true)
|
||||
async function handleDelete() {
|
||||
setLoading(true)
|
||||
|
||||
const result = await Streaming.deleteProfile({ profile_id: profile._id }).catch((error) => {
|
||||
console.error(error)
|
||||
antd.message.error("Failed to delete")
|
||||
return false
|
||||
})
|
||||
const result = await Streaming.deleteProfile({
|
||||
profile_id: profile._id,
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
antd.message.error("Failed to delete")
|
||||
return false
|
||||
})
|
||||
|
||||
if (result) {
|
||||
antd.message.success("Deleted")
|
||||
app.eventBus.emit("app:profile_deleted", profile._id)
|
||||
}
|
||||
if (result) {
|
||||
antd.message.success("Deleted")
|
||||
app.eventBus.emit("app:profile_deleted", profile._id)
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
async function handleEditName() {
|
||||
app.layout.modal.open("name_editor", ProfileCreator, {
|
||||
props: {
|
||||
editValue: profile.profile_name,
|
||||
onEdit: async (value) => {
|
||||
await handleChange("profile_name", value)
|
||||
app.eventBus.emit("app:profiles_updated", profile._id)
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
async function handleEditName() {
|
||||
app.layout.modal.open("name_editor", ProfileCreator, {
|
||||
props: {
|
||||
editValue: profile.profile_name,
|
||||
onEdit: async (value) => {
|
||||
await handleChange("profile_name", value)
|
||||
app.eventBus.emit("app:profiles_updated", profile._id)
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchData(props.profile_id)
|
||||
}, [props.profile_id])
|
||||
React.useEffect(() => {
|
||||
fetchData(props.profile_id)
|
||||
}, [props.profile_id])
|
||||
|
||||
if (error) {
|
||||
return <antd.Result
|
||||
status="warning"
|
||||
title="Error"
|
||||
subTitle={error.message}
|
||||
extra={[
|
||||
<antd.Button
|
||||
type="primary"
|
||||
onClick={() => fetchData(props.profile_id)}
|
||||
>
|
||||
Retry
|
||||
</antd.Button>
|
||||
]}
|
||||
/>
|
||||
}
|
||||
if (error) {
|
||||
return (
|
||||
<antd.Result
|
||||
status="warning"
|
||||
title="Error"
|
||||
subTitle={error.message}
|
||||
extra={[
|
||||
<antd.Button
|
||||
type="primary"
|
||||
onClick={() => fetchData(props.profile_id)}
|
||||
>
|
||||
Retry
|
||||
</antd.Button>,
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (fetching) {
|
||||
return <antd.Skeleton
|
||||
active
|
||||
/>
|
||||
}
|
||||
if (fetching) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
return <div className="tvstudio-profile-data">
|
||||
<div
|
||||
className="tvstudio-profile-data-header"
|
||||
>
|
||||
<img
|
||||
className="tvstudio-profile-data-header-image"
|
||||
src={profile.info?.thumbnail}
|
||||
/>
|
||||
<div className="tvstudio-profile-data-header-content">
|
||||
<EditableText
|
||||
value={profile.info?.title ?? "Untitled"}
|
||||
className="tvstudio-profile-data-header-title"
|
||||
style={{
|
||||
"--fontSize": "2rem",
|
||||
"--fontWeight": "800"
|
||||
}}
|
||||
onSave={(newValue) => {
|
||||
return handleChange("title", newValue)
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
<EditableText
|
||||
value={profile.info?.description ?? "No description"}
|
||||
className="tvstudio-profile-data-header-description"
|
||||
style={{
|
||||
"--fontSize": "1rem",
|
||||
}}
|
||||
onSave={(newValue) => {
|
||||
return handleChange("description", newValue)
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="tvstudio-profile-data">
|
||||
<div className="tvstudio-profile-data-header">
|
||||
<img
|
||||
className="tvstudio-profile-data-header-image"
|
||||
src={profile.info?.thumbnail}
|
||||
/>
|
||||
<div className="tvstudio-profile-data-header-content">
|
||||
<EditableText
|
||||
value={profile.info?.title ?? "Untitled"}
|
||||
className="tvstudio-profile-data-header-title"
|
||||
style={{
|
||||
"--fontSize": "2rem",
|
||||
"--fontWeight": "800",
|
||||
}}
|
||||
onSave={(newValue) => {
|
||||
return handleChange("title", newValue)
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
<EditableText
|
||||
value={profile.info?.description ?? "No description"}
|
||||
className="tvstudio-profile-data-header-description"
|
||||
style={{
|
||||
"--fontSize": "1rem",
|
||||
}}
|
||||
onSave={(newValue) => {
|
||||
return handleChange("description", newValue)
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<MdOutlineWifiTethering />
|
||||
<span>Server</span>
|
||||
</div>
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<MdOutlineWifiTethering />
|
||||
<span>Server</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Ingestion URL</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Ingestion URL</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-value">
|
||||
<span>
|
||||
{profile.ingestion_url}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field-value">
|
||||
<span>{profile.ingestion_url}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Stream Key</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Stream Key</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-value">
|
||||
<HiddenText
|
||||
value={profile.stream_key}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field-value">
|
||||
<HiddenText value={profile.stream_key} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<GrConfigure />
|
||||
<span>Configuration</span>
|
||||
</div>
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<GrConfigure />
|
||||
<span>Configuration</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<IoMdEyeOff />
|
||||
<span> Private Mode</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<IoMdEyeOff />
|
||||
<span> Private Mode</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p>When this is enabled, only users with the livestream url can access the stream.</p>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p>
|
||||
When this is enabled, only users with the livestream
|
||||
url can access the stream.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-content">
|
||||
<antd.Switch
|
||||
checked={profile.options.private}
|
||||
loading={loading}
|
||||
onChange={(value) => handleChange("private", value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="key-value-field-content">
|
||||
<antd.Switch
|
||||
checked={profile.options.private}
|
||||
loading={loading}
|
||||
onChange={(value) => handleChange("private", value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p style={{ fontWeight: "bold" }}>Must restart the livestream to apply changes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p style={{ fontWeight: "bold" }}>
|
||||
Must restart the livestream to apply changes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<GrStorage />
|
||||
<span> DVR [beta]</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<GrStorage />
|
||||
<span> DVR [beta]</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p>Save a copy of your stream with its entire duration. You can download this copy after finishing this livestream.</p>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p>
|
||||
Save a copy of your stream with its entire duration.
|
||||
You can download this copy after finishing this
|
||||
livestream.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-content">
|
||||
<antd.Switch
|
||||
disabled
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field-content">
|
||||
<antd.Switch disabled loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
profile.sources && <div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<FiLink />
|
||||
<span>Media URL</span>
|
||||
</div>
|
||||
{profile.sources && (
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<FiLink />
|
||||
<span>Media URL</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>HLS</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>HLS</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p>This protocol is highly compatible with a multitude of devices and services. Recommended for general use.</p>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p>
|
||||
This protocol is highly compatible with a
|
||||
multitude of devices and services. Recommended
|
||||
for general use.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-value">
|
||||
<span>
|
||||
{profile.sources.hls}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>FLV</span>
|
||||
</div>
|
||||
<div className="key-value-field-value">
|
||||
<span>{profile.sources.hls}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>RTSP [tcp]</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p>This protocol operates at better latency and quality than HLS, but is less compatible for most devices.</p>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p>
|
||||
This protocol has the lowest possible latency
|
||||
and the best quality. A compatible player is
|
||||
required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-value">
|
||||
<span>
|
||||
{profile.sources.flv}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>RTSP [tcp]</span>
|
||||
</div>
|
||||
<div className="key-value-field-value">
|
||||
<span>{profile.sources.rtsp}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>RTSPT [vrchat]</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p>This protocol has the lowest possible latency and the best quality. A compatible player is required.</p>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p>
|
||||
This protocol has the lowest possible latency
|
||||
and the best quality available. Only works for
|
||||
VRChat video players.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-value">
|
||||
<span>
|
||||
{profile.sources.rtsp}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>HTML Viewer</span>
|
||||
</div>
|
||||
<div className="key-value-field-value">
|
||||
<span>
|
||||
{profile.sources.rtsp.replace(
|
||||
"rtsp://",
|
||||
"rtspt://",
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>HTML Viewer</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-description">
|
||||
<p>Share a link to easily view your stream on any device with a web browser.</p>
|
||||
</div>
|
||||
<div className="key-value-field-description">
|
||||
<p>
|
||||
Share a link to easily view your stream on any
|
||||
device with a web browser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-value">
|
||||
<span>
|
||||
{profile.sources.html}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div className="key-value-field-value">
|
||||
<span>{profile.sources.html}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<span>Other</span>
|
||||
</div>
|
||||
<div className="tvstudio-profile-data-field">
|
||||
<div className="tvstudio-profile-data-field-header">
|
||||
<span>Other</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Delete profile</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Delete profile</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-content">
|
||||
<antd.Popconfirm
|
||||
title="Delete the profile"
|
||||
description="Once deleted, the profile cannot be recovered."
|
||||
onConfirm={handleDelete}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<antd.Button
|
||||
danger
|
||||
loading={loading}
|
||||
>
|
||||
Delete
|
||||
</antd.Button>
|
||||
</antd.Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field-content">
|
||||
<antd.Popconfirm
|
||||
title="Delete the profile"
|
||||
description="Once deleted, the profile cannot be recovered."
|
||||
onConfirm={handleDelete}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<antd.Button danger loading={loading}>
|
||||
Delete
|
||||
</antd.Button>
|
||||
</antd.Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Change profile name</span>
|
||||
</div>
|
||||
<div className="key-value-field">
|
||||
<div className="key-value-field-key">
|
||||
<span>Change profile name</span>
|
||||
</div>
|
||||
|
||||
<div className="key-value-field-content">
|
||||
<antd.Button
|
||||
loading={loading}
|
||||
onClick={handleEditName}
|
||||
>
|
||||
Change
|
||||
</antd.Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="key-value-field-content">
|
||||
<antd.Button loading={loading} onClick={handleEditName}>
|
||||
Change
|
||||
</antd.Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProfileData
|
||||
@ -50,26 +50,56 @@ const StreamDecoders = {
|
||||
|
||||
return decoderInstance
|
||||
},
|
||||
hls: (player, source) => {
|
||||
hls: (player, source, options = {}) => {
|
||||
if (!player) {
|
||||
console.error("Player is not defined")
|
||||
return false
|
||||
}
|
||||
|
||||
if (!source) {
|
||||
console.error("Stream source is not defined")
|
||||
return false
|
||||
}
|
||||
|
||||
const hlsInstance = new Hls({
|
||||
autoStartLoad: true,
|
||||
maxLiveSyncPlaybackRate: 1.5,
|
||||
strategy: "bandwidth",
|
||||
autoplay: true,
|
||||
xhrSetup: (xhr) => {
|
||||
if (options.authToken) {
|
||||
xhr.setRequestHeader(
|
||||
"Authorization",
|
||||
`Bearer ${options.authToken}`,
|
||||
)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
hlsInstance.attachMedia(player.current)
|
||||
if (options.authToken) {
|
||||
source += `?token=${options.authToken}`
|
||||
}
|
||||
|
||||
console.log("Loading media hls >", source, options)
|
||||
|
||||
hlsInstance.attachMedia(player)
|
||||
|
||||
// when media attached, load source
|
||||
hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
|
||||
hlsInstance.loadSource(source)
|
||||
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
|
||||
console.log(`${data.levels.length} quality levels found`)
|
||||
})
|
||||
})
|
||||
|
||||
// process quality and tracks levels
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
|
||||
console.log(`${data.levels.length} quality levels found`)
|
||||
})
|
||||
|
||||
// resume to the last position when player resume playback
|
||||
player.addEventListener("play", () => {
|
||||
console.log("Syncing to last position")
|
||||
player.currentTime = hlsInstance.liveSyncPosition
|
||||
})
|
||||
|
||||
// handle errors
|
||||
hlsInstance.on(Hls.Events.ERROR, (event, data) => {
|
||||
console.error(event, data)
|
||||
|
||||
@ -129,6 +159,8 @@ export default class StreamViewer extends React.Component {
|
||||
|
||||
const decoderInstance = await StreamDecoders[decoder](...args)
|
||||
|
||||
console.log(decoderInstance)
|
||||
|
||||
await this.setState({
|
||||
decoderInstance: decoderInstance,
|
||||
})
|
||||
@ -176,7 +208,7 @@ export default class StreamViewer extends React.Component {
|
||||
|
||||
attachPlayer = () => {
|
||||
// check if user has interacted with the page
|
||||
const player = new Plyr("#player", {
|
||||
const player = new Plyr(this.videoPlayerRef.current, {
|
||||
clickToPlay: false,
|
||||
autoplay: true,
|
||||
muted: true,
|
||||
@ -219,6 +251,8 @@ export default class StreamViewer extends React.Component {
|
||||
this.enterPlayerAnimation()
|
||||
this.attachPlayer()
|
||||
|
||||
console.log("custom token> ", this.props.query["token"])
|
||||
|
||||
// load stream
|
||||
const stream = await this.loadStream(this.props.params.id)
|
||||
|
||||
@ -234,11 +268,12 @@ export default class StreamViewer extends React.Component {
|
||||
}
|
||||
|
||||
await this.loadDecoder(
|
||||
"flv",
|
||||
"hls",
|
||||
this.videoPlayerRef.current,
|
||||
stream.sources.flv,
|
||||
stream.sources.hls,
|
||||
{
|
||||
onSourceEnd: this.onSourceEnd,
|
||||
authToken: this.props.query["token"],
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user