jamesduncan / digihymnal

digiHymnal

Framework7 CLI Options

Framework7 app created with following options:

{
  "cwd": "",
  "type": [
    "pwa"
  ],
  "name": "digiHymnal",
  "framework": "core",
  "template": "single-view",
  "bundler": "webpack",
  "cssPreProcessor": false,
  "theming": {
    "customColor": true,
    "color": "#ff5d00",
    "darkTheme": true,
    "iconFonts": false,
    "fillBars": false
  },
  "customBuild": false,
  "webpack": {
    "developmentSourceMap": true,
    "productionSourceMap": true,
    "hashAssets": false,
    "preserveAssetsPaths": false,
    "inlineAssets": true
  }
}

Development

Install webpack npm install -g webpack

git clone [email protected]:owner/digihymnal.git digihymnal
cd digihymnal
npm install
npm run dev

NPM Scripts

• 🔥 start - run development server
• 🔧 dev - run development server
• 🔧 build-dev - build web app using development mode (faster build without minification and optimization)
• 🔧 build-prod - build web app for production

WebPack

There is a webpack bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in /src folder. Webpack config located in build/webpack.config.js.

Webpack has specific way of handling static assets (CSS files, images, audios). You can learn more about correct way of doing things on official webpack documentation.

PWA

This is a PWA. Don't forget to check what is inside of your service-worker.js. It is also recommended that you disable service worker (or enable "Update on reload") in browser dev tools during development.

Assets

Assets (icons, splash screens) source images located in assets-src folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:

framework7 assets

Or launch UI where you will be able to change icons and splash screens:

framework7 assets --ui

Documentation & Resources

• Framework7 Core Documentation

• Framework7 Icons Reference

• Community Forum

Support Framework7

Love Framework7? Support project by donating or pledging on patreon: https://patreon.com/vladimirkharlampidi

digihymnal's Issues

option to hide chords

There are long gaps between the lyric sentences, even when not selecting chords or notation. Is it possible to bring it together?

Follow musical norms when Transposing

this will require more research
Flats should stay flat, sharps stay sharp?

Generally people may prefer flat rather than sharp

Line form hidden

Text is hidden

Song page cleanup

a. verses are not laid out cleanly
b. where to put the 'edit line' button/link? for each line
c. is there a better place to put the "Edit Song?" (top right orange button)

Switch language of current song.

Add options to show the current song in any of its available language. Show to languages at the same time.

Line Edit Critical Feature

We need a multi-knob range slider.
It needs to increment over the characters in the line,
while it 'looks' like it is over the top of that character, or at least matches how it will look on the song page.

https://refreshless.com/nouislider/examples/

Add UI Translations

The user interface currently has 2 languages. Need to add translation for other languages.

    "Digital Hymnal": "Digital Hymnal",
    "Search": "Search",
    "Cancel": "Cancel",
    "Choose a language": "Choose a language",
    "Back": "Back",
    "Key": "Key",
    "Chords": "Chords",
    "Number Notation": "Number Notation",
    "Intro Verse": "Intro Verse",
    "Main Chorus": "Main Chorus",
    "Chorus": "Chorus"

Where to put "add new song"

Right now we have to scroll to the far bottom of the app to create a new song.
It should be in a side pane? or menu

There should also be an option for uploading a text file in the same area (functionality to be added later)

Sliders are destroyed after saving when there are more than 2

after

Prettyify Edit Song Metadata

a. song titles (and all the translations thereof) should be in a box so they're visually separate from the single-language things
b. verse labels might also need to be seperate???
c. where to put that save button?
d. we need a language list

e. clean up the add languge button

Double column view

If the screen is wide enough, show two columns worth of verses.

If it is not, maybe allow swiping to the side to show another verse.
As scrolling is simply not workable for someone playing an instrument

Support number notation

Update old view

• remove numbers from chord view
• adjust parser
• Create new Dedicated view
• • Save
• • add new number
• • delete last
• • edit text (???)
• • Upload new note string
• • Edit a single note's string
• Upload a string of characters, parse them into number notation

We store

• Characters
  String.fromCharCode(173)
  '­'

Hidden processes

• De-parse Chords
• Re parse CHORDs
• De-parse Numbers
• Re parse Numbers

Post the newly updated localForage to the server

@wongpratan

At this point, I have just updated the local db to match the user's edits.

What do we need to do next to save it?

digihymnal/src/pages/line-edit.f7.html

Line 418 in ed39682

