feat: moved H5AudioPlayer SASS to styled components
This commit is contained in:
parent
de41988215
commit
01ae43d7d0
|
@ -1048,6 +1048,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Module H5AudioPlayer
|
// Module H5AudioPlayer
|
||||||
|
$rhap_background-color: var(--transparent-color) !default;
|
||||||
|
$rhap_font-family: inherit !default;
|
||||||
|
|
||||||
.module-message__container--outgoing {
|
.module-message__container--outgoing {
|
||||||
.rhap_container {
|
.rhap_container {
|
||||||
background-color: var(--message-bubbles-sent-background-color);
|
background-color: var(--message-bubbles-sent-background-color);
|
||||||
|
|
|
@ -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 */
|
|
||||||
/* **************** */
|
|
||||||
|
|
|
@ -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: {
|
export const AudioPlayerWithEncryptedFile = (props: {
|
||||||
src: string;
|
src: string;
|
||||||
contentType: string;
|
contentType: string;
|
||||||
|
@ -98,7 +220,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<H5AudioPlayer
|
<StyledH5AudioPlayer
|
||||||
src={urlToLoad}
|
src={urlToLoad}
|
||||||
preload="metadata"
|
preload="metadata"
|
||||||
style={{ pointerEvents: multiSelectMode ? 'none' : 'inherit' }}
|
style={{ pointerEvents: multiSelectMode ? 'none' : 'inherit' }}
|
||||||
|
|
Loading…
Reference in New Issue