merging package locks is annoying

Author: Ianyourgod

.github/workflows/node.js.yml

@@ -36,7 +36,7 @@ jobs:
   deploy:
     environment:
       name: github-pages
-      url: 'https://penguinmod.com/project'
+      url: 'https://penguinmod-home-git-new-backend-live-penguinmod.vercel.app/project'
     runs-on: ubuntu-latest
     needs: build
     steps:

README.md

@@ -1,4 +1,4 @@
-scratch-gui modified for use in [TurboWarp](https://turbowarp.org/) then modified for use in [PenguinMod](https://studio.penguinmod.com) 😀
+scratch-gui modified for use in [TurboWarp](https://turbowarp.org/) then modified for use in [PenguinMod](https://jwklong.github.io/penguinmod.github.io) 😀
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/PenguinMod/penguinmod.github.io/)
 ## Setup
 

package-lock.json

@@ -122,7 +122,6 @@
     "eslint-plugin-jest": "22.17.0",
     "eslint-plugin-react": "7.24.0",
     "gh-pages": "3.2.3",
-    "gh-pages-webpack-plugin": "github:FreshPenguin112/gh-pages-webpack-plugin",
     "html-webpack-plugin": "^4.5.2",
     "jest": "21.2.1",
     "jest-junit": "7.0.0",

package.json

@@ -13,7 +13,7 @@ const manifest = {
     },
     {
       "name": "JeremyGamer13",
-      "link": "https://penguinmod.com/profile?user=JGamerTesting"
+      "link": "https://penguinmod-home-git-new-backend-live-penguinmod.vercel.app/profile?user=JGamerTesting"
     }
   ],
   "dynamicDisable": true,

src/addons/addons/block-switching/_manifest_entry.js

@@ -10,8 +10,8 @@ export default async ({ addon, console, msg }) => {
   let recordBuffer = [];
   let recorder;
   let timeout;
-  // const isMp4CodecSupported = false;
-  const isMp4CodecSupported = MediaRecorder.isTypeSupported('video/webm;codecs=h264');
+  const isMp4CodecSupported = false;
+  // const isMp4CodecSupported = MediaRecorder.isTypeSupported('video/webm;codecs=h264');
   while (true) {
     const elem = await addon.tab.waitForElement('div[class*="menu-bar_file-group"] > div:last-child:not(.sa-record)', {
       markAsSeen: true,

src/addons/addons/mediarecorder/userscript.js

@@ -26,6 +26,29 @@
     background: $ui-primary;
 }
 
+.library-item-sound {
+    width: 200px;
+    max-width: 200px;
+    flex-basis: 200px;
+    height: 100px;
+    padding: 0.25rem;
+    padding-bottom: 0;
+}
+.library-item-new {
+    filter: hue-rotate(60deg);
+}
+.library-item-new-badge {
+    border-radius: 1024px;
+    color: white;
+    font-size: 10px;
+    font-weight: bold;
+    background-color: $sound-primary;
+    padding: 1px 5px;
+    position: absolute;
+    left: -8px;
+    top: -8px;
+}
+
 .library-item-extension {
     align-self: stretch;
 }
@@ -34,6 +57,9 @@
     border-width: 2px;
     border-color: $motion-primary;
 }
+.library-item-sound:hover {
+    border-color: $sound-primary;
+}
 
 .library-item-favorite {
     background: transparent;
@@ -223,6 +249,25 @@
     max-width: 100%;
     max-height: 100%;
 }
+.library-item-image-overlay {
+    position: absolute;
+    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;
@@ -242,6 +287,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;

src/components/action-menu/icon--sprite.svg

@@ -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,9 @@ 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,
+                    [styles.libraryItemNew]: this.props.isNew,
                 }
                 )}
                 role="button"
@@ -320,6 +325,11 @@ class LibraryItemComponent extends React.PureComponent {
                 onMouseEnter={this.props.showPlayButton ? null : this.props.onMouseEnter}
                 onMouseLeave={this.props.showPlayButton ? null : this.props.onMouseLeave}
             >
+                {this.props.isNew && (
+                    <div className={styles.libraryItemNewBadge}>
+                        NEW
+                    </div>
+                )}
                 {/* Layers of wrapping is to prevent layout thrashing on animation */}
                 <Box className={styles.libraryItemImageContainerWrapper}>
                     <Box
@@ -328,16 +338,45 @@ 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={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,
+                            [styles.libraryItemNewPlayButton]: this.props.isNew,
+                        })}
                         isPlaying={this.props.isPlaying}
                         onPlay={this.props.onPlay}
                         onStop={this.props.onStop}
@@ -365,9 +404,14 @@ LibraryItemComponent.propTypes = {
     disabled: PropTypes.bool,
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
+    isNew: PropTypes.bool,
     hidden: PropTypes.bool,
     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,