// TODO @pong send changes to server

Language list?

There should be a list of valid languages on the server

• A song can have a valid language added to it
• We can add language options on the server

Add Verse/split verse

Add a verse at end of song
Split existing verse into two

chord placment on nouislider bug

chord placement does not reflect reality

Add ability for admin to change ID of verses: can set to choruses and bridges

If import lacks it, a user in our system should be able to read a verse, and then change the in-song ID of that from {verse:"Verse 2"} to... {verse:"Chorus"} or {verse:"Bridge"}

Setup the Server

Setup a server to host the app.

Improve number notation display

We currently use Unicode symbols for the number notation as a proof of concept. Use the Notes truetype font as it should be able to display the number notation correctly.

Also if possible support changing 1-8 in the notation, with d r m f s l t d as this is used in some minority languages.

Import text lyrics

Add a interface to import lyrics from a text file. Allow users to split the phrases into verses and chorus.

Worship leader Create song list

Allow a user(?) to create a list of songs
And those songs offer the option to
Arrange the verses from each in order
Then
That list can be shared via a link/qr code

Edit song's metadata

Form is in place, just needs to be hooked up to dataManager.js

OnSong Import Multiple Languages

Modify OnSong import script to load multiple languages of the same song. Discussed using directories to group the OnSong projects by song. Need to rename files to include a tag so we can can determine language.

PowerPoint view

User, when using a leader's created list
Has a view that allows
One-click advancing a "slide"

This slide can increase/decrease the zoom.

The user can jump to 'chorus', next verse, or previous verse easily (hot key?) or buttons at bottom of screen

This view will never need chords

Option to not have chord at start of line

• Validation allows first chords to be blank
• If chord is blank, don't show in song view

Allow musicians to create a set list

Musicians can create an order list of songs in preparation for an event. For each song they can adjust the verse/chorus order. Allow a set list to be shared.

Delete line

This process is 'in place' but it needs

• A confirmation prompt
• TESTING

Authentication

Only allow authenticated users to edit

Add a song editor

The song editor, used for adding new songs, adding new translations, fixing/adding chords and notation.

WYSIWYG - Drag and drop chords, adjust position relative to lyrics.

• Can select a line
• Can edit all elements of that line
• Can navigate to other lines
• Save button
• Button triggers a save to local storage
• Local storage sends to server...
• Drag and drop chords
• add translations

songIds are not checked very well

I am relying on having all songs on the client, so that when they insert a new one it can check if that ID is claimed already.

This system should be more robust

Convert app to edit mode by using hidden code

Or some other less cool authentication method

Exporting songs

Allow songs to be exported, as ppt or pdf. Can choose language, chords, etc.

Delete Verse - test

In place, needs

• Confirmation prompt
• TESTING PLEASE

Json button

upload/download json option

Edit Song options

Move features to song view so user sees their changes immedinatly

• Add verse
• Split verse
• Add line
• Delete line
• Delete Verse

This feature could really use a global variable for the currently selected song.
Would allow user to switch between editing chords and editing the song itself

• gloabal variable
• • song
• • isDirty 'saveable'
• update gloval variable when song first opened
• on back, check if song has been changed, Confirm save or discard changes
• Show save button when user makes change, hide after save done

Clean up UI

• Why are popups not working?
• Text floats up
• Arrange edit buttons better?
• Float chords?
• make text edit option more obvious
• Make edit popup nicer

Popup are not working
#42

Text floats up

Arrange edit buttons better?
Perhaps in a square before the line?

float chords
Chords are overlapping eachother when they are too close

In this case especially, they should float out into empty space after the line

Make text edit option more obvious
Each of these is a link to open a text editing popup

Edit popup
This could be much nicer. It is on both song-view and line-edit

Edit text

Add Line

Add line at end of song
Add line at end of verse

Add line in middle of verse?

navigate via pages rather than scrolling

https://github.com/Nodlik/StPageFlip

Need to group things together under "my-page" divs

How many things gets grouped will depend on screen size
AND on user's zoom level

Should it be a user-determined list?
"Verses per page [ - ] [ + ] "

<div id="book">
    <div class="my-page" data-density="hard">
        Page Cover
    </div>
    <div class="my-page">
        Page one
    </div>
    <div class="my-page">
        Page two
    </div>
    <div class="my-page">
        Page three
    </div>
    <div class="my-page">
        Page four
    </div>
    <div class="my-page" data-density="hard">
        Last page
    </div>
</div>