From 01d042f80dd78d604da416590bbbc8a66ce64931 Mon Sep 17 00:00:00 2001 From: Sean King Date: Wed, 24 Jun 2020 20:53:25 -0600 Subject: [PATCH] Update of work on audio player --- app/soapbox/components/status.js | Bin 15914 -> 16792 bytes app/soapbox/containers/status_container.js | Bin 6040 -> 6126 bytes app/soapbox/features/account_gallery/index.js | Bin 7580 -> 7737 bytes app/soapbox/features/audio/index.js | Bin 13426 -> 12644 bytes .../compose/components/upload_button.js | Bin 2294 -> 2301 bytes .../status/components/detailed_status.js | Bin 6961 -> 7451 bytes .../features/ui/components/audio_modal.js | Bin 0 -> 1974 bytes .../features/ui/components/media_modal.js | Bin 7693 -> 8051 bytes .../features/ui/components/modal_root.js | Bin 2868 -> 2976 bytes app/soapbox/locales/defaultMessages.json | 43 +- app/styles/application.scss | 1 + app/styles/components/audio-player.scss | 380 ++++++++++++++++++ app/styles/components/detailed-status.scss | 3 +- app/styles/components/modal.scss | 11 +- app/styles/components/status.scss | 9 +- 15 files changed, 439 insertions(+), 8 deletions(-) create mode 100644 app/soapbox/features/ui/components/audio_modal.js create mode 100644 app/styles/components/audio-player.scss diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index bc0dc1cbc2e12a3ca242a3cfbcf9183eec458618..9c308c2f2e2d9105bdabb1b723b5dc9420769c2f 100644 GIT binary patch delta 242 zcmZ2gGozVt!#*Z99RMLzk7DVcfcAmRLg zoW#o1qRIZ^s=T_z1^JmdsYSYpK#9rk#rxr!C#y?nbNT1N&5Ds&DKgnggKx6Frj`sy zb-uc$LN%8H6eQ>86_+T0O)1q(WC7VT`Ie>}gz-l+VDbhnRu-`IPAz2!AsueO*tQ6D}OH(rQ^*}F3V`2rd03bi_13JRrp zSQJ78K}uOeLGqIYnMAoDW@KchfX&eH05TN7Vo;M(D+&_xfR>?H2@wRDq~i*fN70g; zlV6PPNU#`41B)|IcC$N^JR_finwmmJerZv$f}O2`;pQ~vcWj%da}_ggmgBKwWU?@w z9LJl*X=JLYV6R|kWV-nx?=$YnYJz;5k4mO6ZQdnwk7@H81r5f@`bt%sHz~QWh!v%# z*;bciWESfcrHV%6j$7own-J5Mg%BT{fZ#5CCf=ziX0Mz5aO#*g;-!f;M!Mm;P@<`6M+)L zpTNic0qhJ2bQ26nh>d~%2c1wy24*BU+og69Sh~UQz59K=`?mR`|NO(umQM!PZfft| z-^x|{*hU770ow-DN8*R*qQp$;2zw(P=H01Ej^E9HKU5^{hKJk>LmLzJqF9|L?nQ@C zv|r%8BF)Y8$q4z#=6wEoPFiceEIpWOHB~qdtyYuM(rz&yaqv4!uC&lMUE4uDGNkB| z8z7&p%kp##!1VIcT-;bk=7`-W%N5u|HekziD1uOJ^Uuq>($fTGUmJ8lQK8d?aRJ0< z5tjzS9`!8^OecU)3D2ot5@>;?dgpvSrg%yR)9ysqi2d$*f5#=2^&KGOZhTg z8rvu^u_Jo58YpaAud=WDBHPjLiBn^njTQE!aa#glpBhz34cSiP^@5TSqKb>Gt*x<- z&Dpc)kta5VGKH1hbqL8F)UTRIuLv4Z_V84FCWD diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js index 989a75c7c9fb3e6af367c37cd8cf68367bcb662e..6e8f5b82e96e494a2448e3242f9fdc4fc0c3e4e0 100644 GIT binary patch delta 37 jcmew+_*ZblA=b^;Sbdp9)V1`q)VUOpfWH1@8ID^3-E#@Y delta 37 tcmew>_)T!bAyyF`g~a6K)PfS{{JfIXypoX0g4E*8hgf}?CTnqA1^^zD4z2(I diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js index 558c6d9b7daf04781efa10a92e4d0839de4374a7..6d38e06e9705f8fc99c84e33bb7fc6ff4f972acf 100644 GIT binary patch delta 126 zcmdmJHrr}LER&dHX-a0kLRwLNu7bLro<0yI0!20lF*Wc^_7LKmEWx8C0}{zs*HozH zQh?Al2p12#s8iein=-3 z0P%yt(cI6>99cKUdU%DR^l-GMhQ#tadAgFl>SbNGUK|wuZB6s$zCky)+sZ+`ZAkA~ zKlxs|u*vqq=J&ReCWdrIGzW8+A5r+$qRRyq`fj!phmr@dtMLOY|FuD3ev#~ zV{73(R@dm9xJ5WGThd;U`3mm>Hl@+dLu2u?#Q$G=;SmZ*q8zHfHkFurRCpAv@=z+_ z984yFcOG@+;DJ86)e68-23b7O?_iPDqRFIth5xnEVzmj@9Hw;- znfEqc*7yX*A!WL)4`_Rx(O1g2h5Fd)@*>ZfU>Zv%pgeWh@5oTKHLXWG&teY$V(B?c z?>&y_xvZ{Dt9`nT9m^x6{v=%%BWHcEK@HH4hAh0X_cWF77-vx%3S}6hoHeaGrGubM zNvIp0HNu~?sByCx_Tk}kmpJq*l^ka)B zp(}-aORc+7viwA|qhteQTqI_P)_bEv3BSVQ$MA^0mENj9@gBZ>0nBRjf`s+7518>; z5+ywEFK{a02bdru`bgV$HfDD4ECEFOz) zY9LKotEiR`kH9YaKED~ldB6LH8D&)@O5UD4(Q?KFcoQd{KxDbdp+)kJw0x1w0SV;$ zT`u;qR*OXE8q&CgyGnlU$?-2bwIZpRKeyHxe{&Pw5O{wZ-pM|C0kGdBksPRXRP!}C zTNYhlN*>+N`O?G->)#N-gaiHaQck}Jc?eu|QCgZX=Yp@itY+lUqmk9u1z6cxu diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json index a83aac3ce1..14d3f14e97 100644 --- a/app/soapbox/locales/defaultMessages.json +++ b/app/soapbox/locales/defaultMessages.json @@ -3049,5 +3049,46 @@ } ], "path": "app/soapbox/features/video/index.json" + }, + { + "descriptors": [ + { + "defaultMessage": "Play", + "id": "audio.play" + }, + { + "defaultMessage": "Pause", + "id": "audio.pause" + }, + { + "defaultMessage": "Mute sound", + "id": "audio.mute" + }, + { + "defaultMessage": "Unmute sound", + "id": "audio.unmute" + }, + { + "defaultMessage": "Hide audio", + "id": "audio.hide" + }, + { + "defaultMessage": "Expand audio", + "id": "audio.expand" + }, + { + "defaultMessage": "Close audio", + "id": "audio.close" + }, + { + "defaultMessage": "Sensitive content", + "id": "status.sensitive_warning" + }, + { + "defaultMessage": "Media hidden", + "id": "status.media_hidden" + } + ], + "path": "app/soapbox/features/audio/index.json" } -] \ No newline at end of file +] diff --git a/app/styles/application.scss b/app/styles/application.scss index 331e38f922..4aad1edd4a 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -68,3 +68,4 @@ @import 'components/media-spoiler'; @import 'components/error-boundary'; @import 'components/video-player'; +@import 'components/audio-player'; diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss new file mode 100644 index 0000000000..1bda56b8ca --- /dev/null +++ b/app/styles/components/audio-player.scss @@ -0,0 +1,380 @@ +.audio-error-cover { + align-items: center; + background: var(--background-color); + color: var(--primary-text-color); + cursor: pointer; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + margin-top: 8px; + position: relative; + text-align: center; + z-index: 100; +} + +.status__audio-player { + background: var(--background-color); + box-sizing: border-box; + cursor: default; /* May not be needed */ + margin-top: 8px; + overflow: hidden; + position: relative; +} + +.status__audio-player-audio { + height: 100%; + object-fit: cover; + position: relative; + top: 50%; + transform: translateY(-50%); + width: 100%; + z-index: 1; +} + +.status__audio-player-expand, +.status__audio-player-mute { + color: var(--primary-text-color); + opacity: 0.8; + position: absolute; + right: 4px; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; +} + +.status__audio-player-spoiler { + display: none; + color: var(--primary-text-color); + left: 4px; + position: absolute; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; + top: 4px; + z-index: 100; + + &.status__audio-player-spoiler--visible { + display: block; + } +} + +.status__audio-player-expand { + bottom: 4px; + z-index: 100; +} + +.status__audio-player-mute { + top: 4px; + z-index: 5; +} + +.detailed, +.fullscreen { + .audio-player__volume__current, + .audio-player__volume::before { + bottom: 27px; + } + + .audio-player__volume__handle { + bottom: 23px; + } + +} + +.audio-player { + overflow: hidden; + position: relative; + background: $base-shadow-color; + max-width: 100%; + border-radius: 4px; + height: 57px; + + &:focus { + outline: 0; + } + + audio { + max-width: 100vw; + max-height: 80vh; + min-height: 120px; + object-fit: contain; + z-index: 1; + } + + &.fullscreen { + width: 100% !important; + height: 100% !important; + margin: 0; + + audio { + max-width: 100% !important; + max-height: 100% !important; + width: 100% !important; + height: 100% !important; + } + } + + &.inline { + audio { + object-fit: contain; + position: relative; + } + } + + &__controls { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent); + padding: 0 15px; + opacity: 1; + transition: opacity .1s ease; + } + + &.inactive { + min-height: 57px; + + audio, + .audio-player__controls { + visibility: hidden; + } + } + + &__spoiler { + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 4; + border: 0; + background: var(--background-color); + color: var(--primary-text-color--faint); + transition: none; + pointer-events: auto; + + &:hover, + &:active, + &:focus { + color: var(--primary-text-color); + } + + &__title { + display: block; + font-size: 14px; + } + + &__subtitle { + display: block; + font-size: 11px; + font-weight: 500; + } + } + + &__buttons-bar { + display: flex; + justify-content: space-between; + padding-bottom: 10px; + } + + &__buttons { + font-size: 16px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.left { + button { + padding-left: 0; + } + } + + &.right { + button { + padding-right: 0; + } + } + + button { + background: transparent; + padding: 2px 10px; + font-size: 16px; + border: 0; + color: rgba(#ffffff, 0.75); + + &:active, + &:hover, + &:focus { + color: #ffffff; + } + } + } + + &__time-sep, + &__time-total, + &__time-current { + font-size: 14px; + font-weight: 500; + } + + &__time-current { + color: #ffffff; + margin-left: 60px; + } + + &__time-sep { + display: inline-block; + margin: 0 6px; + } + + &__time-sep, + &__time-total { + color: #ffffff; + } + + &__volume { + cursor: pointer; + height: 24px; + display: inline; + + &::before { + content: ""; + width: 50px; + background: rgba(#ffffff, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + left: 85px; + bottom: 20px; + } + + &__current { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + left: 85px; + bottom: 20px; + background: var(--brand-color); + } + + &__handle { + position: absolute; + z-index: 3; + border-radius: 50%; + width: 12px; + height: 12px; + bottom: 16px; + left: 70px; + transition: opacity .1s ease; + background: var(--brand-color); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + pointer-events: none; + } + } + + &__link { + padding: 2px 10px; + + a { + text-decoration: none; + font-size: 14px; + font-weight: 500; + color: #ffffff; + + &:hover, + &:active, + &:focus { + text-decoration: underline; + } + } + } + + &__seek { + cursor: pointer; + height: 24px; + position: relative; + + &::before { + content: ""; + width: 100%; + background: rgba(#ffffff, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + top: 10px; + } + + &__progress, + &__buffer { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + top: 10px; + background: var(--brand-color); + } + + &__buffer { + background: rgba(#ffffff, 0.2); + } + + &__handle { + position: absolute; + z-index: 3; + opacity: 1; + border-radius: 50%; + width: 12px; + height: 12px; + top: 6px; + margin-left: -6px; + transition: opacity .1s ease; + background: var(--brand-color); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + pointer-events: none; + } + + &:hover { + .audio-player__seek__handle { + opacity: 1; + } + } + } + + &.detailed { + width: 100vmin; + height: 80px; + + .audio-player__buttons { + button { + padding-top: 10px; + padding-bottom: 10px; + } + } + } +} + +.media-spoiler-audio { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + margin-top: 8px; + position: relative; + border: 0; + display: block; +} + +.media-spoiler-audio-play-icon { + border-radius: 100px; + color: var(--primary-text-color--faint); + font-size: 36px; + left: 50%; + padding: 5px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +} diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index 533ab1ccd4..fd1f983026 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -38,7 +38,8 @@ } } - .video-player { + .video-player, + .audio-player { margin-top: 8px; } } diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 6d1cf7c5c1..14db46afb9 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -38,7 +38,8 @@ overflow-y: hidden; } -.video-modal { +.video-modal, +.audio-modal { max-width: 100vw; max-height: 100vh; position: relative; @@ -49,12 +50,16 @@ height: 100%; position: relative; + .audio-player.detailed, .extended-video-player { - width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; + } + + .extended-video-player { + width: 100%; + height: 100%; video { max-width: $media-modal-media-max-width; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 5a20e882ef..0d349764b8 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -78,7 +78,8 @@ opacity: 1; animation: fade 150ms linear; - .video-player { + .video-player, + .audio-player { margin-top: 8px; } @@ -176,7 +177,8 @@ white-space: normal; } - .video-player { + .video-player, + .audio-player { margin-top: 8px; max-width: 250px; } @@ -453,7 +455,8 @@ a.status-card { margin: 0; } -.status-card-video { +.status-card-video, +.status-card-audio { iframe { width: 100%; height: 100%;