tesseract-design
/
tesseract
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Improve media player styling 

Add emphasis on play/pause buttons.
pull/1/head
TheoryOfNekomata 1 year ago
parent
4e8a0ae6a1
commit
da0d51356f
2 changed files with 106 additions and 96 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +53
    -47
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
  2. +53
    -49
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx

+ 53
- 47
packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx View File

@@ -162,55 +162,61 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
</div>
{enhanced && (
<div className="w-full flex-shrink-0 h-10 flex gap-4 items-center">
<button
className={clsx(
'w-10 h-full flex-shrink-0 text-primary flex items-center justify-center',
'focus:text-secondary focus:outline-0',
'active:text-tertiary',
'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50',
)}
type="submit"
name="action"
value="togglePlayback"
form={formId}
<div
className="py-1 w-14 h-full flex-shrink-0 text-primary flex items-center justify-center"
>
{
isPlaying
? (
<svg
aria-label="Pause"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="6"
y="4"
width="4"
height="16"
/>
<rect
x="14"
y="4"
width="4"
height="16"
/>
</svg>
)
: (
<svg
aria-label="Play"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
<button
className={
clsx(
'w-full h-full flex-shrink-0 text-primary flex items-center justify-center bg-primary/30 rounded',
'focus:text-secondary focus:outline-0 focus:bg-secondary/30',
'active:text-tertiary active:bg-tertiary/30',
'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/30',
)
}
</button>
}
type="submit"
name="action"
value="togglePlayback"
form={formId}
>
{
isPlaying
? (
<svg
aria-label="Pause"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="6"
y="4"
width="4"
height="16"
/>
<rect
x="14"
y="4"
width="4"
height="16"
/>
</svg>
)
: (
<svg
aria-label="Play"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
)
}
</button>
</div>
<div className="flex-auto w-full flex items-center gap-2 text-sm relative">
<button
className="absolute overflow-hidden w-12 opacity-0 h-10 peer/seek"


+ 53
- 49
packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx View File

@@ -104,57 +104,61 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
</div>
{enhanced && (
<div className="w-full flex-shrink-0 h-10 flex gap-4 items-center">
<button
className={
clsx(
'w-10 h-full flex-shrink-0 text-primary flex items-center justify-center',
'focus:text-secondary focus:outline-0',
'active:text-tertiary',
'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50'
)
}
type="submit"
name="action"
value="togglePlayback"
form={formId}
<div
className="py-1 w-14 h-full flex-shrink-0 text-primary flex items-center justify-center"
>
{
isPlaying
? (
<svg
aria-label="Pause"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="6"
y="4"
width="4"
height="16"
/>
<rect
x="14"
y="4"
width="4"
height="16"
/>
</svg>
)
: (
<svg
aria-label="Play"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
<button
className={
clsx(
'w-full h-full flex-shrink-0 text-primary flex items-center justify-center bg-primary/30 rounded',
'focus:text-secondary focus:outline-0 focus:bg-secondary/30',
'active:text-tertiary active:bg-tertiary/30',
'disabled:text-primary disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-primary/30',
)
}
</button>
}
type="submit"
name="action"
value="togglePlayback"
form={formId}
>
{
isPlaying
? (
<svg
aria-label="Pause"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<rect
x="6"
y="4"
width="4"
height="16"
/>
<rect
x="14"
y="4"
width="4"
height="16"
/>
</svg>
)
: (
<svg
aria-label="Play"
viewBox="0 0 24 24"
className="w-6 h-6 fill-none stroke-current stroke-2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
)
}
</button>
</div>
<div className="flex-auto w-full flex items-center gap-2 text-sm relative">
<button
className="absolute overflow-hidden w-12 opacity-0 h-10 peer/seek"


Write Preview
Loading…
Cancel
Save