Nipper

🌶 💽  YouTube playlist (& video) ripper

Parse YouTube video or playlist link, fix inaccurate metadata (cover, artist & song), choose export codec (mp4, webm, aac, mp3 or ogg), and download on-by-one or zipped (best stream chosen by default) ! Every process are made directly in the browser, like stream downloading or converting, with the help of Kagami/ffmpeg.js ❤️

Currently, covert art support is limited to mp3 codec.

Scripts

• dev start a development server at :8000
• proxy start proxy at :7000 (required)
• doc start a documentation server at :3000
• test run linter, unit tests and e2e tests
• build build a production bundle into dist folder

Configuration

Copy .env.example to .env and configure it as you wish

# YOUTUBE SERVICE:
# Go to [Google Cloud Platform](https://console.cloud.google.com/apis/credentials),
# Enable "Youtube Data API v3" service
# Create "API key" credentials
# Restrict API key by domain name to secure access
YOUTUBE_API_KEY=''

Roadmap

• Write e2e tests with Cypress
• Add badges (like travis and standard with Shields)
• Configure https
• Record performances, memory, cpu, time for big playlist dig action
• Create redux + rxjs workflow diagram
• Use Side Sheet over Modal for configuration

Database

{
  tracks: {
    'youtube#track#_IS208pkFxs': {
      uri: 'youtube#track#_IS208pkFxs',
      service: 'youtube',
      kind: 'track',
      id: '_IS208pkFxs',
      title: 'Midival Punditz - Raanjhan',
      author: 'inMindbodysoul',
      link: 'https://youtu.be/_IS208pkFxs',
      channel: 'UCgEmK9phN-_Ty7d_Jv6BQTg',
      description: 'Two musicians, Gaurav Raina and Tapan Raj, contributing to the evolution of music.. featuring Abida Parveen',
      thumbnail: 'https://i.ytimg.com/vi/_IS208pkFxs/sddefault.jpg',
      duration: '06:05',
      artist: 'Midival Punditz',
      song: 'Raanjhan',
      attachments: {
        'cover.jpg': [Blob],
        'track.mp3': [Blob],
        'track.aac': [Blob],
        'track.ogg': [Blob],
        'track.mp4': [Blob],
        'track.webm': [Blob],
      }
    },
  }
}

State

{
  api: {
    ready: true,
    broken: false
  },
  digger: {
    'youtube#playlist#PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF': {
      uri: 'youtube#playlist#PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF',
      service: 'youtube',
      kind: 'playlist',
      id: 'PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF',
      done: true,
      error: null
    }
  },
  downloader: {
    default: {},
    zip: {
      'youtube#track#Qjp4uxGH9jI': 27,
      'youtube#track#sZUp9rXAK50': 81
    }
  },
  library: {
    'youtube#playlist#PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF': {
      uri: 'youtube#playlist#PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF',
      service: 'youtube',
      kind: 'playlist',
      id: 'PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF',
      title: 'INDIA',
      author: 'Vincent Anthony',
      link: 'https://www.youtube.com/playlist?list=PLcyIgDOXdSITaK7lgF_Cc_k2RqV3OlLeF',
      channel: 'https://www.youtube.com/channel/UC4T79MEKtNfa-PKpgwF0y9g',
      description: '',
      total: 8,
      thumbnail: 'https://i.ytimg.com/vi/a4F1Dm9Fat8/hqdefault.jpg',
      synced: 8,
      tracks: [
        'youtube#track#_IS208pkFxs',
        'youtube#track#a4F1Dm9Fat8',
        'youtube#track#Qjp4uxGH9jI',
        'youtube#track#sZUp9rXAK50',
        'youtube#track#x9BUOcEUCAk',
        'youtube#track#428Orzv3grA',
        'youtube#track#M7gDEwUb4_Q',
        'youtube#track#qhWlptdnLBs'
      ],
      latest: 1540085743390
    }
  },
  preferences: {
    format: 'mp3'
  },
  selection: [
    'youtube#track#Qjp4uxGH9jI',
    'youtube#track#sZUp9rXAK50',
  ],
  toaster: {}
}

Research

• How to improve metadata writing ?
  • Codecs
    • Audio : mp3/mp3, m4a/aac, ogg/vorbis, opus/opus
    • Video : mp4/mp4, webm/webm
  • FFMPEG
    • mp3 : ffmpeg -i infile.mp3 -i cover.jpg -map 0 -map 1:0 -c:a copy -metadata artist="$ARTIST" -metadata title="$SONG" outfile.mp3
      • title
      • author
      • cover
    • aac : ffmpeg -i infile.m4a -c:a copy -metadata artist="$ARTIST" -metadata title="$SONG" -f mp4 outfile.m4a
      • title
      • author
      • cover
        • Look at mp4box.js
    • vorbis : ffmpeg -i infile.ogg -c:a copy -metadata artist="$ARTIST" -metadata title="$SONG" outfile.ogg
      • title
      • author
      • cover
        • Look at vorbiscomments: METADATA_BLOCK_PICTURE
    • opus : ffmpeg -i infile.opus -c:a copy -metadata artist="$ARTIST" -metadata title="$SONG" outfile.opus
      • title
      • author
      • cover
        • opus metadata is like ogg (cf. vorbis)
  • Unable to build ffmpeg.js with cover art support, need to compile zlib with emscripten (for mp3)
  • ffmpeg doesn't support cover art for ogg (vorbis, opus) and aac ffmpeg metadata
    • tinytag could be an alternative
    • taglib too

Helpful

• Three Ways to Title Case a Sentence in JavaScript
• Making a case for letter case
  • Or, "Which words I should ignore when capitalize a string ?"

Alternatives

• Videoder

Thanks

• Nipper the dog
• Logo from iconmonstr
• Inspiration for logo animation
• SVG logo animation
• Background pattern
• UnDraw illustrations