├── GUIDE.md ├── LICENSE ├── README.md └── src ├── index.css ├── index.html ├── index.js ├── iro.min.js ├── jsmediatags.min.js ├── jszip.min.js ├── md.min.js └── template.html /GUIDE.md: -------------------------------------------------------------------------------- 1 | # blamscamp guide 2 | 3 | [Youtube tutorial here](https://www.youtube.com/watch?v=fE6G0zSec1E) 4 | 5 | ## basic usage 6 | 7 | To use blamscamp, fill in your album title and artist name. You can also upload a cover image. Click the "add song" button to add songs to your album. You can set the title for each individual song and choose its audio file from the file browser. 8 | 9 | Most of these fields are optional, so you can have an album with no cover and no artist if you want, or no title. Your choice. 10 | 11 | You can set the background colour, foreground colour (font colour,) and highlight colour (colour for album name/artist name/song titles). 12 | 13 | You can add additional files to include in the resulting zip file. If you add images, you can use them in the "custom css," otherwise they're just loose in the zip file. Try not to have multiple files with the same file name. 14 | 15 | Click "generate" to see a live preview in the second pane. 16 | 17 | Click "export zip" to get a zip file that contains your player, music files, and cover image. This is what you upload to itch.io. 18 | 19 | ## adding to itch.io 20 | 21 | On the itch.io main page, click the dropdown next to your icon and hit "upload a new project." 22 | 23 | You must have the following fields set: 24 | 25 | - "Classification" should be "Soundtrack" 26 | - "Kind of project" should be "HTML" 27 | 28 | Now, uploaded your exported ZIP file. Select the option "this file will be played in the browser." 29 | 30 | Next, tweak the viewport dimensions. This decides how big the widget is going to be. I found the maximum width is 960px. The height will depend on how many songs you have in your album. The more songs you have the taller the widget will have to be. 31 | 32 | Make sure the following other checkboxes are checked: 33 | 34 | - "Automatically start on page load" 35 | - this avoids the "run soundtrack" button when you open the page 36 | - "Enable scrollbars" 37 | - This will allow users to scroll down inside the applet if your height isn't tall enough. Otherwise, things will be cutoff. 38 | 39 | After doing all this, the blamscamp player should appear when you open up your project's store page. 40 | 41 | If you want your music to also be purchasable, upload a second ZIP that just contains the music files. If you set your project to purchasable, this is the zip that a buyer will download. You can put higher quality audio files in that zip or other goodies if you want. 42 | 43 | ## troubleshooting 44 | 45 | ### audio doesn't play 46 | 47 | This can be caused by using an unsupported audio format. Please try MP3 files. They are very widely supported. 48 | 49 | ### doesn't work on mobile 50 | 51 | This is true, I would like to improve this in the future. 52 | 53 | ### editor suddenly broke/needs to refresh 54 | 55 | This may be a bug. If you're inclined to make a bug report, please open the debugger console and copy the error message to a bug report, or send in an email to blackle@suricrasia.online 56 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![CC0 license badge](https://licensebuttons.net/p/zero/1.0/88x31.png) 2 | 3 | # blamscamp 4 | 5 | > Mmh, options, runnin' out of options, 6 | > 7 | > Mmh, options, used to have options 8 | 9 | bandcamp is great (at time of writing,) but it would be great to have more options for selling zip files of MP3s on the internet. So I created this tool, which lets you create a bandcamp-style audio player for an individual album. The player is an entirely self-contained website, and can be hosted on a variety of platforms, but was designed specifically for itch.io. 10 | 11 | [You can use it here](https://suricrasia.online/blamscamp/) 12 | 13 | [Read a guide here](GUIDE.md) 14 | 15 | [Youtube tutorial here](https://www.youtube.com/watch?v=fE6G0zSec1E) 16 | 17 | [Collection of Blamscamp albums on itch.io](https://itch.io/c/2306643/blamscamp-albums) 18 | 19 | ## roadmap 20 | 21 | - [x] reimport exported zip files for editing 22 | - [x] bulk import music or zip file of music/cover art 23 | - [x] auto parsing of music title from ID3 tags 24 | - [x] auto parsing of music order from ID3 tags 25 | - [x] custom css field 26 | - [x] loading indicator 27 | - [x] option to add additional files to the generated zip file (e.g. so one can set a background image through custom css) 28 | - [x] auto-updating of the generated player 29 | - [x] allow remembering position 30 | - [x] allow setting playback rate 31 | - [ ] next/previous track buttons 32 | - [ ] custom background image 33 | - [ ] lyrics display for each track 34 | - [ ] option to re-encode audio to lower bitrate 35 | - [ ] improve mobile support on itch.io. ostensibly only unity games are allowed to have dynamic sizing. 36 | 37 | ## serving 38 | 39 | To host the blamscamp editor, all you need are the files in the "src" directory. 40 | 41 | To host the blamscamp player, all you need are the files provided in the exported zip. 42 | 43 | **NOTE:** Your web server must support the Accept-Ranges header for track seeking to work. 44 | 45 | ## contributing 46 | 47 | Pull requests are welcome! But please note the following: 48 | 49 | The aesthetics of the blamscamp player was intended to follow the same design ethos as the bandcamp player. That is, very utilitarian. My thinking is that the basic styles of the player should be very simple, so that custom CSS can be more readily applied. 50 | 51 | The generated blamscamp player must not receive any added dependencies. The generator must stay as a single, self-contained file that is as small as reasonably possible. The point is for the generated file to be lightweight. Stick to Vanilla JS. 52 | 53 | The blamscamp editor, i.e. index.html, also uses Vanilla JS. I see this as a feature and not a bug. I would like to stick to vanilla as long as possible. That said, if things get too cumbersome I would be amenable to using a framework as long as it's lightweight. Right now blamscamp loads almost instantaniously and I would like to keep it that way. 54 | 55 | Additionally, I have set a dependency budget of "4" for this project. The target dependencies are: 56 | 57 | - [x] JSZip (added) 58 | - [x] an ID3 Tag Parser 59 | - [x] color picker 60 | - [ ] an MP3 audio encoder 61 | 62 | Dependencies of dependencies count toward the total. 63 | 64 | Things we would like: 65 | 66 | - UI polish in either the editor or player 67 | - refactoring to make the code simpler 68 | - if a new browser feature that has a caniuse score of >95% can remove like 10 lines of code, go for it! 69 | - implementations of roadmap features 70 | 71 | ## license 72 | 73 | This software is public domain, aside from the libraries [jszip](https://stuk.github.io/jszip/), [jsmediatags](https://github.com/aadsm/jsmediatags), [iro](https://iro.js.org/), and [Alamantus's FeatherWiki markdown parser](https://codeberg.org/Alamantus/FeatherWiki/src/commit/1e1bb77f42e057b53cd31acf0345612cbc51c6f4/helpers/md.js). 74 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | background: grey; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | background: white; 10 | display: grid; 11 | grid-template-columns: 1fr 1fr; 12 | width: 100%; 13 | height: 100%; 14 | margin: auto; 15 | } 16 | 17 | .editor { 18 | margin: 0 0 0 10px; 19 | overflow-y: scroll; 20 | } 21 | 22 | .preview { 23 | line-height: 0; 24 | } 25 | .preview > * { 26 | line-height: initial; 27 | } 28 | 29 | h1, h2, h3, p { 30 | margin: 10px 0; 31 | } 32 | 33 | iframe { 34 | width: 100%; 35 | height: 100%; 36 | border: 1px solid grey; 37 | box-sizing: border-box; 38 | } 39 | 40 | .well { 41 | padding: 5px 10px; 42 | border: 1px solid #ddd; 43 | margin: 5px 20px 5px 0px; 44 | background: #eee; 45 | } 46 | 47 | input { 48 | margin: 10px 0; 49 | } 50 | 51 | input[type='text'] { 52 | border: 1px solid grey; 53 | border-radius: 2px; 54 | } 55 | 56 | .code_editor { 57 | padding: 0.5rem 1rem; 58 | font-family: monospace; 59 | width: 100%; 60 | box-sizing: border-box; 61 | line-height: 1.5; 62 | margin: 0; 63 | resize: vertical; 64 | min-height: 15em; 65 | } 66 | 67 | button { 68 | margin: 5px 0; 69 | border-radius: 0; 70 | padding: 4px 8px; 71 | border: 1px solid grey; 72 | background-color: #eee; 73 | text-align: center; 74 | vertical-align: middle; 75 | cursor: pointer; 76 | flex-shrink: 0; 77 | } 78 | 79 | button:hover { 80 | background-color: #e6e6e6; 81 | } 82 | 83 | .color_area { 84 | display: flex; 85 | flex-wrap: wrap; 86 | align-items: flex-start; 87 | margin-top: 20px; 88 | margin-bottom: 20px; 89 | } 90 | 91 | .color_pickers { 92 | flex-grow: 1; 93 | } 94 | 95 | #iro { 96 | padding-right: 20px; 97 | } 98 | 99 | .color_picker { 100 | font-family: monospace; 101 | width: 10ch; 102 | padding-left: 3ch; 103 | background: white no-repeat; 104 | background-size: 2ch 100%; 105 | font-size: 125%; 106 | } 107 | 108 | .song { 109 | display: flex; 110 | align-items: center; 111 | } 112 | 113 | .well > * { 114 | margin: 0 5px 115 | } 116 | 117 | .song_title { 118 | flex-grow: 1; 119 | } 120 | 121 | .meta_fields { 122 | width: 450px; 123 | max-width: 90%; 124 | font-size: 120%; 125 | } 126 | 127 | .image_preview { 128 | max-height: 48px; 129 | width: auto; 130 | max-width: 200px; 131 | vertical-align: middle; 132 | } 133 | 134 | .spinner { 135 | background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-256%201792%201792%22%3E%3Cpath%20d%3D%22M617.492%201123.797q0%2060-42.5%20102t-101.5%2042q-60%200-102-42t-42-102q0-60%2042-102t102-42q59%200%20101.5%2042t42.5%20102zm432%20192q0%2053-37.5%2090.5t-90.5%2037.5q-53%200-90.5-37.5t-37.5-90.5q0-53%2037.5-90.5t90.5-37.5q53%200%2090.5%2037.5t37.5%2090.5zm-608-640q0%2066-47%20113t-113%2047q-66%200-113-47t-47-113q0-66%2047-113t113-47q66%200%20113%2047t47%20113zm1040%20448q0%2046-33%2079t-79%2033q-46%200-79-33t-33-79q0-46%2033-79t79-33q46%200%2079%2033t33%2079zm-832-896q0%2073-51.5%20124.5t-124.5%2051.5q-73%200-124.5-51.5t-51.5-124.5q0-73%2051.5-124.5t124.5-51.5q73%200%20124.5%2051.5t51.5%20124.5zm464-192q0%2080-56%20136t-136%2056q-80%200-136-56t-56-136q0-80%2056-136t136-56q80%200%20136%2056t56%20136zm544%20640q0%2040-28%2068t-68%2028q-40%200-68-28t-28-68q0-40%2028-68t68-28q40%200%2068%2028t28%2068zm-208-448q0%2033-23.5%2056.5t-56.5%2023.5q-33%200-56.5-23.5t-23.5-56.5q0-33%2023.5-56.5t56.5-23.5q33%200%2056.5%2023.5t23.5%2056.5z%22%2F%3E%3C%2Fsvg%3E'); 136 | width: 20px; 137 | height: 20px; 138 | background-size: contain; 139 | background-position: center; 140 | animation: spin 2s ease-in-out infinite; 141 | display: inline-block; 142 | vertical-align: middle; 143 | } 144 | 145 | .hidden { 146 | display: none; 147 | } 148 | .invisible { 149 | visibility: hidden; 150 | } 151 | .disabled { 152 | opacity: .5; 153 | pointer-events: none; 154 | } 155 | #iro.disabled { 156 | opacity: .25; 157 | } 158 | 159 | #version { 160 | font-size: 60%; 161 | opacity: .6; 162 | } 163 | 164 | @keyframes spin { 165 | 0% { transform: rotate(0deg); } 166 | 100% { transform: rotate(360deg); } 167 | } 168 | 169 | #add_extra_button, .code_editor { 170 | margin-top: 5px; 171 | } 172 | 173 | summary { 174 | cursor: pointer; 175 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | blamscamp editor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

