greenboard-lms / greenboardaudio-web

A storage cloud service for audio files

Flytrap

Flytrap is an audio cloud-based service for the Borum Ecosystem. The app consists of four main features:

• The ability to upload audio files to your account

• The ability to use simple audio editing tools such as trimming

• The ability to link and share these audio files

• The ability to record audio directly

Google, Microsoft, and Apple give users the ability to store documents, spreadsheets, and slideshows quite effectively, but not one of them offers the service both at zero price, honors consumer privacy, and offers the product to users not already in that ecosystem. Flytrap uses some features of G Suite plus simple editing tools that Google Drive does not supply.

Flytrap is named after the Venus Flytrap and is part of the Borum Ecosystem.

Usage

To use this project, go to https://audio.borumtech.com

Installation

The Flytrap Web app is a lightweight PHP application that only requires a web server and a few tools that are strictly for development. PHP is used for the front-end and the back-end, pure CSS is used for styling, and JavaScript is used for API requests, interactivity, and a little bit of responsiveness.

In order to run this project locally and see changes, you need to install the following prerequisites:

• The uglifyjs-folder package

uglifyjs-folder is an NPM package meant for minifying the JavaScript files. To install it, run npm i uglifyjs-folder -g.

Note: The -g flag is necessary because this is not a Node project, and the JavaScript is run directly in the browser

To run the PHP web server, you have two options:

• Install XAMPP, WAMPP, AAMPP, or LAMPP or manually download Apache, MySQL, and PHP. Then, start the web server and open localhost in your browser. You may have to update the DocumentRoot in the httpd.conf file. This will run on port 80.

• IN DEVELOPMENT Use PHP's built-in server and the router script /index.php. You can serve this on any port of your choosing

Built With

• PHP - the main scripting language used for content and server-side scripting

• JavaScript - another scripting language used for interactivity and API requests

• VSCode - the IDE used

• uglifyjs-folder - NPM package for minifying JavaScript scripts/ folder

Contributing

Thanks for considering contributing to Flytrap! To start contributing, fork and clone the project.

git clone https://github.com/Borumer/Flytrap

Then follow the Installation steps outlined above.

Finally, read the Contributing Guide for information on how to connect the node files

Author

I, Varun Singh, started this project, engineered the REST API, designed the logo, wrote the scripts, and own the domain on which the site is deployed. Flytrap is part of the Borum Ecosystem

Copyright 2021 Borum Tech

greenboardaudio-web's Issues

Search for audio files

When a user has a hugely populated Flytrap of audio files (and folders), they may want to search for files.

The search bar at the top is supposed to accomplish this. The CSS, HTML, and JavaScript part is done. Now the function part needs to be worked on.

There should be a separate link - http://audio.bforborum.com/search - that the user is directed to when they press ENTER, but before this, it should update automatically with AJAX and a key event listener.

Delete folders

Add the ability to delete folders.

Play audio

Using the unique alpha id, use a proxy PHP file to get the audio uploads, which from now on should be named the unique alpha id - not the name and not the numerical id because the user can rename it and for security reasons. In an <audio> tag linking with a <source> tag to the proxy, the audio file should be playable back.

Share folders with others

Just like #11, add the ability to share folders.

Link audio files with unique hash

A unique hash, like YouTube's and Google Docs's, that identifies the audio file id.

Support for Safari

Toggle between shared, owned, and all audios

The dropdown menu for Shared, Owned, and All audios currently does not complete the task of changing which files are shown to the user.

• Shared Audios should show only audio files that were shared with the user by another Flytrap user
• My Audios should show only audio files that the user created through recording or uploading
• All Audios should show both Shared Audios and My Audios

Share audio files with others

A share icon/button lies below every audio file. The share button should let the user give other Flytrap users access to an audio file. This audio file will show up in those users' Shared Audios and All Audios. To share,

1. Click the share button for an audio file
2. In the popup, type a way of a identifying the person
3. Click share

User-friendly upload file interface

Directions to upload interface

0. Hover over "+"
1. Click New Audio button
2. On the right half, see "Upload mp3, wav, m4a"

Feature Request

After uploading, the following should occur:

3. The popup closes
4. The new file(s) is (are) shown with the same name as it was on the computer

Delete audio files

Currently, a trash can is under each audio file, quite obviously for deleting the audio file.

The process of deletion should be as follows:

0. Log in
1. Click the trash can of a certain audio file
2. A popup shows up prompting the user if he or she is sure he or she wants to delete it
3. If the user clicks...
   a) Delete, it is deleted permanently and the popup window disappears
   b) Cancel, the popup window disappears

View shared folders

Now that the ability to share folders is in effect, we should be able to see those shared folders.

Use the above interface and remove the filters

Sort listings of audio files

Add the ability to sort audio files and folders by

• The time the file was created (Descending)
• The name of the file (alphabetical and reverse alphabetical)

The files must remain below the folders

Log in and register for a Flytrap account

1. From the home page, the user should click Login
2. The user can register or register with Borum
   • Registering with Borum leads to popup window
   • Registering and logging in are on the page and have separate submit buttons
3. The user can then log in or log in with Borum
   • Logging in with Borum leads to popup window
4. After logged in, the original main page with search bar and plus shows up and the user can use Flytrap

Ability to drag files and folders into folders

Shows [object Object] when creating new folder

User-friend "Record directly" interface

Super Flytrap

Directions to recording interface

0. Hover over "+"
1. Click New Audio button
2. On the left half, see "Record directly"
3. Click (nothing happens)

Feature Request

• A form for the name of the file and possibly a description (secondary priority)
• Submit button within the form
• Redirected to the file

Flex and list view for files and folders

Flex view is the layout where a thumbnail for the Flytrap files (and folders) are shown and it wraps for every say 3 files (this number depends on the screen size).
List view is the layout where, similar to a table, each file is put one below the other. The folders are listed all above the files. Additionally, a timestamp of when the audio was last modified and the owner is shown in separate columns.

• Add both these views
• Give a user-friendly way to toggle between them