Skip to content
Animesh edited this page May 1, 2024 · 10 revisions

Welcome to the ytify wiki!

The workings of the entire project will be documented here for future contributors & maintainers.

Building

API handling

Playback

Audio Events

Library

Queue

Icons

To modify icons in the project, one has to first sync with the full icon base by

  • Visiting https://remixicon.com/collection
  • Press Back to go to https://remixicon.com
  • Start Searching & Selecting all icons from the remixicon.css file.
  • When you are done, go back to the /collection by pressing Forward.
  • Now Press on Download Fonts Button which will download a zip.
  • Extract only the remixicon.css and remixicon.woff2 files.
  • Now you can replace them with the original files in the project.

Featured Playlists

Dataset / Raw

Outline

  • It uses a basic txt formatting not json for efficiency.
  • A new playlist data appears after every blank line.
  • Each data item is separated by a line.
  • The first item is playlist name.
  • The second item is playlist id.
  • The third item is playlist thumbnail id.

How to add your own playlist

  1. Visit your desired ytm site, Beatbump recommended.
  2. Search your desired playlist and open it.
  3. Get the playlist id from the link of the playlist.
  4. Get the thumbnail id from the image link of the thumbnail.
  5. Add to the database by following the outline above.

Develop

Here's an example implementation in js that converts the text to array to an array of objects.

fetch('https://raw.githubusercontent.com/wiki/n-ce/ytify/ytm_pls.md')
    .then(res => res.text())
    .then(text => text.split('\n'))
    .then(data => {
      const array = [];
      for (let i = 0; i < data.length; i += 4)
        array.push({
          "type": "playlist",
          "name": data[i + 1],
          "uploaderName": "YouTube Music",
          "url": '/playlists/' + data[i + 2],
          "thumbnail": '/' + data[i + 3]
        });
       // do whatever with array
    });

More...