chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 Wiki Activity

Refactor <Video> to TypeScript (#34284)

Browse source
This commit is contained in:
Eugen Rochko 2025-03-28 13:15:43 +01:00 • committed by GitHub
commit e5fd61a84e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 1219 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/javascript/styles/mastodon/components.scss
View file

@ -7106,6 +7106,15 @@ a.status-card {
}
}
.media-gallery__actions {
opacity: 0;
transition: opacity 0.1s ease;
&.active {
opacity: 1;
}
}
&.inactive {
video,
.video-player__controls {
@ -7256,7 +7265,7 @@ a.status-card {
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: $white;
}
&__handle {
@ -7269,7 +7278,7 @@ a.status-card {
inset-inline-start: 0;
margin-inline-start: -6px;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
opacity: 0;
@ -7323,7 +7332,7 @@ a.status-card {
height: 4px;
border-radius: 4px;
top: 14px;
background: lighten($ui-highlight-color, 8%);
background: $white;
}
&__buffer {
@ -7339,7 +7348,7 @@ a.status-card {
height: 12px;
top: 10px;
margin-inline-start: -6px;
background: lighten($ui-highlight-color, 8%);
background: $white;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
.no-reduce-motion & {
@ -7348,6 +7357,7 @@ a.status-card {
&.active {
opacity: 1;
cursor: grabbing;
}
}
@ -7358,6 +7368,28 @@ a.status-card {
}
}
&__hotkey-indicator {
position: absolute;
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
background: rgba($base-shadow-color, 0.45);
backdrop-filter: var(--background-filter);
color: $white;
border-radius: 8px;
padding: 16px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
&__label {
font-size: 15px;
font-weight: 500;
}
}
&.detailed,
&.fullscreen {
.video-player__buttons {