add waveform previews to sound lib

Author: JeremyGamer13

src/components/library-item/library-item.css

@@ -223,6 +223,14 @@
     max-width: 100%;
     max-height: 100%;
 }
+.library-item-image-overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
 
 .library-item-inset-image {
     width: 2.5rem;

src/components/library-item/library-item.jsx

@@ -333,6 +333,14 @@ class LibraryItemComponent extends React.PureComponent {
                             src={this.props.iconURL}
                             draggable={false}
                         />
+                        {this.props.overlayURL && (
+                            <img
+                                className={styles.libraryItemImageOverlay}
+                                loading="lazy"
+                                src={this.props.overlayURL}
+                                draggable={false}
+                            />
+                        )}
                     </Box>
                 </Box>
                 <span className={styles.libraryItemName}>{this.props.name}</span>
@@ -367,6 +375,7 @@ LibraryItemComponent.propTypes = {
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
     iconURL: PropTypes.string,
+    overlayURL: PropTypes.string,
     insetIconURL: PropTypes.string,
     customInsetColor: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,

src/components/library/library.jsx

@@ -453,6 +453,7 @@ class LibraryComponent extends React.Component {
                                 href={dataItem.href}
                                 iconMd5={dataItem.costumes ? dataItem.costumes[0].md5ext : dataItem.md5ext}
                                 iconRawURL={this.props.actor === "CostumeLibrary" ? `${PM_LIBRARY_API}files/${dataItem.libraryFilePage}` : dataItem.rawURL}
+                                overlayURL={dataItem.overlayURL}
                                 icons={dataItem.costumes}
                                 id={index}
                                 _id={dataItem._id}

src/containers/library-item.jsx

@@ -191,6 +191,7 @@ class LibraryItem extends React.PureComponent {
                 featured={this.props.featured}
                 hidden={this.props.hidden}
                 iconURL={iconURL}
+                overlayURL={this.props.overlayURL}
                 icons={this.props.icons}
                 id={this.props.id}
                 _id={this.props._id}
@@ -242,6 +243,7 @@ LibraryItem.propTypes = {
     hidden: PropTypes.bool,
     iconMd5: PropTypes.string,
     iconRawURL: PropTypes.string,
+    overlayURL: PropTypes.string,
     icons: PropTypes.arrayOf(
         PropTypes.shape({
             baseLayerMD5: PropTypes.string, // 2.0 library format, TODO GH-5084

src/containers/sound-library.jsx

@@ -40,13 +40,18 @@ const getSoundLibraryThumbnailData = (soundLibraryContent, isRtl) => soundLibrar
     };
     const isLoop = sound.tags ? sound.tags.includes('loops') : false;
     const isTheme = sound.tags ? sound.tags.includes('themes') : false;
+
     const {
         md5ext,
+        assetId,
         ...otherData
     } = sound;
     return {
         _md5: md5ext,
-        rawURL: isTheme ? icons.theme : (isLoop ? icons.loop : icons.sound),
+        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),
         ...otherData
     };
 });