Giter VIP home page Giter VIP logo

bible-karaoke's Introduction

Bible Karaoke

Create 'karaoke-style' videos of Bible passages to help users become comfortable at reading the Bible in their own language.

Users

Head on over to biblek.info to download and get started.

Developers

Clone this repo:

git clone [email protected]:sillsdev/bible-karaoke.git bible-karaoke
cd bible-karaoke

Install the dependencies:

npm install

Running AVA Unit and Integration Tests

We use the AVA Node.js test runner. When testing a single code unit use a unit test. When testing more than one unit of code or if the test takes time to execute then use an integration test. By default, the commands below will NOT execute tests in watch mode. If changing branches you may have to clear out *.spec.js and *.integration.js files.

For unit tests run:

npm test

For integration tests run:

npm run integration

Writing AVA Unit and Integration Tests

Unit tests are placed in a <unit>.spec.ts file alongside the <unit>.ts file under test. Integration tests are placed in a *.integration.ts file. Our project looks for compiled test files ending in \*.spec.js or \*.integration.js depending on what type of test is being run. If a test is more complex with sample data and/or scenarios, a test folder can optionally be created with additional supporting files to keep things tidy.

Debugging AVA Test Files in VS Code

  1. Open the test file in VS Code.
  2. On the side bar select the Run and Debug view.
  3. Select the configuration named Debug Ava test file and click Start Debugging (F5).

Learn more about VS Code debugging.

Debugging/Running the application

npm run electron-dev

Debugging the Node Backend in VS Code

We provide a debugging configuration for VS Code (defined in .vscode/launch.json)

  1. set a breakpoint in VS Code somewhere in the Node backend JS code (not front-end React code)
  2. npm run electron-dev (the Node debugger listens on port 9229)
  3. In VS Code, run the Debug Configuration named Node Backend. The VS Code status bar will turn orange when it is successfully attached to the debugger
  4. Use the Bible Karaoke application - the application will pause when a breakpoint is hit in VS Code

Debugging the React Frontend in VS Code

TODO

Build and package the app manually for testing:

# Windows:
npm run electron-pack-win
# Mac:
npm run electron-pack-mac
# Linux:
npm run electron-pack-linux

