update sound library UI & some RTL fixes

JeremyGamer13 · JeremyGamer13 · commit eaa53b7768e1 · 2024-07-02T00:09:24.000-06:00
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
@@ -26,6 +26,15 @@
     background: $ui-primary;
 }
 
+.library-item-sound {
+    width: 200px;
+    max-width: 200px;
+    flex-basis: 200px;
+    height: 100px;
+    padding: 0.25rem;
+    padding-bottom: 0;
+}
+
 .library-item-extension {
     align-self: stretch;
 }
@@ -228,9 +237,20 @@
     left: 0;
     top: 0;
     width: 100%;
+}
+
+.library-item-waveform {
+    position: absolute;
+    left: 0;
+    width: calc(100% - 3rem);
+    height: 3rem;
     max-width: 100%;
     max-height: 100%;
 }
+[dir="rtl"] .library-item-waveform {
+    left: initial;
+    right: 0;
+}
 
 .library-item-inset-image {
     width: 2.5rem;
@@ -250,6 +270,29 @@
     white-space: pre-wrap;
     min-width: 0;
 }
+.library-item-sound-name {
+    text-align: left;
+    width: 100%;
+    margin-bottom: 0;
+}
+.library-item-sound-type {
+    text-align: left;
+    width: 100%;
+    margin-top: 0;
+    opacity: 0.65;
+}
+
+[dir="rtl"] .library-item-sound-name,
+[dir="rtl"] .library-item-sound-type {
+    text-align: right;
+}
+
+.library-item-sound-info-container {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
 
 .featured-item {
     flex-basis: 300px;
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
@@ -25,6 +25,9 @@ const getURLOrigin = (url) => {
     }
     return urlObj.origin;
 };
+const getMSFormatted = (ms) => {
+    return (ms / 1000).toFixed(2);
+};
 
 /* eslint-disable react/prefer-stateless-function */
 class LibraryItemComponent extends React.PureComponent {
@@ -308,7 +311,8 @@ class LibraryItemComponent extends React.PureComponent {
             <Box
                 className={classNames(
                     styles.libraryItem, {
-                    [styles.hidden]: this.props.hidden
+                    [styles.hidden]: this.props.hidden,
+                    [styles.libraryItemSound]: this.props.styleForSound,
                 }
                 )}
                 role="button"
@@ -328,24 +332,44 @@ class LibraryItemComponent extends React.PureComponent {
                         onMouseLeave={this.props.showPlayButton ? this.props.onMouseLeave : null}
                     >
                         <img
-                            className={styles.libraryItemImage}
+                            className={classNames(
+                                styles.libraryItemImage, {
+                                [styles.libraryItemWaveform]: this.props.styleForSound
+                            }
+                            )}
                             loading="lazy"
                             src={this.props.iconURL}
                             draggable={false}
                         />
                         {this.props.overlayURL && (
                             <img
-                                className={styles.libraryItemImageOverlay}
+                                className={classNames(
+                                    styles.libraryItemImage, styles.libraryItemImageOverlay, {
+                                    [styles.libraryItemWaveform]: this.props.styleForSound
+                                }
+                                )}
                                 loading="lazy"
                                 src={this.props.overlayURL}
                                 draggable={false}
                             />
                         )}
                     </Box>
                 </Box>
-                <span className={styles.libraryItemName}>{this.props.name}</span>
+                {this.props.styleForSound ? (
+                    <div className={styles.libraryItemSoundInfoContainer}>
+                        <span className={classNames(styles.libraryItemName, styles.libraryItemSoundName)}>{this.props.name}</span>
+                        <span className={classNames(styles.libraryItemName, styles.libraryItemSoundType)}>
+                            {this.props.soundType}, {getMSFormatted(this.props.soundLength)}
+                        </span>
+                    </div>
+                ) : (
+                    <span className={styles.libraryItemName}>{this.props.name}</span>
+                )}
                 {this.props.showPlayButton ? (
                     <PlayButton
+                        className={classNames({
+                            [styles.libraryItemSoundPlayButton]: this.props.styleForSound
+                        })}
                         isPlaying={this.props.isPlaying}
                         onPlay={this.props.onPlay}
                         onStop={this.props.onStop}
@@ -377,6 +401,9 @@ LibraryItemComponent.propTypes = {
     iconURL: PropTypes.string,
     overlayURL: PropTypes.string,
     insetIconURL: PropTypes.string,
+    styleForSound: PropTypes.bool,
+    soundType: PropTypes.string,
+    soundLength: PropTypes.number,
     customInsetColor: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     isPlaying: PropTypes.bool,
diff --git a/src/components/library/library.css b/src/components/library/library.css
@@ -26,15 +26,34 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-left: 6px;
 }
-.libraryItemCount {
+.library-item-count {
     opacity: 0.5;
     margin-block: 0;
     margin-left: 4px;
 }
 [theme="dark"] .library-header {
     color: white;
 }
+[dir="rtl"] .library-header {
+    margin-left: initial;
+    margin-right: 6px;
+}
+[dir="rtl"] .library-item-count {
+    margin-left: initial;
+    margin-right: 4px;
+}
+
+.library-tag-count {
+    margin-right: 2.5%;
+    text-align: right;
+}
+[dir="rtl"] .library-tag-count {
+    margin-right: initial;
+    margin-left: 2.5%;
+    text-align: left;
+}
 
 .library-scroll-grid {
     width: calc(100% - 346px);
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
@@ -312,7 +312,6 @@ class LibraryComponent extends React.Component {
                 */}
                 {this.props.header ? (
                     <h1
-                        style={{ marginLeft: "6px" }}
                         className={classNames(
                             styles.libraryHeader,
                             styles.whiteTextInDarkMode
@@ -415,7 +414,7 @@ class LibraryComponent extends React.Component {
                                                     {...tagProps}
                                                 />
                                             </div>
-                                            <div style={{ width: "7.5%", marginRight: "2.5%", textAlign: "right" }}>
+                                            <div className={styles.libraryTagCount}>
                                                 {this.state.loaded &&
                                                     (
                                                         this.state.data.filter(dataItem => (arrayIncludesItemsFrom(
@@ -457,6 +456,9 @@ class LibraryComponent extends React.Component {
                                 icons={dataItem.costumes}
                                 id={index}
                                 _id={dataItem._id}
+                                styleForSound={this.props.actor === "SoundLibrary"}
+                                soundType={dataItem.soundType}
+                                soundLength={dataItem.soundLength}
                                 incompatibleWithScratch={dataItem.incompatibleWithScratch}
                                 insetIconURL={dataItem.insetIconURL}
                                 internetConnectionRequired={dataItem.internetConnectionRequired}
diff --git a/src/components/tag-checkbox/tag-button.css b/src/components/tag-checkbox/tag-button.css
@@ -47,6 +47,10 @@
 .checkbox:hover {
     border: 2px solid $motion-primary;
 }
+[dir="rtl"] .checkbox {
+    margin-right: initial;
+    margin-left: 4px;
+}
 
 .checkbox:checked {
     border: 2px solid $motion-primary;
diff --git a/src/containers/library-item.jsx b/src/containers/library-item.jsx
@@ -192,6 +192,9 @@ class LibraryItem extends React.PureComponent {
                 hidden={this.props.hidden}
                 iconURL={iconURL}
                 overlayURL={this.props.overlayURL}
+                styleForSound={this.props.styleForSound}
+                soundType={this.props.soundType}
+                soundLength={this.props.soundLength}
                 icons={this.props.icons}
                 id={this.props.id}
                 _id={this.props._id}
@@ -244,6 +247,9 @@ LibraryItem.propTypes = {
     iconMd5: PropTypes.string,
     iconRawURL: PropTypes.string,
     overlayURL: PropTypes.string,
+    styleForSound: PropTypes.bool,
+    soundType: PropTypes.string,
+    soundLength: PropTypes.number,
     icons: PropTypes.arrayOf(
         PropTypes.shape({
             baseLayerMD5: PropTypes.string, // 2.0 library format, TODO GH-5084
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
@@ -7,14 +7,15 @@ import AudioEngine from 'scratch-audio';
 
 import LibraryComponent from '../components/library/library.jsx';
 
-import soundIcon from '../components/library-item/lib-icon--sound.svg';
-import soundIconRtl from '../components/library-item/lib-icon--sound-rtl.svg';
-import loopIcon from '../components/library-item/lib-icon--loop.svg';
-import loopIconRtl from '../components/library-item/lib-icon--loop-rtl.svg';
-import themeIcon from '../components/library-item/lib-icon--theme.svg';
-import themeIconRtl from '../components/library-item/lib-icon--theme-rtl.svg';
+// import soundIcon from '../components/library-item/lib-icon--sound.svg';
+// import soundIconRtl from '../components/library-item/lib-icon--sound-rtl.svg';
+// import loopIcon from '../components/library-item/lib-icon--loop.svg';
+// import loopIconRtl from '../components/library-item/lib-icon--loop-rtl.svg';
+// import themeIcon from '../components/library-item/lib-icon--theme.svg';
+// import themeIconRtl from '../components/library-item/lib-icon--theme-rtl.svg';
 
 import {getSoundLibrary} from '../lib/libraries/tw-async-libraries';
+import soundLengths from '../lib/libraries/sounds-lengths.json';
 import soundTags from '../lib/libraries/sound-tags';
 
 import {connect} from 'react-redux';
@@ -33,11 +34,11 @@ const PM_LIBRARY_API = "https://library.penguinmod.com/";
 const getSoundLibraryThumbnailData = (soundLibraryContent, isRtl) => soundLibraryContent
 .sort((a, b) => a.name.localeCompare(b.name))
 .map(sound => {
-    const icons = {
-        sound: isRtl ? soundIconRtl : soundIcon,
-        loop: isRtl ? loopIconRtl : loopIcon,
-        theme: isRtl ? themeIconRtl : themeIcon,
-    };
+    // const icons = {
+    //     sound: isRtl ? soundIconRtl : soundIcon,
+    //     loop: isRtl ? loopIconRtl : loopIcon,
+    //     theme: isRtl ? themeIconRtl : themeIcon,
+    // };
     const isLoop = sound.tags ? sound.tags.includes('loops') : false;
     const isTheme = sound.tags ? sound.tags.includes('themes') : false;
 
@@ -51,7 +52,10 @@ const getSoundLibraryThumbnailData = (soundLibraryContent, isRtl) => soundLibrar
         rawURL: sound.fromPenguinModLibrary ?
             `${PM_LIBRARY_API}files/sound_previews/${sound.libraryFilePage.replace(/\//g, "_").replace(".mp3", ".png")}` :
             `${PM_LIBRARY_API}files/scratch_sound_previews/${assetId}.png`,
-        overlayURL: isTheme ? icons.theme : (isLoop ? icons.loop : icons.sound),
+        soundLength: sound.fromPenguinModLibrary ?
+            soundLengths.penguinmod[sound.libraryFilePage] :
+            soundLengths.scratch[assetId],
+        soundType: isTheme ? "Theme" : (isLoop ? "Loop" : "Sound"),
         ...otherData
     };
 });
@@ -260,6 +264,7 @@ class SoundLibrary extends React.PureComponent {
                 showPlayButton
                 data={this.state.data}
                 id="soundLibrary"
+                actor="SoundLibrary"
                 header={"Sounds"}
                 setStopHandler={this.setStopHandler}
                 tags={soundTags}
diff --git a/src/lib/libraries/sounds-lengths.json b/src/lib/libraries/sounds-lengths.json
