From 01ae43d7d06360670e3b59d824790a1ea4764a7d Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 6 Jul 2023 16:51:39 +1000 Subject: [PATCH] feat: moved H5AudioPlayer SASS to styled components --- stylesheets/_modules.scss | 3 + stylesheets/_session_conversation.scss | 132 ------------------- ts/components/conversation/H5AudioPlayer.tsx | 124 ++++++++++++++++- 3 files changed, 126 insertions(+), 133 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 1a751325e..7f05611e0 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1048,6 +1048,9 @@ } // Module H5AudioPlayer +$rhap_background-color: var(--transparent-color) !default; +$rhap_font-family: inherit !default; + .module-message__container--outgoing { .rhap_container { background-color: var(--message-bubbles-sent-background-color); diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 491bc2083..c73fb99d7 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -254,135 +254,3 @@ } } } - -/* ************ */ -/* AUDIO PLAYER */ -/* ************ */ -$rhap_background-color: var(--transparent-color) !default; -$rhap_font-family: inherit !default; - -.rhap_container, -.rhap_container button, -.rhap_progress-container { - outline: none; -} - -.rhap_progress-container { - margin: 0 0 0 calc(10px + 1%); -} - -.rhap_container { - min-width: 220px; - padding: 0px; - background-color: transparent; - box-shadow: none; - padding: var(--padding-message-content); - border-radius: var(--border-radius-message-box); - - svg { - transition: fill var(--default-duration); - } -} - -.rhap_total-time { - display: none; -} - -.rhap_current-time { - margin: 0 5px 0 4px; - flex-shrink: 0; -} - -.rhap_play-pause-button { - display: flex; - justify-content: center; - align-items: center; -} - -.rhap_volume-bar { - display: none; -} - -.rhap_volume-button { - .module-message__container--incoming & { - color: var(--message-bubbles-received-text-color); - } - .module-message__container--outgoing & { - color: var(--message-bubbles-sent-text-color); - } -} - -.rhap_volume-container div[role='progressbar'] { - display: none; -} - -.rhap_time { - .module-message__container--incoming & { - color: var(--message-bubbles-received-text-color); - } - .module-message__container--outgoing & { - color: var(--message-bubbles-sent-text-color); - } - - font-size: 12px; -} - -.rhap_progress-bar { - box-sizing: border-box; - position: relative; - z-index: 0; - width: 100%; - height: 5px; - border-radius: 2px; -} - -.rhap_progress-filled { - padding-left: 5px; -} - -.rhap_download-progress { - height: 100%; - position: absolute; - z-index: 1; - border-radius: 2px; -} - -.rhap_progress-indicator { - z-index: 3; - width: 15px; - height: 15px; - top: -5px; - margin-left: -10px; - box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important; -} - -.rhap_controls-section { - display: flex; - justify-content: space-between; - align-items: center; -} - -.rhap_additional-controls { - display: none; -} - -.rhap_play-pause-button { - width: unset; - height: unset; -} - -.rhap_controls-section { - flex: unset; - justify-content: flex-start; -} - -.rhap_volume-button { - font-size: 20px; - width: 20px; - height: 20px; - margin-right: 0px; -} - -/* **************** */ -/* END AUDIO PLAYER */ -/* **************** */ diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index c6c5fc291..fa0151ae3 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/ts/components/conversation/H5AudioPlayer.tsx @@ -25,6 +25,128 @@ const StyledSpeedButton = styled.div` } `; +export const StyledH5AudioPlayer = styled(H5AudioPlayer)` + &.rhap_container { + min-width: 220px; + padding: 0px; + outline: none; + padding: var(--padding-message-content); + border-radius: var(--border-radius-message-box); + + svg { + transition: fill var(--default-duration); + } + + button { + outline: none; + } + } + + .rhap_progress-container { + margin: 0 0 0 calc(10px + 1%); + outline: none; + } + + .rhap_total-time { + display: none; + } + + .rhap_current-time { + margin: 0 5px 0 4px; + flex-shrink: 0; + } + + .rhap_play-pause-button { + display: flex; + justify-content: center; + align-items: center; + } + + .rhap_volume-bar { + display: none; + } + + .rhap_volume-button { + .module-message__container--incoming & { + color: var(--message-bubbles-received-text-color); + } + .module-message__container--outgoing & { + color: var(--message-bubbles-sent-text-color); + } + } + + .rhap_volume-container div[role='progressbar'] { + display: none; + } + + .rhap_time { + .module-message__container--incoming & { + color: var(--message-bubbles-received-text-color); + } + .module-message__container--outgoing & { + color: var(--message-bubbles-sent-text-color); + } + + font-size: 12px; + } + + .rhap_progress-bar { + box-sizing: border-box; + position: relative; + z-index: 0; + width: 100%; + height: 5px; + border-radius: 2px; + } + + .rhap_progress-filled { + padding-left: 5px; + } + + .rhap_download-progress { + height: 100%; + position: absolute; + z-index: 1; + border-radius: 2px; + } + + .rhap_progress-indicator { + z-index: 3; + width: 15px; + height: 15px; + top: -5px; + margin-left: -10px; + box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important; + } + + .rhap_controls-section { + display: flex; + justify-content: space-between; + align-items: center; + } + + .rhap_additional-controls { + display: none; + } + + .rhap_play-pause-button { + width: unset; + height: unset; + } + + .rhap_controls-section { + flex: unset; + justify-content: flex-start; + } + + .rhap_volume-button { + font-size: 20px; + width: 20px; + height: 20px; + margin-right: 0px; + } +`; + export const AudioPlayerWithEncryptedFile = (props: { src: string; contentType: string; @@ -98,7 +220,7 @@ export const AudioPlayerWithEncryptedFile = (props: { }; return ( -