bugfixes and added easyplay1s partner

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Sky Music Nightly",
-  "short_name": "Sky Music Nightly",
+  "name": "Genshin Music Nightly",
+  "short_name": "Genshin Music Nightly",
   "description": "A program to record, practice and share music. \nBy downloading the app, you get fullscreen and better overall experience",
   "icons": [
     {
@@ -22,13 +22,13 @@
   "file_handlers": [
     {
       "action": "/",
-      "name": "Import file in sky music",
+      "name": "Import file in genshin music",
       "accept": {
         "application/json": [
-          ".skysheet",
-          ".skybackup",
-          ".skytheme",
-          ".skyfolder"
+          ".genshinsheet",
+          ".genshinbackup",
+          ".genshintheme",
+          ".genshinfolder"
         ]
       },
       "icons": [
@@ -72,4 +72,4 @@
   "orientation": "landscape",
   "theme_color": "#63aea7",
   "background_color": "#495466"
-}
+}

src/Config.ts

@@ -23,7 +23,7 @@ export const UPDATE_MESSAGE = (APP_NAME === 'Genshin'
     `).trim()
 
 export const UPDATE_URL = process.env.NODE_ENV === 'development'
-    ? '/changelog.json'
+    ? '/updates.json'
     : 'https://raw.githubusercontent.com/Specy/genshin-music/main/public/updates.json'
 
 

src/components/AppBase.tsx

@@ -51,7 +51,7 @@ function AppBase() {
         setHasVisited(hasVisited === 'true')
         checkIfneedsUpdate()
         linkServices()
-        const shouldShowBakcupWarning = settingsService.shouldShowBackupWarning(1000 * 60 * 60 * 24 * 14)
+        const shouldShowBakcupWarning = settingsService.shouldShowBackupWarning(1000 * 60 * 60 * 24 * 7 * 3) //3 weeks
         if (shouldShowBakcupWarning) {
             logger.warn("You haven't backed up your songs in a while, remember to download the backup sometimes!", 8000)
             settingsService.setLastBackupWarningTime(Date.now())

src/components/pages/Composer/MidiParser/index.tsx

@@ -363,6 +363,7 @@ class MidiImport extends Component<MidiImportProps, MidiImportState> {
             <Column className='floating-midi-content' gap={'0.3rem'}>
                 <Row
                     className='separator-border'
+                    align={'center'}
                     style={{width: '100%'}}
                 >
                     <FilePicker onPick={handleFile} as='buffer'>

src/components/pages/Index/Home.css

@@ -480,4 +480,8 @@
     .home-bottom {
         font-size: 0.6rem;
     }
+
+    .page-redirect-wrapper a, .page-redirect-wrapper button {
+        padding: 0.4rem 0.7rem;
+    }
 }

src/components/pages/Index/Home.tsx

@@ -225,7 +225,7 @@ export default function Home({askForStorage, hasVisited, setDontShowHome, closeW
                     Blog & Guides
                 </PageRedirect>
                 <PageRedirect href='/keybinds' current={currentPage === '/keybinds'}>
-                    Keybinds
+                    Keybinds/MIDI
                 </PageRedirect>
 
                 <PageRedirect href='/partners' current={currentPage === '/partners'}>
@@ -250,6 +250,9 @@ export default function Home({askForStorage, hasVisited, setDontShowHome, closeW
                 <AppButton onClick={clearCache}>
                     Clear cache
                 </AppButton>
+                <PageRedirect href='/blog/posts/easyplay-1s' current={currentPage === '/blog/posts/easyplay-1s'}>
+                    EASYPLAY 1s
+                </PageRedirect>
 
             </div>
 

src/components/pages/SheetVisualizer/SheetFrame.module.css

@@ -16,6 +16,16 @@
     height: 100%;
     padding: 0.25rem;
 }
+.frame-empty-counter{
+    position: absolute;
+    top: -0.5rem;
+    right: 0;
+    transform: translateX(50%) rotate(45deg);
+    font-size: 0.8rem;
+    opacity: 0.5;
+}
+.frame-empty-counter svg{
+}
 
 .frame-outer,
 .frame-outer-smaller {

src/components/pages/SheetVisualizer/SheetFrame2.tsx

@@ -4,6 +4,7 @@ import {memo, useEffect, useState} from "react"
 import {Theme} from "$stores/ThemeStore/ThemeProvider"
 import {Instrument} from '$lib/audio/Instrument'
 import s from "./SheetFrame.module.css"
+import {FaHourglass} from "react-icons/fa6";
 
 
 interface SheetFrameProps {
@@ -62,6 +63,16 @@ export function _SheetFrame2({chunk, rows, hasText, theme, keyboardLayout}: Shee
                 <div
                     className={`${s['frame-outer']} ${column.notes.length === 0 ? s['visualizer-ball'] : ''}`}
                 >
+                    {/*
+                    {(chunk.emptyAhead && i === chunk.columns.length - 1) &&
+                        <div className={`${s['frame-empty-counter']}`}>
+                            <span style={{fontSize: '0.6rem'}}>
+                                <FaHourglass />
+                            </span>
+                             {chunk.emptyAhead}
+                        </div>
+                    }
+                    */}
                     {column.notes.length === 0
                         ? <div></div>
                         : <div className={s['visualizer-frame']}

src/components/pages/Theme/ThemePropriety.tsx

@@ -85,7 +85,6 @@ export function ThemePropriety({
                             className="color-picker-check"
                             onClick={() => {
                                 setColor(Color(value))
-                                onChange(name, value)
                                 setSelectedProp('')
                             }}
                             style={{

src/components/pages/blog/BlogUl.tsx

@@ -1,5 +1,6 @@
 import {MaybeChildren, Stylable} from "$lib/utils/UtilTypes";
 import s from './blog.module.scss'
+import Link from "next/link";
 
 export function BlogUl({children, ...rest}: MaybeChildren<Stylable>) {
     return <ul {...rest}>
@@ -38,4 +39,23 @@ export function BlogB({children, className, ...rest}: MaybeChildren<Stylable>) {
     >
         {children}
     </b>
+}
+
+export function BlogIframe({src, ...rest}: { src: string } & Stylable) {
+    return <iframe
+        {...rest}
+        src={src}
+        className={s['blog-iframe']}
+    />
+}
+
+export function BlogLink({href, children, external,  ...rest}: { href: string, external?: boolean } & MaybeChildren<Stylable>) {
+    return <Link
+        {...rest}
+        href={href}
+        target={external ? "_blank" : undefined}
+        className={s['blog-link']}
+    >
+        {children}
+    </Link>
 }

src/components/pages/blog/blog.module.scss

@@ -11,7 +11,17 @@
   box-shadow: 0 0.5rem 0.7rem 0.5rem rgba(0, 0, 0, 0.2)
 }
 
-
+.blog-iframe {
+  height: min(20rem, 70vh);
+  margin: 2rem 0;
+  border: unset;
+  box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+}
+.blog-link{
+  color: var(--accent);
+  text-decoration: underline;
+}
 .blog-nav a {
   color: var(--primary-text);
   font-size: 1.2rem;

src/lib/Songs/ComposedSong.ts

@@ -112,7 +112,7 @@ export class ComposedSong extends Song<ComposedSong, SerializedComposedSong, 3>
                 parsed.instruments[i] = InstrumentData.deserialize(ins)
             })
         }
-        if (song.instruments.length > NoteLayer.MAX_LAYERS) throw new Error(`Sheet has ${song.instruments.length} instruments, but the max is ${NoteLayer.MAX_LAYERS}`)
+        if (parsed.instruments.length > NoteLayer.MAX_LAYERS) throw new Error(`Sheet has ${song.instruments.length} instruments, but the max is ${NoteLayer.MAX_LAYERS}`)
 
         return parsed
     }

src/lib/Songs/VisualSong.ts

@@ -26,7 +26,7 @@ export class VisualSong {
         this.bpm = bpm
     }
 
-    static from(song: Song | ComposedSong) {
+    static from(song: Song | ComposedSong, flattenEmptyChunks: boolean) {
         song = song.clone()
         const vs = new VisualSong(song.bpm)
         if (song instanceof RecordedSong) {
@@ -101,6 +101,23 @@ export class VisualSong {
         } else {
             console.error("Song type not supported")
         }
+        if (flattenEmptyChunks) {
+            let counter = 0
+            let finalChunks = [] as TempoChunk[]
+            for (const chunk of vs.chunks) {
+                if (chunk.columns.every(c => c.notes.length === 0)) {
+                    counter++
+                } else {
+                    const lastChunk = finalChunks[finalChunks.length - 1]
+                    if (lastChunk) {
+                        lastChunk.emptyAhead = counter
+                        counter = 0
+                    }
+                    finalChunks.push(chunk)
+                }
+            }
+            vs.chunks = finalChunks
+        }
         return vs
     }
 
@@ -192,6 +209,7 @@ export class TempoChunk {
     tempoChanger: number
     columns: TempoChunkColumn[]
     endingTempoChanger: number
+    emptyAhead: undefined | number
 
     constructor(tempoChanger: number, columns: TempoChunkColumn[]) {
         this.tempoChanger = tempoChanger

src/pages/blog/index.tsx

@@ -19,8 +19,10 @@ import {useHasVisitedBlogPost} from "$cmp/pages/blog/BaseBlogPost";
 import {BlogAuthorRenderer, BlogTagsRenderer} from "$cmp/pages/blog/BlogMetadataRenderers";
 import {ComboBox, ComboBoxItem, ComboBoxTitle} from "$cmp/shared/Inputs/ComboBox/ComboBox";
 import {_howUseVsrgComposer} from "$pages/blog/posts/how-to-use-vsrg-composer";
+import {_easyplay1sMetadata} from "$pages/blog/posts/easyplay-1s";
 
 const posts = ([
+    _easyplay1sMetadata,
     _composerTutorialMetadata,
     _playerTutorialMetadata,
     _midiTransposeMetadata,

src/pages/blog/posts/easyplay-1s.tsx

@@ -0,0 +1,55 @@
+import {BlogMetadata} from "$cmp/pages/blog/types";
+import {BaseBlogPost, SpecyAuthor} from "$cmp/pages/blog/BaseBlogPost";
+import {Header} from "$cmp/shared/header/Header";
+import {BlogIframe, BlogLi, BlogLink, BlogP, BlogUl} from "$cmp/pages/blog/BlogUl";
+import {BASE_PATH} from "$config";
+import Link from "next/link";
+
+
+export const _easyplay1sMetadata: BlogMetadata = {
+    title: "🎹 EASYPLAY 1s",
+    tags: ["Product"],
+    relativeUrl: "easyplay-1s",
+    image: BASE_PATH + '/assets/blog/easyplay.webp',
+    description: "The EASYPLAY 1s, the perfect keyboard for Sky Music Nightly",
+    createdAt: new Date("2024/04/24"),
+    author: SpecyAuthor,
+}
+
+
+export default function Easyplay1sPageBlog() {
+    return <BaseBlogPost metadata={_easyplay1sMetadata}>
+        <Header>
+            What it is
+        </Header>
+        <BlogP>
+            The EASYPLAY 1s is a keyboard that uses the same layout as Sky Music Nightly, and you can use it in the app
+            to help you
+            to compose songs and to learn them. <BlogLink external href={'https://summertones-1.kckb.me/18287a61'}>Find the keyboard on kickstarter here</BlogLink>.
+        </BlogP>
+        <Header>
+            The features
+        </Header>
+        <BlogP>
+            It is a MIDI keyboard which uses the same layout as Sky Music Nightly, the main features are:
+        </BlogP>
+        <BlogUl>
+            <BlogLi>20 instruments, most of which can be sustained</BlogLi>
+            <BlogLi>4 octaves of pitch change</BlogLi>
+            <BlogLi>Adjustable volume through a speaker and an headphone jack</BlogLi>
+            <BlogLi>MIDI support through USB-C</BlogLi>
+        </BlogUl>
+        <BlogP>
+            It's made out of translucent black plastic with replaceable keycaps and rubber pads to prevent slipping.
+
+        </BlogP>
+        <Header>
+            Demo video
+        </Header>
+        <BlogIframe src={'https://www.youtube.com/embed/l64Qdm-FpVU?si=NmbU0nVSrLlWTsBh'}/>
+        <BlogP>
+            If you are interested, you can <BlogLink external href={'https://summertones-1.kckb.me/18287a61'}>Find the keyboard on kickstarter here</BlogLink>.
+        </BlogP>
+    </BaseBlogPost>
+}
+

src/pages/partners/index.tsx

@@ -4,12 +4,31 @@ import partner from 'assets/images/partners/windsong-db.jpg'
 import skyMusicianNetwork from 'assets/images/partners/sky-musician-network.jpg'
 import Image, {StaticImageData} from 'next/image'
 import s from './Partners.module.css'
+import Link from "next/link";
+import {BASE_PATH} from "$config";
 
 export default function Partners() {
     return <DefaultPage className={s['partners-page']}>
         <PageMetadata text="Partners"
                       description='Learn about our partners who helped the development and to make the app more famous'/>
         <div className={s['partner-wrapper']}>
+            <Partner
+                name='EASYPLAY 1s'
+                description='The perfect keyboard for Sky Music Nightly'
+            >
+                <Link
+                    href={'https://summertones-1.kckb.me/18287a61'}
+                    style={{width: '18.8rem', height: '10.5rem', overflow: 'hidden', borderRadius: '0.3rem'}}
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    <img
+                        src={BASE_PATH + '/assets/blog/easyplay.webp'}
+                        style={{width: '100%', objectFit: 'cover', height: 'auto'}}
+
+                    />
+                </Link>
+            </Partner>
             <Partner
                 name='Specy'
                 description='The youtube channel that collects videos created by users of this app'