YouTube Music-Video Plugin

Table of contents

• Overview
• Project Features
• Technologies
• Repo Setup
• Setting up the project
  • Frontend
    • Build the client
    • Build the single-spa root
    • Start the client
    • Start the single-spa root
    • Lint the Frontend
    • Running Tests and generating test coverage report
  • Backend
    • Run the Django Server
    • Pre-commit and lint the Backend
    • Running Tests
• Links to the project
• Status
• Contributing to the project

Overview

ZuriChat is an open source workspace app that provides the opportunity for people to network, collaborate, educate and learn remotely. It allows people to take their classroom everywhere, make learning fun, stay engaged and inspired with the virtual lounge and games.

One of its unique features are the variety of plugins designed to add functionalities such as tracking company expenses, sending information fast and smoothly, managing files and integrating tools all with ZuriChat.

This project is focused on the ZuriChat music plugin.

Project Features

The YouTube music plugin allows the users in the organization to add and play Youtube links.You can also chat in real time with other members of the organization.

• Add and Play Youtube music and videos.

• Chat in realtime in the music room.

• Song search and filter options.

• Like and unlike songs.

Technologies

*Note: This project was setup and developed on a system running Windows 10. The stacks used for the project include:

Repo Setup

To setup the repo, first fork the Zurichat YouTube Music, then clone the forked repository to create a copy on the local machine.

$ git clone [email protected]:pauline-banye/music_video.git

Change directory to the cloned repo and set the original Zurichat repository as the "upstream" and your forked repository as the "origin" using gitbash.

$ git remote add upstream [email protected]:zurichat/zc_plugin_youtube_music_video.git

Setting up the project

The first step requires the download and installation of Python 3.9 and a check to confirm that pip and the necessary dependencies are properly installed.

After the installation of the Python program, setup the project environment with pip and virtualenv in the command prompt, powershell or gitbash terminal. Virtualenv helps to create an isolated Python environment containing all the packages necessary for the project.

*Note:

• This project was setup using the gitbash terminal. Some of the commands used do not work with command prompt or powershell.

• If a "pip command not found error" is encountered, download get-pip.py and run phython get-pip.py to install it.

$ pip install virtualenv

Navigate to the cloned local project folder. Create a virtual environment folder and activate the environment by running the following commands in the gitbash terminal.

$ python -m venv venv
$ source venv/scripts/activate

Once the virtual environment is active, the next step is the Django installation. Django is an open source Python web application framework thats helps with the rapid development of secure websites.

$ (venv) pip install django

After installing Django, install Django REST framework in the gitbash terminal. The Django REST framework is a flexible toolkit for building Web based APIs. The REST framework was used for the creation of APIs, serialization and the authentication process for this project.

$ (venv) pip install djangorestframework

Install all the necessary dependencies for the project. A few of them are listed below.

An exhaustive list can be found in the requirements.txt file included in this project. The modules can be 'batch installed' using the pip install -r requirements.txt command.

Frontend

• Build the client

  $ cd server/client (frontend folder)
  $ yarn
  $ yarn build
  

• Build the single-spa root

  $ cd root
  $ yarn
  $ yarn build
  

• Start the client

  $ cd server/client (frontend folder)
  $ yarn
  $ yarn start
  

• Start the single-spa root

  $ cd root
  $ yarn
  $ yarn start
  
  - Frontend devs: You don't need to start django server. Only start the client and single-spa root to view your edits.
  

• Lint the Frontend

  $ cd server/client (frontend folder)
  
  $ yarn lint --fix (or yarn lint --fix . to fix all files)
  

• Running Tests and generating test coverage report

  $ cd server/client (frontend folder)
  
  $ yarn test
  
  - To view coverage report : inside test-coverage/icov-report there's an
  index.html file, open this file in a browser to view coverage report.
  

Backend

• Run the Django Server

  $ cd server (Backend folder)
  
  - Create .env file in config and specify variables for Secret Key and system environment using the sample.env file
  
  $ python manage.py runserver
  

• Pre-commit and lint the Backend

  $ cd server (Backend folder)
  
  $ pre-commit run (or pre-commit run --all-files to check all files)
  
  - Backend devs: You don't need to run yarn start to test your endpoints.
  

• Running Tests

  $ cd server (Backend folder)
  
  $ python manage.py test music/tests
  

Note to the DevOps

• Build first before starting django server

Links to the project

Local server: " rel="nofollow" target="_blank" >http://localhost:22672/music

Zurichat Staging site: " rel="nofollow" target="_blank" >http://staging.zuri.chat/music

Zurichat main site: " rel="nofollow" target="_blank" >http://zuri.chat/music

Live site: " rel="nofollow" target="_blank" >http://music.zuri.chat/music

Status

This project is a work in progress and is currently under development.

Contributing to the project

If you find something worth contributing, please fork the repo, make a pull request and add valid and well-reasoned explanations about your changes or comments.

Before adding a pull request, please note:

• It should be inviting and clear.
• Any additions should be relevant.
• It should be easy to contribute to.
• Urls marked * are temporarily unavailable. Don't delete it without confirming that it has permanently expired.

This repository is not meant to contain everything. Only good quality verified information.

All suggestions are welcome!

Readme created by Pauline Banye