mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 05:37:21 +00:00
feat(ui): skin and icon tweaks (#59)
This commit is contained in:
Sam Potts
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M15.25 2h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0V4.56l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H10.75a.75.75 0 0 1-.743-.648L10 2.75a.75.75 0 0 1 .75-.75z"
|
||||
class="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M2.75 10a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L4.56 14.5h2.69a.75.75 0 0 1 .743.648L8 15.25a.75.75 0 0 1-.75.75H2.722l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75"
|
||||
class="arrow-2"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
@@ -1,10 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M9.57,3.617c-.156-.375-.519-.617-.924-.617H4c-.552,0-1,.449-1,1v4.646c0,.406,.242,.769,.618,.924,.124,.051,.255,.076,.383,.076,.261,0,.515-.102,.706-.293l4.647-4.647c.286-.287,.371-.715,.216-1.089Z"
|
||||
className="arrow-1"
|
||||
class="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M14.382,8.429c-.377-.156-.804-.068-1.089,.217l-4.647,4.647c-.286,.287-.371,.715-.216,1.089,.156,.375,.519,.617,.924,.617h4.646c.552,0,1-.449,1-1v-4.646c0-.406-.242-.769-.618-.924Z"
|
||||
className="arrow-2"
|
||||
class="arrow-2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 579 B After Width: | Height: | Size: 571 B |
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M10.75 2a.75.75 0 0 1 .75.75v2.688l3.22-3.218a.75.75 0 0 1 1.06 1.06L12.56 6.5h2.69a.75.75 0 0 1 .743.648L16 7.25a.75.75 0 0 1-.75.75h-4.528l-.046-.004.074.004a.75.75 0 0 1-.599-.298l.069.078a.75.75 0 0 1-.22-.53v-4.5a.75.75 0 0 1 .75-.75"
|
||||
class="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M7.25 10h.017q.03 0 .06.004za.75.75 0 0 1 .599.298l-.069-.078a.75.75 0 0 1 .22.53v4.5a.75.75 0 1 1-1.5 0v-2.69l-3.22 3.22a.75.75 0 0 1-1.06-1.06l3.218-3.22H2.75a.75.75 0 0 1-.743-.648L2 10.75a.75.75 0 0 1 .75-.75z"
|
||||
class="arrow-2"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 646 B |
@@ -1,10 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M7.883,1.93c-.375-.157-.803-.07-1.09,.217L2.146,6.793c-.287,.287-.372,.715-.217,1.09s.518,.617,.924,.617H7.5c.551,0,1-.449,1-1V2.854c0-.406-.242-.769-.617-.924Z"
|
||||
className="arrow-1"
|
||||
class="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M15.146,9.5h-4.646c-.551,0-1,.449-1,1v4.646c0,.406,.242,.769,.617,.924,.125,.052,.255,.077,.384,.077,.26,0,.514-.102,.706-.293l4.646-4.646c.287-.287,.372-.715,.217-1.09s-.518-.617-.924-.617Z"
|
||||
className="arrow-2"
|
||||
class="arrow-2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 553 B After Width: | Height: | Size: 545 B |
@@ -1,8 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M10.75,0.5 C11.1642136,0.5 11.5,0.835786438 11.5,1.25 L11.5,5 C11.5,5.41421356 11.1642136,5.75 10.75,5.75 C10.3357864,5.75 10,5.41421356 10,5 L10,3.06 L7.79833009,5.26233009 C7.50543687,5.5552233 7.03056313,5.5552233 6.73766991,5.26233009 C6.4447767,4.96943687 6.4447767,4.49456313 6.73766991,4.20166991 L8.938,2 L7,2 C6.62030423,2 6.30650904,1.71784612 6.25684662,1.35177056 L6.25,1.25 C6.25,0.835786438 6.58578644,0.5 7,0.5 L10.75,0.5 Z"
|
||||
/>
|
||||
<path
|
||||
d="M1.25,6.25 C1.66421356,6.25 2,6.58578644 2,7 L2,8.938 L4.20166991,6.73766991 C4.49456313,6.4447767 4.96943687,6.4447767 5.26233009,6.73766991 C5.5552233,7.03056313 5.5552233,7.50543687 5.26233009,7.79833009 L3.06,10 L5,10 C5.37969577,10 5.69349096,10.2821539 5.74315338,10.6482294 L5.75,10.75 C5.75,11.1642136 5.41421356,11.5 5,11.5 L1.25,11.5 C0.835786438,11.5 0.5,11.1642136 0.5,10.75 L0.5,7 C0.5,6.58578644 0.835786438,6.25 1.25,6.25 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,8 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M7.268,0.232 C7.68221356,0.232 8.018,0.567786438 8.018,0.982 L8.017,2.921 L10.2196699,0.719669914 C10.5125631,0.426776695 10.9874369,0.426776695 11.2803301,0.719669914 C11.5732233,1.01256313 11.5732233,1.48743687 11.2803301,1.78033009 L9.078,3.982 L11.018,3.982 C11.3976958,3.982 11.711491,4.26415388 11.7611534,4.63022944 L11.768,4.732 C11.768,5.14621356 11.4322136,5.482 11.018,5.482 L7.268,5.482 C6.85378644,5.482 6.518,5.14621356 6.518,4.732 L6.518,0.982 C6.518,0.567786438 6.85378644,0.232 7.268,0.232 Z"
|
||||
/>
|
||||
<path
|
||||
d="M4.732,6.518 C5.14621356,6.518 5.482,6.85378644 5.482,7.268 L5.482,11.018 C5.482,11.4322136 5.14621356,11.768 4.732,11.768 C4.31778644,11.768 3.982,11.4322136 3.982,11.018 L3.982,9.078 L1.78033009,11.2803301 C1.48743687,11.5732233 1.01256313,11.5732233 0.719669914,11.2803301 C0.426776695,10.9874369 0.426776695,10.5125631 0.719669914,10.2196699 L2.921,8.017 L0.982,8.018 C0.602304234,8.018 0.288509039,7.73584612 0.238846616,7.36977056 L0.232,7.268 C0.232,6.85378644 0.567786438,6.518 0.982,6.518 L4.732,6.518 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M1.5,1.5 C1.5,0.94771525 1.94771525,0.5 2.5,0.5 L4,0.5 C4.55228475,0.5 5,0.94771525 5,1.5 L5,10.5 C5,11.0522847 4.55228475,11.5 4,11.5 L2.5,11.5 C1.94771525,11.5 1.5,11.0522847 1.5,10.5 L1.5,1.5 Z M7,1.5 C7,0.94771525 7.44771525,0.5 8,0.5 L9.5,0.5 C10.0522847,0.5 10.5,0.94771525 10.5,1.5 L10.5,10.5 C10.5,11.0522847 10.0522847,11.5 9.5,11.5 L8,11.5 C7.44771525,11.5 7,11.0522847 7,10.5 L7,1.5 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 528 B |
@@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M3.104,0.41 L10.334,4.912 C10.7399092,5.16540087 10.9848867,5.61160658 10.9808559,6.09010175 C10.9767247,6.56859692 10.7241722,7.01055931 10.314,7.257 L3.085,11.6 C2.660044,11.8552526 2.13058927,11.8619999 1.69926652,11.6176596 C1.26794378,11.3733193 1.00153536,10.915723 1.00199939,10.42 L1.00199939,1.576 C1.00239522,1.07671678 1.2734089,0.616881916 1.71001777,0.374690696 C2.14662664,0.132499476 2.68021247,0.146015104 3.104,0.41 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 567 B |
@@ -1,8 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M10.2857142,2.2 C9.99999989,1.93333333 9.5714284,1.93333333 9.28571413,2.2 C8.99999983,2.46666667 8.99999983,2.86666667 9.28571413,3.13333333 C10.142857,3.93333333 10.5714284,4.93333333 10.5714284,6 C10.5714284,7.06666667 10.142857,8.06666667 9.28571413,8.86666667 C8.99999983,9.13333333 8.99999983,9.53333333 9.28571413,9.8 C9.42857128,9.93333333 9.64285701,10 9.78571416,10 C9.99999989,10 10.142857,9.93333333 10.2857142,9.8 C11.3571428,8.8 12,7.46666667 12,6 C12,4.53333333 11.3571428,3.2 10.2857142,2.2 L10.2857142,2.2 Z"
|
||||
/>
|
||||
<path
|
||||
d="M7.20141037 3.52131633C6.93286321 3.77196031 6.93286321 4.14792629 7.20141037 4.39857028 7.72653847 4.88868985 7.91235391 5.37070299 7.91235391 6 7.91235391 6.62392308 7.60834146 7.27813427 7.20141037 7.6579366 6.93286321 7.9085806 6.93286321 8.2845466 7.20141037 8.5351906 7.3051173 8.63198367 7.65548032 8.70996853 7.92843927 8.63950433 8.00889141 8.61873567 8.08261928 8.58507087 8.14132542 8.5351906 8.9809794 7.82176933 9.23651163 6.77319427 9.23660898 6 9.23660898 5.886637 9.23473663 5.77343765 9.22833227 5.6598286 9.19105591 4.99856631 9.00072661 4.32342409 8.14132535 3.52131633 7.87277819 3.27067233 7.46995753 3.27067233 7.20141037 3.52131633ZM2.5 4 .5 4C.214285715 4 3.55271368e-15 4.17770752 3.55271368e-15 4.5L3.55271368e-15 7.5C3.55271368e-15 7.82229242.166666664 8 .452380949 8L2.5 8 5.23809524 10.9157087C5.57142857 11.1305704 6 10.9157087 6 10.4859854L6 1.53725661C6 1.10753333 5.57142857.838956275 5.23809524 1.10753333L2.5 4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M7.20141037 3.52131633C6.93286321 3.77196031 6.93286321 4.14792629 7.20141037 4.39857028 7.72653847 4.88868985 7.91235391 5.37070299 7.91235391 6 7.91235391 6.62392308 7.60834146 7.27813427 7.20141037 7.6579366 6.93286321 7.9085806 6.93286321 8.2845466 7.20141037 8.5351906 7.3051173 8.63198367 7.65548032 8.70996853 7.92843927 8.63950433 8.00889141 8.61873567 8.08261928 8.58507087 8.14132542 8.5351906 8.9809794 7.82176933 9.23651163 6.77319427 9.23660898 6 9.23660898 5.886637 9.23473663 5.77343765 9.22833227 5.6598286 9.19105591 4.99856631 9.00072661 4.32342409 8.14132535 3.52131633 7.87277819 3.27067233 7.46995753 3.27067233 7.20141037 3.52131633ZM2.5 4 .5 4C.214285715 4 3.55271368e-15 4.17770752 3.55271368e-15 4.5L3.55271368e-15 7.5C3.55271368e-15 7.82229242.166666664 8 .452380949 8L2.5 8 5.23809524 10.9157087C5.57142857 11.1305704 6 10.9157087 6 10.4859854L6 1.53725661C6 1.10753333 5.57142857.838956275 5.23809524 1.10753333L2.5 4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M8.228179 3.73584846 9.5 5.00782311 10.771821 3.73584846C11.0527839 3.45488553 11.5083149 3.45488553 11.7892778 3.73584846 12.0702407 4.0168114 12.0702407 4.47234233 11.7892778 4.75330526L10.5173032 6.02512626 11.7892778 7.29694726C12.0702407 7.5779102 12.0702407 8.03344112 11.7892778 8.31440406 11.5083149 8.59536699 11.0527839 8.59536699 10.771821 8.31440406L9.5 7.04242941 8.228179 8.31440406C7.94721606 8.59536699 7.49168514 8.59536699 7.2107222 8.31440406 6.92975927 8.03344112 6.92975927 7.5779102 7.2107222 7.29694726L8.4819774 6.02512626 7.2107222 4.75330526C6.92975927 4.47234233 6.92975927 4.0168114 7.2107222 3.73584846 7.49168514 3.45488553 7.94721606 3.45488553 8.228179 3.73584846ZM2.5 4 .5 4C.214285715 4 3.55271368e-15 4.17770752 3.55271368e-15 4.5L3.55271368e-15 7.5C3.55271368e-15 7.82229242.166666664 8 .452380949 8L2.5 8 5.23809524 10.9157087C5.57142857 11.1305704 6 10.9157087 6 10.4859854L6 1.53725661C6 1.10753333 5.57142857.838956275 5.23809524 1.10753333L2.5 4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,13 +1,8 @@
|
||||
import fullscreenEnterAlt from '../assets/fullscreen-enter-alt.svg';
|
||||
// Import SVG files as strings
|
||||
import fullscreenEnter from '../assets/fullscreen-enter.svg';
|
||||
import fullscreenExitAlt from '../assets/fullscreen-exit-alt.svg';
|
||||
import fullscreenExit from '../assets/fullscreen-exit.svg';
|
||||
import microFullscreenEnter from '../assets/micro-fullscreen-enter.svg';
|
||||
import microFullscreenExit from '../assets/micro-fullscreen-exit.svg';
|
||||
import microPause from '../assets/micro-pause.svg';
|
||||
import microPlay from '../assets/micro-play.svg';
|
||||
import microVolumeHigh from '../assets/micro-volume-high.svg';
|
||||
import microVolumeLow from '../assets/micro-volume-low.svg';
|
||||
import microVolumeOff from '../assets/micro-volume-off.svg';
|
||||
import pause from '../assets/pause.svg';
|
||||
import play from '../assets/play.svg';
|
||||
import volumeHigh from '../assets/volume-high.svg';
|
||||
@@ -22,13 +17,8 @@ export const SVG_ICONS: Record<string, string> = {
|
||||
volumeOff,
|
||||
fullscreenEnter,
|
||||
fullscreenExit,
|
||||
microPlay,
|
||||
microPause,
|
||||
microVolumeHigh,
|
||||
microVolumeLow,
|
||||
microVolumeOff,
|
||||
microFullscreenEnter,
|
||||
microFullscreenExit,
|
||||
fullscreenEnterAlt,
|
||||
fullscreenExitAlt,
|
||||
};
|
||||
|
||||
// TODO: Check if we need below? It seems to be unused now.
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import type { PropsWithChildren } from 'react';
|
||||
|
||||
import {
|
||||
MicroFullscreenEnterIcon,
|
||||
MicroFullscreenExitIcon,
|
||||
MicroPauseIcon,
|
||||
MicroPlayIcon,
|
||||
MicroVolumeHighIcon,
|
||||
MicroVolumeLowIcon,
|
||||
MicroVolumeOffIcon,
|
||||
FullscreenEnterAltIcon,
|
||||
FullscreenExitAltIcon,
|
||||
PauseIcon,
|
||||
PlayIcon,
|
||||
VolumeHighIcon,
|
||||
VolumeLowIcon,
|
||||
VolumeOffIcon,
|
||||
} from '@vjs-10/react-icons';
|
||||
|
||||
import Popover from '@/components/Popover';
|
||||
@@ -38,8 +38,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
<Tooltip.Root delay={500} closeDelay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
|
||||
<MicroPlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
|
||||
<MicroPauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
|
||||
<PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
|
||||
<PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
|
||||
</PlayButton>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
@@ -77,9 +77,9 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
<Popover.Root openOnHover delay={200} closeDelay={300}>
|
||||
<Popover.Trigger>
|
||||
<MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>
|
||||
<MicroVolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
|
||||
<MicroVolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
|
||||
<MicroVolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
|
||||
<VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
|
||||
<VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
|
||||
<VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
|
||||
</MuteButton>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
@@ -99,8 +99,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
<Tooltip.Root delay={500} closeDelay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
|
||||
<MicroFullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
|
||||
<MicroFullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
|
||||
<FullscreenEnterAltIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
|
||||
<FullscreenExitAltIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
|
||||
</FullscreenButton>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
|
||||
@@ -34,7 +34,7 @@ const styles: MediaToastedSkinStyles = {
|
||||
),
|
||||
Controls: cn(
|
||||
'controls', // FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.
|
||||
'@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-4 pb-4 pt-10 text-white',
|
||||
'@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-3 pb-3 pt-10 text-white',
|
||||
// Animation
|
||||
'transition ease-in-out',
|
||||
// FIXME: Temporary hide/show logic
|
||||
@@ -58,8 +58,6 @@ const styles: MediaToastedSkinStyles = {
|
||||
'aria-busy:pointer-events-none aria-busy:cursor-not-allowed',
|
||||
// Expanded state
|
||||
'aria-expanded:text-white/80',
|
||||
// Pressed state
|
||||
'active:scale-95',
|
||||
),
|
||||
ButtonGroup: cn('flex items-center gap-1.5'),
|
||||
IconButton: cn(
|
||||
@@ -97,12 +95,19 @@ const styles: MediaToastedSkinStyles = {
|
||||
FullscreenButton: cn(
|
||||
'[&_.fullscreen-enter-icon]:opacity-100 [&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',
|
||||
'[&_.fullscreen-exit-icon]:opacity-0 [&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',
|
||||
'[&_path]:transition-transform ease-out',
|
||||
),
|
||||
FullscreenEnterIcon: cn(
|
||||
'fullscreen-enter-icon',
|
||||
'group-hover/button:[&_.arrow-1]:translate-x-px group-hover/button:[&_.arrow-1]:-translate-y-px',
|
||||
'group-hover/button:[&_.arrow-2]:-translate-x-px group-hover/button:[&_.arrow-2]:translate-y-px',
|
||||
),
|
||||
FullscreenExitIcon: cn(
|
||||
'fullscreen-exit-icon',
|
||||
'[&_.arrow-1]:translate-x-px [&_.arrow-1]:-translate-y-px',
|
||||
'[&_.arrow-2]:-translate-x-px [&_.arrow-2]:translate-y-px',
|
||||
'group-hover/button:[&_.arrow-1]:translate-0',
|
||||
'group-hover/button:[&_.arrow-2]:translate-0',
|
||||
),
|
||||
FullscreenTooltipPopup: cn(
|
||||
'[&_.fullscreen-enter-tooltip]:inline [&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',
|
||||
|
||||
Reference in New Issue
Block a user