Releasing

  1. Create a branch of the form release/*, e.g. release/v0.3.5, or release/v0.3.5-rc1.
  2. Update the version in your project's package.json file (e.g. 0.3.5).
  3. Run npm i to update package-lock.json.
  4. Update CHANGELOG.md with changes in this release.
  5. Commit these changes to your release branch.
  6. Tag your commit. Make sure your tag name's format is v*.*.*.
  7. Create a new draft GitHub Release, ensure the following are included:
    • a Tag version, e.g. v0.3.4.
    • a copy of the change log.
    • add the ffmpeg license instructions copied from a previous release.
  8. Push the tag then the commit to GitHub.
  9. Once the build Action has finished, it will add build artifact files to the draft release. Remove the .blockmap and .yml files and leave the .exe.
  10. Publish the release.
  11. In Team City, on the Bible Karaoke project, manually run the Sign Installer build.
  12. Replace the GitHub release .exe with the signed one from Team City downloaded from the Artifacts folder (keep the original GitHub filename).

Style Guides

We use ESLint and Prettier with a pre-commit hook. If you use VS Code, install the recommended extensions from this repo and formatting will happen on save.

Test Data

Developers can download test data (permission must be granted by an admin) from Google Drive

https://drive.google.com/drive/u/1/folders/1rTCkMPA3ZoOn6dXhJHuYTn6QdAKfBj0X

For Windows,

SAB projects are assumed to be located in this folder:

Documents\App Builder\Scripture Apps\App Projects\

HearThis projects are assumed to be located in this folder:

C:\ProgramData\SIL\HearThis\

bible-karaoke's People

Contributors

irahopkinson avatar grahammcculloch avatar jcfarrow avatar megahirt avatar wongpratan avatar nh758 avatar dependabot[bot] avatar echu888 avatar hiro-nakamura avatar iamam34 avatar jamesduncan avatar gitric avatar rdai avatar guyyoo avatar hahn-kev avatar lgtm-migrator avatar

Stargazers

Scott C avatar  avatar Janes Roberto avatar  avatar  avatar IsaacS avatar  avatar

Watchers

 avatar  avatar James Cloos avatar  avatar  avatar  avatar IsaacS avatar  avatar Andrew Dunbar avatar

bible-karaoke's Issues

Screenshots?

There is a lot of great software on here, but screenshots or videos would be helpful to see how it works or what it does.

Option to slow down speed of speech playback

Hello Chris,

I enjoyed the Bible Karaoke session today and thought I'd follow-up my question here if that's okay. It seems like an amazing tool for literacy learning IF the speed could be slowed down. Today, there were lots of solutions about slowing down the speed as is done on youtube. However, that solution would slow down the pronunciation of words which is not ideal.

Is there any way that the speed could be reduced by finding the silences between words and then increasing those? That would be a solution that would give the same speed for reading the word but slow the sentence speed down. Anyway, just an idea. This project has great potential for helping beginning readers - especially older people who think that they can't learn to read.

Thanks,
J

Add support for 'Intro' material

I tried out our recordings of Colossians, which HearThis numbers 0 (for the introductory material that is not part of the Bible), 1 (for chapter 1), 2, 3, and 4 (for chapters 2, 3, 4). Bible Karaoke numbers them 1-5 and no 0. I anticipate this being confusing for users. They might want to make a video of chapter 3, so they choose "3" but then they end up with a video that just contains chapter 2, and can't figure out why. If there would be a work-around that would allow what HearThis calls "0" to be labelled as "Intro" or "Introduction" or even "0" and the other chapters to be numbered 1-4, that would be really helpful.

Upgrading to Electron 9.0+ requires changes to IPC method

Behavior Changed: Sending non-JS objects over IPC now throws an exception

In Electron 8.0, IPC was changed to use the Structured Clone Algorithm, bringing significant performance improvements. To help ease the transition, the old IPC serialization algorithm was kept and used for some objects that aren't serializable with Structured Clone. In particular, DOM objects (e.g. Element, Location and DOMMatrix), Node.js objects backed by C++ classes (e.g. process.env, some members of Stream), and Electron objects backed by C++ classes (e.g. WebContents, BrowserWindow and WebFrame) are not serializable with Structured Clone. Whenever the old algorithm was invoked, a deprecation warning was printed.

In Electron 9.0, the old serialization algorithm has been removed, and sending such non-serializable objects will now throw an "object could not be cloned" error.

This affects us, as we see the error "object could not be cloned" when trying to start the renderer, which uses IPC. We can use Electron 8.0 as a transition but to go beyond 8 requires the code changes recommended above.

Add reset to default directory in the Settings drawer

One of the nice features of BK is that it just knows where your HearThis data is (assuming HearThis was installed in the default folder). In #74, if a user accidentally (or even intentionally) changes the directory location it would be helpful if they could set it back to the OS default location.

Error trying to read audio length

screenshot for chris

This was reproduced multiple times on a Windows 7 computer. Here's what I tried, but none of these steps got past the error:

  • closing HearThis (I thought this would work since I encountered a similar error like this on another machine and resolved it by closing HearThis)
  • restarting Windows 7
  • disabling Panda Dome antivirus and Panda USB

I copied the HearThis project folder to another computer and it didn't have this issue (but failed on a different step)

Color picker expansion

To make the color picker for the background (and font and speech bubble) even more useful for the average user who does not know how to look up number codes for colors or even that code numbers for colors exist, I suggest:

(a.) Add a few more color options to the current ones (my team would like some in the browns/natural colors range if possible)
or
(b.) Add a way to access a color palette selector that already exists in Windows (I seem to notice a number of programs pull from a similar selector that looks something like this:
image
or, even more options:
image

(screenshots from LibreOffice)

Provide UI to control speed of highlight animation

The user needs to be able to control the speed of the highlight animation, for example how long it stays on the word. The general feedback from users is that it is too "fast" or "chunky". The highlight needs to stay on the word longer and fade away smoother I believe.

Remember your font selection between uses - Feature request

This is not a major issue, just a convenience thing. I am wondering if there is any way that the program could remember which font you used last time you made a video so you don't have to go through the list and find it again.

It would also be nice for it to remember your other design selections, too, come to think of it.

Section Headings need to be bold

From L, our first customer:

"As for our team, I feel like the software is not quite to the point of being usable without the section headings being bold (which is something I can't easily fix myself) "

UI - Make horizontal section header wider and clickable

In the user interface, it would be helpful if the area in which you can click around the words "1. HearThis" and "2. Display" would span the entire length of the window area (up to or even including the check mark that appears there after proceeding to "Next".

Note: this issue is MUCH lower priority than getting bold section headings and adjusting the animation, and for that reason I hesitated to even add it as an issue.

Need to clear the cache?

I think this is a bug report.
When I tried to make a video of Ephesians Intro in BK 0.3.2, I had first made a video of Ephesians 1, then went back and chose "Intro" and made another video. The resulting video had the audio for the Intro, but the text that appeared was the text of Ephesians 1 still.
Closing the program, re-opening it, and then making the video again solved the problem. However, it would be more convenient not to have to do that between every video.

BK not pulling the same text as HearThis

I am getting different text in my video than what I see in HearThis. The text in the BK video is older, outdated, and contains lots of spelling errors that have since been fixed in Paratext, which is where HearThis is pulling from.

0.3.3 Checkmark in UI step 2 turns green too soon

This is an extremely minor issue, and possibly a matter of opinion.
I noticed that the checkmarks on the right side of the UI seem to appear "checked" (turn green) a little too early for Step 2. For example, in the screen shot below you can see I finished step 1, and am working on step 2, but before I have even done anything in step 2, the check mark has already turned green.
I would expect it to turn green only after I push the "Next" button. But perhaps the designer intended it to mean "you are allowed to go on to the next step if you wish"?
Anyway, there is my view/understanding as a user.
Thanks!

image

Silent audio at the beginning and ending of clips affect timing

If the source audio has any silent audio at the beginning or ending of an audio clip it affects the word highlighting.

I have an ffmpeg command that will trim audio below a specified dB level at the beginning and ending of an audio clip. My local tests proved to help the timings so I will look next into adding it to the audio timings process.

Dealing with no chapter announcement

When I make the Ephesians 1 video, there is no chapter announcement in the audio, and so the highlighting animation is all off by a whole paragraph/sentence from the get-go.
For Colossians, there is a chapter announcement, so there is no problem.

Use chrome.exe that is bundled with node_modules/puppeteer

When I try to generate a video, I get this error:

Could not find Chrome

Error: Could not find Chrome at module.exports.record (C:\Users\Samsung\AppData\Local\Programs\bible-karaoke\resources\app.asar\build\cli\lib\rendering\record-frames.js:10:15) at processTicksAndRejections (internal/process/task_queues.js:85:5) at async render (C:\Users\Samsung\AppData\Local\Programs\bible-karaoke\resources\app.asar\build\cli\lib\rendering\render-frames.js:45:5)

Does that mean Chrome is a prerequisite for Bible Karaoke? I don't have it installed, but use it as a portable app from a Veracrypt hidden container, for security reasons.

W

Chapter number announcement in local language

I think this was determined to be an issue that needed to be dealt with by the HearThis team, technically, but I am putting it here because it is something that needs to be dealt with in order to make the UI ready for use by the average computer user. And in case there is a possibility that it could be dealt with by BK instead.
The word "chapter" is pulled from somewhere within HearThis. However, the speaker of the local language announces this in their own language. It isn't a problem in SAB because there is no word "Chapter" that appears, but in the video that is output from Bible Karaoke, "Chapter {1}" appears in English.
I like the fact that the text appears at all, we just need to figure out how to make it easier for it to appear in the local language.

Display estimated conversion time

From Lisa:

After the user clicks "Make My Video," I think it would be helpful to have a message that helps the user understand approximately how long it will take. I know this is variable depending on the hardware on the person's machine, but for local, not so computer-savvy users, they need some indication that it will take more than 3 seconds. Maybe something like, "Please wait, this will take 5-10 minutes, depending on your computer" (or whatever you estimate it to take).

Phantom text appearing in video - related to lack of chapter announcement

In the Ephesians video output from 0.3.3, I initially tried chapter 5 but got an error, so I switched to chapter 3. The resulting video for chapter 3 contains the section heading and the first verse from chapter 5, then continues on with chapter 3. The audio only is chapter 3 audio.

Kudos -- The karaoke highlighting animation does a pretty good job of figuring out within a few words that the initial text is not right, and skips down to the correct text.

Highlighting animation lagging behind audio at the end of sentences

I realize this is probably a more difficult request, but the translators pointed this out when they saw a sample video I created, and I think bringing the accuracy in this area up would have a really good payoff.

The highlighting lagging behind the audio is a lot more noticeable than audio lagging behind highlighting animation.

It is not the end of every sentence, so I can try to do a little more observation to see if I can identify a pattern. I do know that for most languages in the world, this one included, the ends of most sentences will have lower relative pitch, lower volume, and slower rate of speech. So those might be someplace to start (since I don't know what kind of algorithms you're using on your end).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.