update demo

docs/assets/css/style.css

@@ -36,6 +36,10 @@ img {
     vertical-align: top;
 }
 
+input[type="file"] {
+  cursor: pointer;
+}
+
 ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
@@ -179,19 +183,41 @@ img {
 }
 
 .main .part-left .libs {
-    height: 55px;
+    display: flex;
+    height: 50px;
+    border-bottom: 1px solid rgb(17, 21, 24);
+}
+
+.main .part-left .upload {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 15px;
+    height: 100%;
+    font-size: 13px;
+    color: #f1fa8c;
+    border-right: 1px solid rgb(17, 21, 24);
+    background-color: rgb(39, 41, 54);
+}
+
+.main .part-left #file {
+    opacity: 0;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .main .part-left .libsInput {
     height: 100%;
-    width: 100%;
+    flex: 1;
     padding: 10px;
     outline: none;
     resize: none;
     border: none;
     font-size: 13px;
     color: #ccc;
-    border-bottom: 1px solid rgb(17, 21, 24);
     background-color: rgb(28, 32, 34);
 }
 

docs/assets/js/common.js

@@ -11,6 +11,7 @@
     var $popups = document.querySelector('.popups');
     var $console = document.querySelector('.console');
     var $typeScript = document.querySelector('#typeScript');
+    var $file = document.querySelector('#file');
 
     var loadedLibs = [];
     window['consoleLog']($console);
@@ -199,6 +200,14 @@
         initApp();
     }
 
+    function readFile(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.readAsText(file);
+        })
+    }
+
     $run.addEventListener('click', function () {
         restart();
     });
@@ -214,6 +223,29 @@
         window.location.reload();
     });
 
+    $file.addEventListener('change', async function () {
+        for (let index = 0; index < $file.files.length; index++) {
+            const file = $file.files[index];
+            const name = file.name.toLowerCase().trim()
+            if (name.endsWith('.css')) {
+                const text = await readFile(file);
+                const $style = document.createElement('style');
+                $style.textContent = text;
+                document.body.appendChild($style);
+                $lib.value = `\n[${name}]`;
+                $lib.value = $lib.value.trim();
+            }
+            if (name.endsWith('.js')) {
+                const text = await readFile(file);
+                const $script = document.createElement('script');
+                $script.textContent = text;
+                document.body.appendChild($script);
+                $lib.value = `\n[${name}]`;
+                $lib.value = $lib.value.trim();
+            }
+        }
+    });
+
     window.addEventListener('error', function (err) {
         console.error(err);
     });

docs/index.html

@@ -77,6 +77,10 @@
                 </div>
             </header>
             <div class="libs">
+                <div class="upload">
+                    Upload Files
+                    <input type="file" id="file" multiple />
+                </div>
                 <textarea class="libsInput"
                     placeholder="Other dependencies, support for js and css, multiple line breaks"
                     spellcheck="false"></textarea>

docs/uncompiled/artplayer/index.js

@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2023-05-14 11:38:23";
+        return "2023-05-18 11:30:49";
     }
     static get config() {
         return 0, _configDefault.default;