tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add pop-out player for audio/video in web UI

Browse Source 
port d88a79b456 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
2020-09-28 13:29:43 +02:00
committed by Thibaut Girka
parent 9c88792f0a
commit 8f950e540b
21 changed files with 681 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/flavours/glitch/styles/components/index.scss
View File

@@ -144,7 +144,8 @@
}
.icon-button {
display: inline-block;
display: inline-flex;
align-items: center;
padding: 0;
color: $action-button-color;
border: 0;
@@ -226,6 +227,14 @@
background: rgba($base-overlay-background, 0.9);
}
}
&__counter {
display: inline-block;
width: 14px;
margin-left: 4px;
font-size: 12px;
font-weight: 500;
}
}
.text-icon-button {

115
app/javascript/flavours/glitch/styles/components/status.scss
View File

@@ -564,24 +564,6 @@
align-items: center;
display: flex;
margin-top: 8px;
&__counter {
display: inline-flex;
margin-right: 11px;
align-items: center;
.status__action-bar-button {
margin-right: 4px;
}
&__label {
display: inline-block;
width: 14px;
font-size: 12px;
font-weight: 500;
color: $action-button-color;
}
}
}
.status__action-bar-button {
@@ -1073,3 +1055,100 @@ a.status-card.compact:hover {
}
}
}
.picture-in-picture {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
&__footer {
border-radius: 0 0 4px 4px;
background: lighten($ui-base-color, 4%);
padding: 10px;
padding-top: 12px;
display: flex;
justify-content: space-between;
}
&__header {
border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%);
padding: 10px;
display: flex;
justify-content: space-between;
&__account {
display: flex;
text-decoration: none;
}
.account__avatar {
margin-right: 10px;
}
.display-name {
color: $primary-text-color;
text-decoration: none;
strong,
span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
span {
color: $darker-text-color;
}
}
}
.video-player,
.audio-player {
border-radius: 0;
}
@media screen and (max-width: 415px) {
width: 210px;
bottom: 10px;
right: 10px;
&__footer {
display: none;
}
.video-player,
.audio-player {
border-radius: 0 0 4px 4px;
}
}
}
.picture-in-picture-placeholder {
box-sizing: border-box;
border: 2px dashed lighten($ui-base-color, 8%);
background: $base-shadow-color;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 10px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
color: $darker-text-color;
i {
display: block;
font-size: 24px;
font-weight: 400;
margin-bottom: 10px;
}
&:hover,
&:focus,
&:active {
border-color: lighten($ui-base-color, 12%);
}
}