blamscamp editor

17 |

create a bandcamp-style audio player for selling albums on itch.io. (guide) (youtube) (github)

18 |
19 |
20 |
21 | 22 |
23 | album description 24 |

accepts markdown

25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | 33 | 34 |
35 |
36 |
37 |
38 |
39 |
background
40 |
foreground
41 |
highlight
42 |
button
43 |
icon
44 |
border/shadow
45 |
46 |
47 |
50 |
53 |
56 |
59 |
62 |
65 |
68 |
71 |
74 | 75 |
76 | custom css 77 | 78 |
79 | 80 |
81 | additional files 82 | 83 | 84 |
85 |
86 | 87 | 88 | 89 | 90 | 91 |
92 |
93 |
94 | 95 |
96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | const VERSION = "0.0.5"; 3 | 4 | const $ = selector => document.querySelector(selector), 5 | $$ = selector => document.querySelectorAll(selector); 6 | 7 | $("#version").textContent = "v" + VERSION; 8 | /** 9 | * Adds an event listener that triggers only if it was called on a specific child element, or its grandchildren. 10 | * Suitable child elements are tested against a CSS selector. 11 | * 12 | * @param {HTMLElement} root The root element that listens for events on its child elements. 13 | * @param {HTMLElement} selector The selector to filter child elements. 14 | * @param {string} event The name of an Event, like "click" or "change". 15 | * @param {Function} callback The callback to call when an event occurs. 16 | * `this` will point to the child element that triggered this callback. 17 | * 18 | * @returns {void} 19 | */ 20 | const delegate = (root, selector, event, callback) => { 21 | root.addEventListener(event, e => { 22 | const closest = e.target.closest(selector); 23 | if (!closest) return; 24 | callback.apply(closest, [e]); 25 | }); 26 | }; 27 | 28 | for (const field of $$("[data-stored-key]")) { 29 | field.onchange = () => { 30 | make_preview(); 31 | } 32 | } 33 | 34 | let common_datastore = {}; 35 | const isCheckable = tag => tag.type === 'checkbox' || tag.type === 'radio'; 36 | const gather_fields = () => { 37 | common_datastore = {}; 38 | for (const field of $$("[data-stored-key]")) { 39 | const scope = field.getAttribute('data-stored-scope'), 40 | key = field.getAttribute('data-stored-key'), 41 | value = isCheckable(field) ? field.checked : field.value; 42 | if (scope) { 43 | if (!(scope in common_datastore)) { 44 | common_datastore[scope] = {}; 45 | } 46 | common_datastore[scope][key] = value; 47 | } else { 48 | common_datastore[key] = value; 49 | } 50 | } 51 | }; 52 | 53 | const update_fields = (data) => { 54 | for (const field of $$("[data-stored-key]")) { 55 | const scope = field.getAttribute('data-stored-scope'), 56 | key = field.getAttribute('data-stored-key'); 57 | let value = undefined; 58 | try { value = scope ? data[scope][key] : data[key] } catch {} 59 | 60 | if (isCheckable(field)) { 61 | if (typeof value != "undefined") { 62 | field.checked = value || false; 63 | } else { 64 | field.checked = field.dataset.default || false; 65 | } 66 | } else { 67 | field.value = value || field.dataset.default || ''; 68 | } 69 | if (field.oninput) field.oninput(field.value) 70 | } 71 | }; 72 | update_fields({}); //fill with defaults 73 | 74 | const ifHTMLMatcher = (varName) => new RegExp(`<:if:${varName}:>([\\s\\S]*?)(?:<:else:${varName}:>([\\s\\S]*?))?<:endif:${varName}:>`, "g"); 75 | const brokenIfHTMLMatcher = /<:if:(\S+):>[\s\S]*?(?:<:else:\1:>([\s\S]*?))?<:endif:\1:>/g 76 | const varHTMLMatcher = (varName) => new RegExp(`<:${varName}:>`, "g"); 77 | function applyVarsToTemplate(input, vars) { 78 | let output = input; 79 | for (const i in vars) { 80 | output = output.replace(varHTMLMatcher(i), () => (typeof vars[i] === 'object' ? JSON.stringify(vars[i]) : vars[i])); 81 | output = output.replace(ifHTMLMatcher(i), (Array.isArray(vars[i]) ? vars[i].length : vars[i]) ? "$1" : "$2"); 82 | } 83 | output = output.replace(brokenIfHTMLMatcher, "$2"); 84 | output = output.replace(varHTMLMatcher("\\S+"), ""); 85 | return output; 86 | }; 87 | 88 | const form = $("#editor"); 89 | const export_button = $("#export"); 90 | const import_button = $("#import"); 91 | const zip_input = $("#zip_input"); 92 | const export_spinner = $("#export_spinner"); 93 | const import_spinner = $("#import_spinner"); 94 | 95 | const color_pickers = $$('.color_picker'); 96 | const iro_obj = new iro.ColorPicker('#iro', { 97 | width: 150, layoutDirection: "horizontal" 98 | }); 99 | $('#iro').addEventListener('mousedown', (ev) => { 100 | ev.preventDefault(); 101 | }); 102 | 103 | for (let color_picker of color_pickers) { 104 | color_picker.oninput = e => { 105 | const value = color_picker.value; 106 | color_picker.style.backgroundImage = "linear-gradient("+value+", "+value+")"; 107 | } 108 | function on_color_change(color) { 109 | const hex = color.hexString || color; 110 | color_picker.value = hex; 111 | color_picker.oninput(); 112 | //silly way of getting the little swatch next to the input element 113 | // color_picker.style.backgroundImage = "linear-gradient("+hex+", "+hex+")"; 114 | //todo: auto-update CSS 115 | } 116 | color_picker.onfocus = e => { 117 | iro_obj.el.classList.remove("disabled"); 118 | try { iro_obj.color.hexString = color_picker.value } 119 | catch { on_color_change("#000000"); } 120 | iro_obj.on("color:change", on_color_change); 121 | }; 122 | color_picker.onblur = e => { 123 | iro_obj.el.classList.add("disabled"); 124 | iro_obj.off("color:change", on_color_change); 125 | make_preview(); 126 | }; 127 | on_color_change(color_picker.value); 128 | } 129 | 130 | /** 131 | * - title (string) — The title of the song, as it is displayed in the playlist 132 | * - filename (string) — The name of the imported file, with its extension 133 | * - file (Blob) — The audio file itself 134 | * - url (string) — A cached link to the file's blob, playable in the preview box 135 | * - time (string) — The length of the track in format X:XX 136 | */ 137 | const songs_datastore = []; 138 | const song_template = ` 139 |
140 | 141 | 142 | <:time:> 143 | 144 | 145 | 146 |
147 | `; 148 | const songs_list = $(".songs_list"); 149 | function songs_rerender() { 150 | songs_list.innerHTML = songs_datastore 151 | .map((song, idx) => applyVarsToTemplate(song_template, { 152 | ...song, 153 | idx, 154 | first: idx === 0, 155 | last: idx === songs_datastore.length - 1 156 | })).join(""); 157 | }; 158 | async function get_audio_duration(url) { 159 | const tmp_audio = new Audio(); 160 | await new Promise(resolve => { 161 | tmp_audio.addEventListener("loadedmetadata", resolve, {once:true}); 162 | tmp_audio.src = url; 163 | }); 164 | const duration = Math.ceil(tmp_audio.duration); 165 | return Math.floor(duration / 60) + ":" + String(duration % 60).padStart(2, "0"); 166 | } 167 | 168 | function get_file_tags(file) { 169 | return new Promise((resolve, reject) => { 170 | jsmediatags.read(file, { 171 | onSuccess: (data) => { 172 | resolve(data); 173 | }, 174 | 175 | onError: (error) => { 176 | reject(error); 177 | } 178 | }); 179 | }) 180 | } 181 | /** 182 | * @param {Blob} file — the audio file to import 183 | */ 184 | async function add_song(file) { 185 | const song = { 186 | file, 187 | url: URL.createObjectURL(file) 188 | }; 189 | if (file instanceof File) { 190 | song.filename = file.name; 191 | song.title = file.name 192 | .replace(/\.\S+$/, "") 193 | .replace(/(\p{Lowercase_Letter})(\p{Uppercase_Letter})/gu, "$1 $2"); 194 | } 195 | 196 | song.time = await get_audio_duration(song.url); 197 | song.track = songs_datastore.length + 1; 198 | try { 199 | const { tags } = await get_file_tags(file) 200 | if (tags?.title ?? false) { 201 | song.title = tags.title; 202 | } 203 | if (tags?.track ?? false) { 204 | song.track = tags.track; 205 | } 206 | } catch (err) { 207 | console.error('failed to read tags from: ' + file.name, err); 208 | } 209 | 210 | songs_datastore.push(song); 211 | return song; 212 | }; 213 | const add_song_button = $("#add_song_button"); 214 | const add_songs_input = $("#add_songs_input"), 215 | change_song_input = $("#change_song_input"); 216 | add_song_button.onclick = () => { 217 | add_songs_input.click(); 218 | }; 219 | add_songs_input.onchange = async e => { 220 | const promises = [...e.target.files].map(add_song); 221 | await Promise.all(promises); 222 | 223 | // resort songs after batch adding 224 | function track_key(a) { 225 | if (isNaN(a.track)) { 226 | return -1; 227 | } else { 228 | return parseInt(a.track, 10); 229 | } 230 | } 231 | songs_datastore.sort((a, b) => { 232 | return track_key(a) - track_key(b); 233 | }); 234 | 235 | songs_rerender(); 236 | e.target.value = ""; 237 | make_preview(); 238 | }; 239 | songs_rerender(); 240 | 241 | // Event delegation for the sound list 242 | delegate(songs_list, '.song_remove', 'click', function (e) { 243 | const idx = Number(this.closest('.song').getAttribute('data-song-idx')); 244 | songs_datastore.splice(idx, 1); 245 | songs_rerender(); 246 | make_preview(); 247 | }); 248 | let current_sound; 249 | delegate(songs_list, '.song_set', 'click',function () { 250 | const idx = Number(this.closest('.song').getAttribute('data-song-idx')); 251 | current_sound = songs_datastore[idx]; 252 | change_song_input.click(); 253 | }); 254 | change_song_input.onchange = async () => { 255 | const file = change_song_input.files[0]; 256 | current_sound.file = file; 257 | current_sound.url = URL.createObjectURL(file); 258 | current_sound.time = await get_audio_duration(current_sound.url); 259 | current_sound = void 0; 260 | change_song_input.value = ''; 261 | songs_rerender(); 262 | make_preview(); 263 | }; 264 | delegate(songs_list, '.song_title', 'change', function() { 265 | const idx = Number(this.closest('.song').getAttribute('data-song-idx')); 266 | songs_datastore[idx].title = this.value.trim(); 267 | }); 268 | delegate(songs_list, '.song_up', 'click',function () { 269 | const idx = Number(this.closest('.song').getAttribute('data-song-idx')); 270 | songs_datastore[idx].track = Math.min(1, idx); 271 | songs_datastore[idx - 1].track = Math.max(songs_datastore.length, idx + 1); 272 | [songs_datastore[idx], songs_datastore[idx - 1]] = [songs_datastore[idx - 1], songs_datastore[idx]]; 273 | songs_rerender(); 274 | make_preview(); 275 | }); 276 | delegate(songs_list, '.song_down', 'click',function () { 277 | const idx = Number(this.closest('.song').getAttribute('data-song-idx')); 278 | songs_datastore[idx].track = Math.max(songs_datastore.length, idx + 1); 279 | songs_datastore[idx + 1].track = Math.min(1, idx); 280 | [songs_datastore[idx], songs_datastore[idx + 1]] = [songs_datastore[idx + 1], songs_datastore[idx]]; 281 | songs_rerender(); 282 | make_preview(); 283 | }); 284 | 285 | 286 | const cover_datastore = {}; 287 | const cover_template = ` 288 | <:if:file:> 289 | 290 | 291 | <:else:file:> 292 | 293 | <:endif:file:> 294 | `; 295 | const cover_art_block = $(".cover_art"); 296 | function cover_art_rerender() { 297 | cover_art_block.innerHTML = applyVarsToTemplate(cover_template, cover_datastore); 298 | }; 299 | const cover_input = $("#cover_input"); 300 | cover_input.onchange = e => { 301 | cover_datastore.file = e.target.files[0]; 302 | // Rename to, for example, cover.jpg 303 | cover_datastore.filename = e.target.files[0].name.replace(/[\s\S]+(\.\S+)$/, 'cover$1'); 304 | cover_datastore.url = URL.createObjectURL(e.target.files[0]); 305 | e.target.value = ""; 306 | cover_art_rerender(); 307 | make_preview(); 308 | }; 309 | delegate(cover_art_block, ".cover_art_set", "click", () => { 310 | cover_input.click(); 311 | }); 312 | delegate(cover_art_block, ".cover_art_remove", "click", () => { 313 | delete cover_datastore.file; 314 | delete cover_datastore.filename; 315 | delete cover_datastore.url; 316 | cover_art_rerender(); 317 | make_preview(); 318 | }); 319 | cover_art_rerender(); 320 | 321 | 322 | /** 323 | * - filename (string) — The name of the imported file, with its extension 324 | * - type (string) — The mimetype of the imported file 325 | * - is_image (bool) — Whether the file is an image or not 326 | * - file (Blob) — The file itself 327 | * - url (string) — A cached link to the file's blob, usable in the preview box 328 | */ 329 | const extras_datastore = []; 330 | const extra_template = ` 331 |
332 | 333 | 334 | <:type:> 335 | <:if:is_image:> 336 | 337 | <:endif:is_image:> 338 |
339 | `; 340 | const extras_list = $(".extras_list"); 341 | function extras_rerender() { 342 | extras_list.innerHTML = extras_datastore 343 | .map((extra, idx) => applyVarsToTemplate(extra_template, { 344 | ...extra, 345 | idx, 346 | })).join(""); 347 | }; 348 | 349 | /** 350 | * @param {Blob} file — the arbitrary file to import 351 | */ 352 | async function add_extra(file) { 353 | const extra = { 354 | file, 355 | url: URL.createObjectURL(file) 356 | }; 357 | if (file instanceof File) { 358 | const { name, type } = file; 359 | extra.filename = name; 360 | extra.is_image = type.includes('image/'); 361 | extra.type = type ? type : name.substring(name.lastIndexOf('.') + 1); 362 | } 363 | 364 | extras_datastore.push(extra); 365 | 366 | sort_extras(); 367 | 368 | return extra; 369 | }; 370 | function sort_extras() { 371 | extras_datastore.sort((a, b) => { 372 | if (a.type === b.type) { 373 | const a_filename = a.filename.toLowerCase(); 374 | const b_filename = b.filename.toLowerCase(); 375 | if (a_filename === b_filename) return 0; 376 | return a_filename < b_filename ? -1 : 1; 377 | } 378 | return a.type < b.type ? -1 : 1; 379 | }); 380 | } 381 | 382 | const add_extra_button = $("#add_extra_button"); 383 | const add_extras_input = $("#add_extras_input"); 384 | add_extra_button.onclick = () => { 385 | add_extras_input.click(); 386 | }; 387 | add_extras_input.onchange = async e => { 388 | const promises = [...e.target.files].map(add_extra); 389 | await Promise.all(promises); 390 | extras_rerender(); 391 | e.target.value = ""; 392 | make_preview(); 393 | }; 394 | extras_rerender(); 395 | 396 | // Event delegation for the sound list 397 | delegate(extras_list, '.extra_remove', 'click', function (e) { 398 | const idx = Number(this.closest('.extra').getAttribute('data-extra-idx')); 399 | extras_datastore.splice(idx, 1); 400 | extras_rerender(); 401 | }); 402 | delegate(extras_list, '.extra_filename', 'change', function() { 403 | const idx = Number(this.closest('.extra').getAttribute('data-extra-idx')); 404 | extras_datastore[idx].filename = this.value.trim(); 405 | sort_extras(); 406 | extras_rerender(); 407 | }); 408 | 409 | 410 | async function serialize(final) { 411 | gather_fields(); 412 | let data = { 413 | ...common_datastore 414 | }; 415 | data.blamscamp_version = VERSION; 416 | if (cover_datastore.file) { 417 | data.cover = final ? cover_datastore.filename : cover_datastore.url; 418 | } 419 | data.songs = songs_datastore.map((song, idx) => ({ 420 | idx: idx + 1, 421 | filename: final ? song.filename : song.url, 422 | title: song.title, 423 | time: song.time 424 | })); 425 | if (extras_datastore.length > 0) { 426 | data.extras = extras_datastore.map((extra, idx) => ({ 427 | idx: idx + 1, 428 | filename: extra.filename, 429 | type: extra.type, 430 | })); 431 | } 432 | return data; 433 | } 434 | async function deserialize(file) { 435 | const archive = await JSZip.loadAsync(file); 436 | if (!('blamscamp.json' in archive.files)) { 437 | alert('Cannot find blamscamp.json in the zip archive. Make sure you select a file you exported with blamscamp.'); 438 | return; 439 | } 440 | const data = JSON.parse(await archive.files['blamscamp.json'].async('text')); 441 | update_fields(data); 442 | const promises = []; 443 | // Deserialize songs. 444 | songs_datastore.length = 0; 445 | for (const song of data.songs) { 446 | promises.push( 447 | archive.files[song.filename].async('blob') 448 | .then(blob => add_song(blob)) 449 | .then(songStored => { 450 | songStored.filename = song.filename; 451 | songStored.title = song.title; 452 | }) 453 | ); 454 | } 455 | // Do the same for the cover image. Store needed data in the input tag. 456 | if (data.cover) { 457 | cover_datastore.file = await archive.files[data.cover].async('blob'); 458 | cover_datastore.filename = data.cover; 459 | cover_datastore.url = URL.createObjectURL(cover_datastore.file); 460 | } else { 461 | delete cover_datastore.file; 462 | delete cover_datastore.filename; 463 | delete cover_datastore.url; 464 | } 465 | // Deserialize extra files. 466 | extras_datastore.length = 0; 467 | if (data.extras) { 468 | for (const extra of data.extras) { 469 | promises.push( 470 | archive.files[extra.filename].async('blob') 471 | .then(blob => add_extra(blob)) 472 | .then(extraStored => { 473 | extraStored.filename = extra.filename; 474 | extraStored.type = extra.type; 475 | extraStored.is_image = extra.type.includes('image/'); 476 | }) 477 | ); 478 | } 479 | } 480 | await Promise.all(promises); 481 | cover_art_rerender(); 482 | songs_rerender(); 483 | extras_rerender(); 484 | make_preview(); 485 | }; 486 | 487 | let template, template_song, template_body; 488 | fetch('template.html', {method: 'GET'}) 489 | .then(response => response.text()) 490 | .then(text => { 491 | template = text; 492 | template_song = template.match(/<:song_start:>([\s\S]*)<:song_end:>/)[1]; 493 | template_body = template.replace(/<:song_start:>(?:[\s\S]*)<:song_end:>/, "<:songs:>"); 494 | }) 495 | .catch(error => console.error('error:', error)); 496 | function generate(data, final) { 497 | let out = template_body; 498 | let songs = data.songs.map((song, idx) => applyVarsToTemplate(template_song, { 499 | index: idx + 1, 500 | ...song 501 | })); 502 | const templateVars = { 503 | blamscamp_version: data.blamscamp_version, 504 | album: data.album, 505 | artist: data.artist, 506 | description: md(data.description), 507 | cover: data.cover, 508 | songs: songs.join("\n"), 509 | ...data.settings 510 | }; 511 | if (!final) { 512 | templateVars.theme_transparent = false; 513 | if (templateVars.remember_position) { 514 | templateVars.force_show_remember_position = true; 515 | } 516 | } else { 517 | // Generate a UUID for exports so localStorage can have a unique key 518 | // UUID generator from https://stackoverflow.com/a/2117523 519 | templateVars.uuid = "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => 520 | (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) 521 | ); 522 | } 523 | out = applyVarsToTemplate(out, templateVars); 524 | return out; 525 | } 526 | export_button.onclick = async (e) => { 527 | export_button.disabled = true; 528 | export_spinner.classList.remove("hidden"); 529 | const data = await serialize(true); 530 | let zip = new JSZip(); 531 | zip.file('blamscamp.json', JSON.stringify(data)); 532 | zip.file('index.html', generate(data, true)); 533 | for (const song of songs_datastore) { 534 | zip.file(song.filename, song.file); 535 | } 536 | if (cover_datastore.file) { 537 | zip.file(cover_datastore.filename, cover_datastore.file); 538 | } 539 | for (const extra of extras_datastore) { 540 | zip.file(extra.filename, extra.file); 541 | } 542 | const zip_blob = await zip.generateAsync({type:"blob"}) 543 | const a = document.createElement('a'); 544 | a.download = data.album + "_blamscamp.zip"; 545 | a.href = URL.createObjectURL(zip_blob); 546 | a.click(); 547 | URL.revokeObjectURL(a.href); 548 | export_button.disabled = false; 549 | export_spinner.classList.add("hidden"); 550 | }; 551 | const make_preview = async () => { 552 | const data = await serialize(false); 553 | if (data.settings.theme_css) { 554 | for (const extra of extras_datastore) { 555 | data.settings.theme_css = data.settings.theme_css.replace(new RegExp(extra.filename, 'g'), extra.url); 556 | } 557 | } 558 | $("iframe").srcdoc = generate(data, false); 559 | }; 560 | $("#generate").onclick = () => { 561 | make_preview(); 562 | }; 563 | form.addEventListener("submit", e => { 564 | e.preventDefault(); 565 | make_preview(); 566 | }); 567 | import_button.onclick = () => { 568 | zip_input.click(); 569 | }; 570 | zip_input.onchange = async e => { 571 | import_spinner.classList.remove("hidden"); 572 | import_button.disabled = true; 573 | const file = e.target.files[0]; 574 | try { 575 | await deserialize(file); 576 | } catch (error) { 577 | throw error; 578 | } 579 | import_button.disabled = false; 580 | import_spinner.classList.add("hidden"); 581 | make_preview(); 582 | e.target.value = ''; 583 | }; 584 | -------------------------------------------------------------------------------- /src/iro.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * iro.js v5.5.2 3 | * 2016-2021 James Daniel 4 | * Licensed under MPL 2.0 5 | * github.com/jaames/iro.js 6 | */ 7 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).iro=n()}(this,function(){"use strict";var m,s,n,i,o,x={},j=[],r=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|^--/i;function M(t,n){for(var i in n)t[i]=n[i];return t}function y(t){var n=t.parentNode;n&&n.removeChild(t)}function h(t,n,i){var r,e,u,o,l=arguments;if(n=M({},n),3=r/i?u=n:e=n}return n},function(t,n,i){n&&g(t.prototype,n),i&&g(t,i)}(l,[{key:"hsv",get:function(){var t=this.$;return{h:t.h,s:t.s,v:t.v}},set:function(t){var n=this.$;if(t=b({},n,t),this.onChange){var i={h:!1,v:!1,s:!1,a:!1};for(var r in n)i[r]=t[r]!=n[r];this.$=t,(i.h||i.s||i.v||i.a)&&this.onChange(this,i)}else this.$=t}},{key:"hsva",get:function(){return b({},this.$)},set:function(t){this.hsv=t}},{key:"hue",get:function(){return this.$.h},set:function(t){this.hsv={h:t}}},{key:"saturation",get:function(){return this.$.s},set:function(t){this.hsv={s:t}}},{key:"value",get:function(){return this.$.v},set:function(t){this.hsv={v:t}}},{key:"alpha",get:function(){return this.$.a},set:function(t){this.hsv=b({},this.hsv,{a:t})}},{key:"kelvin",get:function(){return l.rgbToKelvin(this.rgb)},set:function(t){this.rgb=l.kelvinToRgb(t)}},{key:"red",get:function(){return this.rgb.r},set:function(t){this.rgb=b({},this.rgb,{r:t})}},{key:"green",get:function(){return this.rgb.g},set:function(t){this.rgb=b({},this.rgb,{g:t})}},{key:"blue",get:function(){return this.rgb.b},set:function(t){this.rgb=b({},this.rgb,{b:t})}},{key:"rgb",get:function(){var t=l.hsvToRgb(this.$),n=t.r,i=t.g,r=t.b;return{r:G(n),g:G(i),b:G(r)}},set:function(t){this.hsv=b({},l.rgbToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"rgba",get:function(){return b({},this.rgb,{a:this.alpha})},set:function(t){this.rgb=t}},{key:"hsl",get:function(){var t=l.hsvToHsl(this.$),n=t.h,i=t.s,r=t.l;return{h:G(n),s:G(i),l:G(r)}},set:function(t){this.hsv=b({},l.hslToHsv(t),{a:void 0===t.a?1:t.a})}},{key:"hsla",get:function(){return b({},this.hsl,{a:this.alpha})},set:function(t){this.hsl=t}},{key:"rgbString",get:function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},set:function(t){var n,i,r,e,u=1;if((n=_.exec(t))?(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255)):(n=H.exec(t))&&(i=K(n[1],255),r=K(n[2],255),e=K(n[3],255),u=K(n[4],1)),!n)throw new Error("Invalid rgb string");this.rgb={r:i,g:r,b:e,a:u}}},{key:"rgbaString",get:function(){var t=this.rgba;return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},set:function(t){this.rgbString=t}},{key:"hexString",get:function(){var t=this.rgb;return"#"+U(t.r)+U(t.g)+U(t.b)},set:function(t){var n,i,r,e,u=255;if((n=D.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3])):(n=F.exec(t))?(i=17*Q(n[1]),r=17*Q(n[2]),e=17*Q(n[3]),u=17*Q(n[4])):(n=L.exec(t))?(i=Q(n[1]),r=Q(n[2]),e=Q(n[3])):(n=B.exec(t))&&(i=Q(n[1]),r=Q(n[2]),e=Q(n[3]),u=Q(n[4])),!n)throw new Error("Invalid hex string");this.rgb={r:i,g:r,b:e,a:u/255}}},{key:"hex8String",get:function(){var t=this.rgba;return"#"+U(t.r)+U(t.g)+U(t.b)+U(Z(255*t.a))},set:function(t){this.hexString=t}},{key:"hslString",get:function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},set:function(t){var n,i,r,e,u=1;if((n=P.exec(t))?(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100)):(n=$.exec(t))&&(i=K(n[1],360),r=K(n[2],100),e=K(n[3],100),u=K(n[4],1)),!n)throw new Error("Invalid hsl string");this.hsl={h:i,s:r,l:e,a:u}}},{key:"hslaString",get:function(){var t=this.hsla;return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},set:function(t){this.hslString=t}}]),l}();function X(t){var n,i=t.width,r=t.sliderSize,e=t.borderWidth,u=t.handleRadius,o=t.padding,l=t.sliderShape,s="horizontal"===t.layoutDirection;return r=null!=(n=r)?n:2*o+2*u,"circle"===l?{handleStart:t.padding+t.handleRadius,handleRange:i-2*o-2*u,width:i,height:i,cx:i/2,cy:i/2,radius:i/2-e/2}:{handleStart:r/2,handleRange:i-r,radius:r/2,x:0,y:0,width:s?r:i,height:s?i:r}}function Y(t,n){var i=X(t),r=i.width,e=i.height,u=i.handleRange,o=i.handleStart,l="horizontal"===t.layoutDirection,s=l?r/2:e/2,c=o+function(t,n){var i=n.hsva,r=n.rgb;switch(t.sliderType){case"red":return r.r/2.55;case"green":return r.g/2.55;case"blue":return r.b/2.55;case"alpha":return 100*i.a;case"kelvin":var e=t.minTemperature,u=t.maxTemperature-e,o=(n.kelvin-e)/u*100;return Math.max(0,Math.min(o,100));case"hue":return i.h/=3.6;case"saturation":return i.s;case"value":default:return i.v}}(t,n)/100*u;return l&&(c=-1*c+u+2*o),{x:l?s:c,y:l?c:s}}var tt,nt=2*Math.PI,it=function(t,n){return(t%n+n)%n},rt=function(t,n){return Math.sqrt(t*t+n*n)};function et(t){return t.width/2-t.padding-t.handleRadius-t.borderWidth}function ut(t){var n=t.width/2;return{width:t.width,radius:n-t.borderWidth,cx:n,cy:n}}function ot(t,n,i){var r=t.wheelAngle,e=t.wheelDirection;return i&&"clockwise"===e?n=r+n:"clockwise"===e?n=360-r+n:i&&"anticlockwise"===e?n=r+180-n:"anticlockwise"===e&&(n=r-n),it(n,360)}function lt(t,n,i){var r=ut(t),e=r.cx,u=r.cy,o=et(t);n=e-n,i=u-i;var l=ot(t,Math.atan2(-i,-n)*(360/nt)),s=Math.min(rt(n,i),o);return{h:Math.round(l),s:Math.round(100/o*s)}}function st(t){var n=t.width,i=t.boxHeight;return{width:n,height:null!=i?i:n,radius:t.padding+t.handleRadius}}function ct(t,n,i){var r=st(t),e=r.width,u=r.height,o=r.radius,l=(n-o)/(e-2*o)*100,s=(i-o)/(u-2*o)*100;return{s:Math.max(0,Math.min(l,100)),v:Math.max(0,Math.min(100-s,100))}}function at(t,n,i,r){for(var e=0;e=this._array.length)throw Error("Offset "+a+" hasn't been loaded yet.");return this._array[a]}}],[{key:"canReadFile",value:function(a){return Array.isArray(a)||"function"===typeof Buffer&&Buffer.isBuffer(a)}}]); 49 | return a}(d("./MediaFileReader"));r.exports=d},{"./MediaFileReader":11}],4:[function(d,r,q){function n(a){"@babel/helpers - typeof";n="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"===typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return n(a)}function u(a,c){for(var k=0;kl.offset&&(d=this._sliceData(l.data,0,d-l.offset), 56 | m.data=this._concatData(d,e));b&&(d=this._sliceData(m.data,0,p.offset-m.offset),m.data=this._concatData(d,p.data));this._fileData.splice(h.startIx,h.endIx-h.startIx+1,m)}}},{key:"_concatData",value:function(d,e){if("undefined"!==typeof ArrayBuffer&&ArrayBuffer.isView&&ArrayBuffer.isView(d)){var b=new d.constructor(d.length+e.length);b.set(d,0);b.set(e,d.length);return b}return d.concat(e)}},{key:"_sliceData",value:function(d,e,b){return d.slice?d.slice(e,b):d.subarray(e,b)}},{key:"_getChunkRange", 57 | value:function(d,e){for(var b,h,l=-1,t=-1,m=0,f=0;f=h-1){l=f;break}}if(-1===l)return{startIx:-1,endIx:-1,insertIx:m};for(f=l;f=h-1&&(t=f),e<=b+1);f++);-1===t&&(t=l);return{startIx:l,endIx:t}}},{key:"hasDataRange",value:function(d,e){for(var b=0;b=h.offset&&e=h&&d<=l){e=this._fileData[b];break}}if(e)return e.data[d-e.offset];throw Error("Offset "+d+" hasn't been loaded yet.");}}],[{key:"NOT_FOUND",get:function(){return-1}}]);return d}();r.exports=d},{}],6:[function(d,r,q){function n(a){"@babel/helpers - typeof";n="function"=== 59 | typeof Symbol&&"symbol"===typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"===typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return n(a)}function u(a,g){for(var c=0;ca?t[a]:""}};f&&(a.tags.track=f);return a}}],[{key:"getTagIdentifierByteRange",value:function(){return{offset:-128,length:128}}},{key:"canReadTagFormat",value:function(a){return"TAG"=== 72 | String.fromCharCode.apply(String,a.slice(0,3))}}]);return f}(q);var t="Blues;Classic Rock;Country;Dance;Disco;Funk;Grunge;Hip-Hop;Jazz;Metal;New Age;Oldies;Other;Pop;R&B;Rap;Reggae;Rock;Techno;Industrial;Alternative;Ska;Death Metal;Pranks;Soundtrack;Euro-Techno;Ambient;Trip-Hop;Vocal;Jazz+Funk;Fusion;Trance;Classical;Instrumental;Acid;House;Game;Sound Clip;Gospel;Noise;AlternRock;Bass;Soul;Punk;Space;Meditative;Instrumental Pop;Instrumental Rock;Ethnic;Gothic;Darkwave;Techno-Industrial;Electronic;Pop-Folk;Eurodance;Dream;Southern Rock;Comedy;Cult;Gangsta;Top 40;Christian Rap;Pop/Funk;Jungle;Native American;Cabaret;New Wave;Psychadelic;Rave;Showtunes;Trailer;Lo-Fi;Tribal;Acid Punk;Acid Jazz;Polka;Retro;Musical;Rock & Roll;Hard Rock;Folk;Folk-Rock;National Folk;Swing;Fast Fusion;Bebob;Latin;Revival;Celtic;Bluegrass;Avantgarde;Gothic Rock;Progressive Rock;Psychedelic Rock;Symphonic Rock;Slow Rock;Big Band;Chorus;Easy Listening;Acoustic;Humour;Speech;Chanson;Opera;Chamber Music;Sonata;Symphony;Booty Bass;Primus;Porn Groove;Satire;Slow Jam;Club;Tango;Samba;Folklore;Ballad;Power Ballad;Rhythmic Soul;Freestyle;Duet;Punk Rock;Drum Solo;Acapella;Euro-House;Dance Hall".split(";"); 73 | r.exports=d},{"./MediaFileReader":11,"./MediaTagReader":12}],8:[function(d,r,q){function n(b,f){for(var a=0;a2.4",tags:{}};var e=a.getByteAt(g+4),k=a.isBitSetAt(g+5,7),h=a.isBitSetAt(g+5,6),d=a.isBitSetAt(g+5,5),l=a.getSynchsafeInteger32At(g+6);g+=10;if(h)if(4===f){var p=a.getSynchsafeInteger32At(g);g+=p}else p=a.getLongAt(g,!0),g+=p+4;p={type:"ID3",version:"2."+f+"."+e,major:f,revision:e,flags:{unsynchronisation:k,extended_header:h,experimental_indicator:d,footer_present:!1},size:l,tags:{}};b&&(c=this._expandShortcutTags(b));b=l+10;p.flags.unsynchronisation&& 97 | (a=t.getUnsyncFileReader(a,g,l),g=0,b=a.getSize());a=t.readFrames(g,b,a,p,c);for(var n in m)m.hasOwnProperty(n)&&(c=this._getFrameData(a,m[n]))&&(p.tags[n]=c);for(var q in a)a.hasOwnProperty(q)&&(p.tags[q]=a[q]);return p}},{key:"_getFrameData",value:function(a,b){for(var c=0,g;g=b[c];c++)if(g in a)return a=a[g]instanceof Array?a[g][0]:a[g],a.data}},{key:"getShortcuts",value:function(){return m}}],[{key:"getTagIdentifierByteRange",value:function(){return{offset:0,length:10}}},{key:"canReadTagFormat", 98 | value:function(a){return"ID3"===String.fromCharCode.apply(String,a.slice(0,3))}}]);return a}(q);var m={title:["TIT2","TT2"],artist:["TPE1","TP1"],album:["TALB","TAL"],year:["TYER","TYE"],comment:["COMM","COM"],track:["TRCK","TRK"],genre:["TCON","TCO"],picture:["APIC","PIC"],lyrics:["USLT","ULT"]};r.exports=d},{"./ID3v2FrameReader":8,"./MediaFileReader":11,"./MediaTagReader":12}],10:[function(d,r,q){function n(a){"@babel/helpers - typeof";n="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator? 99 | function(a){return typeof a}:function(a){return a&&"function"===typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return n(a)}function u(a,b){for(var c=0;c=a.getSize())f.onSuccess();else{var g=this,e=a.getLongAt(b,!0);if(0==e||isNaN(e))f.onSuccess();else{var h=a.getStringAt(b+4,4);if(this._isContainerAtom(h)){"meta"==h&&(b+=4);var d=(c?c+".":"")+h;"moov.udta.meta.ilst"===d?a.loadRange([b,b+e],f):a.loadRange([b+8,b+8+8], 103 | {onSuccess:function(){g._loadAtom(a,b+8,d,f)},onError:f.onError})}else a.loadRange([b+e,b+e+8],{onSuccess:function(){g._loadAtom(a,b+e,c,f)},onError:f.onError})}}}},{key:"_isContainerAtom",value:function(a){return 0<=["moov","udta","meta","ilst"].indexOf(a)}},{key:"_canReadAtom",value:function(a){return"----"!==a}},{key:"_parseData",value:function(a,b){var c={};b=this._expandShortcutTags(b);this._readAtom(c,a,0,a.getSize(),b);for(var g in f)f.hasOwnProperty(g)&&(b=c[f[g]])&&(c[g]="track"===g?b.data.track: 104 | b.data);return{type:"MP4",ftyp:a.getStringAt(8,4),version:a.getLongAt(12,!0),tags:c}}},{key:"_readAtom",value:function(a,b,c,f,e,h,d){d=void 0===d?"":d+" ";for(var g=c;gb&&(b+=65536);return b}},{key:"getSShortAt",value:function(b,e){b=this.getShortAt(b,e);return 32767e&&(e+=4294967296);return e}},{key:"getSLongAt", 113 | value:function(b,e){b=this.getLongAt(b,e);return 2147483647e&&(e+=16777216);return e}},{key:"getStringAt",value:function(b,e){for(var d=[],h=b,m=0;ha||224<=a?b[f]=String.fromCharCode(c): 120 | (a=(e[h+n]<<8)+e[h+m],h+=2,b[f]=String.fromCharCode(c,a))}return new p(b.join(""),h)},readUTF8String:function(e,b){var d=0;b=Math.min(b||e.length,e.length);239==e[0]&&187==e[1]&&191==e[2]&&(d=3);for(var l=[],n=0;dm)l[n]=String.fromCharCode(m);else if(194<=m&&224>m){var f=e[d++];l[n]=String.fromCharCode(((m&31)<<6)+(f&63))}else if(224<=m&&240>m){f=e[d++];var a=e[d++];l[n]=String.fromCharCode(((m&255)<<12)+((f&63)<<6)+(a&63))}else if(240<=m&&245>m){f=e[d++]; 121 | a=e[d++];var c=e[d++];a=((m&7)<<18)+((f&63)<<12)+((a&63)<<6)+(c&63)-65536;l[n]=String.fromCharCode((a>>10)+55296,(a&1023)+56320)}}return new p(l.join(""),d)},readNullTerminatedString:function(e,b){var d=[];b=b||e.length;for(var l=0;lc._config.disallowedXhrHeaders.indexOf(b.toLowerCase())&&a.setRequestHeader(b,d)}},{key:"_hasResponseHeader",value:function(a,b){a=a.getAllResponseHeaders();if(!a)return!1;a=a.split("\r\n");for(var c=[],d=0;da.offset&&(-a.offset>b||0=b||c)}d("./MediaFileReader");var b=d("./XhrFileReader"),h=d("./BlobFileReader"),l=d("./ArrayFileReader");d("./MediaTagReader");var t= 135 | d("./ID3v1TagReader"),m=d("./ID3v2TagReader"),f=d("./MP4TagReader"),a=d("./FLACTagReader"),c=[],k=[],g=function(){function a(b){n(this,a);p(this,"_file",void 0);p(this,"_tagsToRead",void 0);p(this,"_fileReader",void 0);p(this,"_tagReader",void 0);this._file=b}v(a,[{key:"setTagsToRead",value:function(a){this._tagsToRead=a;return this}},{key:"setFileReader",value:function(a){this._fileReader=a;return this}},{key:"setTagReader",value:function(a){this._tagReader=a;return this}},{key:"read",value:function(a){var b= 136 | new (this._getFileReader())(this._file),c=this;b.init({onSuccess:function(){c._getTagReader(b,{onSuccess:function(d){(new d(b)).setTagsToRead(c._tagsToRead).read(a)},onError:a.onError})},onError:a.onError})}},{key:"_getFileReader",value:function(){return this._fileReader?this._fileReader:this._findFileReader()}},{key:"_findFileReader",value:function(){for(var a=0;ah.offset&&h.offset<-f/2?c.push(k[g]):d.push(k[g]))}var l=!1;g={onSuccess:function(){if(l){for(var c=0;c text) 17 | * - horizontal rule (---, ***, - - -, * * *) 18 | * - code blocks (```) 19 | * - inline code (`code`) 20 | * - images with alt text & optional title (![alt](image_src "optional title")) 21 | * - inline Markdown links with optional title ([link text](link_url "optional title")) 22 | * - auto links & email linking (, ) 23 | * - lists with indentation (- list item, * list item, + list item) 24 | * - checkboxes ([ ], [x]) 25 | * - bold, italic (**bold**, __bold__, *italic*, _italic_, ***bold & italic***, ___bold & italic___, **_bold & italic_**, etc.) 26 | * - strikethrough (~~strikethrough~~) 27 | * - escaped characters (\*, \_) 28 | */ 29 | const charMap={"<":"<",">":">",'"':""","'":"'",$:"$","&":"&","[":"[","]":"]","(":"(",")":")",_:"_","*":"*","`":"`"},doubleEscaped=Object.keys(charMap).filter((e=>"&"!=e)).map((e=>charMap[e].replace("&"!=e?"&":"",""))),htmlEntity=e=>e.replace(/[<>$&\(\)\[\]"']/g,(e=>charMap[e]||e)).replace(new RegExp(`&(${doubleEscaped.join("|")})`,"g"),"&$1");function md(e){if(!e)return"";var l=[],t=0,c=[],n=0,r=e.length;let a;"\n"!==e[r-1]&&"\n"!==e[r-2]&&(e+="\n\n"),e=(e=e.replace(/\\(.)/g,((e,l)=>charMap[l]||e)).replace(/```(.*)\n([^\0]+?)```(?!```)/gm,((e,c,n)=>(l[t]={lang:c,block:htmlEntity(n)},`{code-${t++}}`))).replace(/`([^`]+?)`/g,((e,l)=>`${htmlEntity(l)}`)).replace(/<([^>\s]+(\/\/|@)[^>\s]+)>/g,((e,l,t)=>`[${l}](${"@"===t?"mailto:":""}${l})`)).replace(/(!?)\[([^\]]*?)\]\(([^\s\n]*)(?:| "(.*)")\)/gm,((e,l,t,c,n)=>{t=htmlEntity(t);try{c=decodeURI(c)}catch{}return c=encodeURI(c),n=n?` title="${htmlEntity(n)}"`:"",l?`${t}`:`${t}`})).replace(/(<\/?[a-zA-Z]+[^>]*>)/gm,((e,l)=>(c[n]=l,`{html-${n++}}`))).replace(/^[ \t]*>+ (.*)/gm,"
\n$1\n
").replace(/(<\/blockquote>\n?
)+?/g,"").replace(/^(#+) +(.*)/gm,((e,l,t)=>`${t}`)).replace(/^([^\n\t ])(.*)\n====+/gm,"

$1$2

").replace(/^([^\n\t ])(.*)\n----+/gm,"

$1$2

").replace(/\n( *[-*]){3,}\n/gm,"
").replace(/\[( |x)\]/g,((e,l)=>``)).replace(/ +\n/gm,"
").replace(/^([^-\+\*\d<\t \n])([^]*?)(?:\n\n)/gm,((e,l,t)=>`

${l}${t}

\n`))).replace(/^([\t ]*)(?:(-|\+|\*)|(\d+(?:\)|\.))) (.*)/gm,((e,l,t,c,n)=>{l.length>0&&!a?a=l.replace(/[^ ]/g,""):0===l.length&&a&&(a=void 0),a&&(l=l.replace(new RegExp(a,"g"),"\t"));const r=c?"o":"u";return`${l}<${r}l>
  • ${n}
    • `}));for(var p=/<\/li><\/(u|o)l>\n(\t+)<(u|o)l>
  • (.*)<\/li><\/(u|o)l>/;e.match(p);)e=e.replace(p,(function(e,l,t,c,n,r){return t.length>0&&(t=t.substring(1)).length>0&&(t="\n"+t),`${t}<${c}l>
  • ${n}
    • `}));e=e.replace(/(<\/ul>\n?[ \t]*
      )+?/g,"").replace(/(<\/ol>\n?[ \t]*
        )+?/g,"").replace(/\*\*([^\n*]+?)\*\*/g,"$1").replace(/__([^\n_]+?)__/g,"$1").replace(/\*([^\n*]+?)\*/g,"$1").replace(/_([^\n_]+?)_/g,"$1").replace(/(?:~~)([^~]+?)(?:~~)/g,"$1");for(let l=0;l${htmlEntity(n)}`)}return e.trim()} -------------------------------------------------------------------------------- /src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <:album:> by <:artist:> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
        17 | <:if:album:> 18 |

        <:album:>

        19 | <:endif:album:> 20 | <:if:artist:> 21 |

        by <:artist:>

        22 | <:endif:artist:> 23 | <:if:description_under_cover:> 24 | <:if:description:> 25 |
        <:description:>
        26 | <:endif:description:> 27 | <:endif:description_under_cover:> 28 |
        29 | 34 |
        35 |

        36 | 37 | <:if:playback_rate:> 38 |
        39 | Speed 40 | 41 | ×1 42 |
        43 | <:endif:playback_rate:> 44 |
        45 |
        46 |
          47 | <:song_start:> 48 |
        • 49 | 50 |

          51 | <:index:>. 52 | 53 | <:if:title:> 54 | <:title:> 55 | <:else:title:> 56 | Track №<:index:> 57 | <:endif:title:> 58 | 59 |

          – <:time:>
          • 60 | <:song_end:> 61 |
        62 | <:if:description_under_cover:> 63 | <:else:description_under_cover:> 64 | <:if:description:> 65 |
        <:description:>
        66 | <:endif:description:> 67 | <:endif:description_under_cover:> 68 |

        made with blamscamp v<:blamscamp_version:>

        69 |
        70 | <:if:cover:> 71 |
        72 | 73 | <:if:description_under_cover:> 74 | <:if:description:> 75 |
        <:description:>
        76 | <:endif:description:> 77 | <:endif:description_under_cover:> 78 |
        79 | <:else:cover:> 80 | <:if:description_under_cover:> 81 | <:if:description:> 82 |
        83 |
        <:description:>
        84 |
        85 | <:endif:description:> 86 | <:endif:description_under_cover:> 87 | <:endif:cover:> 88 | 309 | 563 | 564 | 565 | --------------------------------------------------------------------------------