Live screenshots of steps 2 to 4 #50

Merged
Tirsvad merged 1 commits from live-steps-2-4-screenshots into main 2026-10-28 08:13:46 +01:00
19 changed files with 74 additions and 18 deletions
Showing only changes of commit ed10c5a71d - Show all commits
+20 -6
View File
@@ -75,6 +75,8 @@ Leave out `[dev]` when you only want to run the program.
The cookies expire after a while; repeat the steps to get a fresh file.
If `--check-login` says `Expecting value`, the file holds entries that are not request headers (a Chrome copy can add `Request URL`, `Decoded`, `music.youtube.com`, a path entry or `content-encoding`). Copy only the **Request Headers** block, or use Firefox's *Copy Request Headers*, and create the file again.
## ▶️ Run
The program is added step by step (one pull request per lecture step):
@@ -82,9 +84,9 @@ The program is added step by step (one pull request per lecture step):
| Step | Status |
| --- | --- |
| 1. Scrape the Billboard Hot 100 | done (below) |
| 2. YouTube Music authentication | code done; live screenshot waits for `browser.json` |
| 3. Create the playlist | code done; live screenshot waits for `browser.json` |
| 4. Search and add songs | code done; live screenshot waits for `browser.json` |
| 2. YouTube Music authentication | done, with a live run screenshot |
| 3. Create the playlist | done, with a live run screenshot |
| 4. Search and add songs | done, with a live run screenshot |
### Step 1 - Scrape the Billboard Hot 100
@@ -112,7 +114,11 @@ python -m musical_time_machine --check-login
It prints `Found N playlists in your library.`. With no or an expired `browser.json` it prints the renewal steps and exits with code 1 instead of a stack trace. `--browser-file PATH` uses another file.
The screenshot below shows the run **without** a `browser.json` and the tests that use a fake YouTube Music service. A screenshot of a live login is added once the file exists (issue 22 stays open until then); the file holds personal cookies and is never committed.
A live run with the author's `browser.json` (the output shows only the count, never playlist names):
![Live login check](docs/wiki/images/step2-live-check-login.png)
The file holds personal cookies and is never committed. The next screenshot shows the run **without** a `browser.json` and the tests that use a fake YouTube Music service:
![Login check without browser.json and the step 2 tests](docs/wiki/images/step2-check-login.png)
@@ -124,7 +130,11 @@ python -m musical_time_machine --create-playlist
It asks for the date and creates the private playlist `YYYY-MM-DD Billboard 100` in your YouTube Music library. It first looks through `get_library_playlists()` for a playlist with the same title, so a second run for the same date creates nothing and says so.
The screenshot shows the tests of this step, which use a fake YouTube Music service (no account needed). A screenshot of the live playlist is added once `browser.json` exists (issue 27 stays open until then).
A live run with the author's `browser.json`: the first run creates the playlist, the second run creates nothing:
![Live: create the playlist twice](docs/wiki/images/step3-live-create-playlist.png)
The next screenshot shows the tests of this step, which use a fake YouTube Music service (no account needed):
![Tests of step 3: the playlist is created once](docs/wiki/images/step3-create-playlist.png)
@@ -136,7 +146,11 @@ python -m musical_time_machine
The full program: it asks for the date, scrapes the chart, creates the playlist (or reuses the existing one), then searches YouTube Music for each song (`yt.search(..., filter="songs")`) and adds the top result with `yt.add_playlist_items()`. A song that is not found or fails is skipped and the run goes on; the summary says how many songs were added and which were skipped. A failed login stops the run, because every following song would fail too. Use `--list-only` to print the chart without logging in (step 1).
The screenshot shows the tests of this step with a fake YouTube Music service. A screenshot of the live playlist is added once `browser.json` exists (issue 34 stays open until then).
A live run with the author's `browser.json`: all 100 songs were added:
![Live: the full program](docs/wiki/images/step4-live-add-songs.png)
The next screenshot shows the tests of this step with a fake YouTube Music service:
![Tests of step 4: songs are added and a failing song is skipped](docs/wiki/images/step4-add-songs.png)
+1 -1
View File
@@ -27,4 +27,4 @@ Alle konstanter ligger i `constants.py`. Testene bruger en gemt kopi af hitliste
## Skærmbilleder
Skærmbillederne af trin 1 er fra en rigtig kørsel. Skærmbillederne af trin 2 til 4 viser kørslen uden `browser.json` og testene med en falsk YouTube Music-tjeneste; rigtige skærmbilleder tilføjes, når forfatteren har oprettet `browser.json`.
Hvert trin har et skærmbillede af en rigtig kørsel. I trin 2 til 4 bruger den rigtige kørsel forfatterens `browser.json` (den offentliggøres aldrig), og et andet skærmbillede viser testene med en falsk YouTube Music-tjeneste.
+1 -1
View File
@@ -27,4 +27,4 @@ Setiap pemalar berada dalam `constants.py`. Ujian menggunakan salinan tersimpan
## Tangkapan skrin
Tangkapan skrin langkah 1 ialah larian sebenar. Tangkapan skrin langkah 2 hingga 4 menunjukkan larian tanpa `browser.json` dan ujian dengan YouTube Music tiruan; tangkapan skrin langsung akan ditambah apabila penulis telah mencipta `browser.json`.
Setiap langkah mempunyai tangkapan skrin larian sebenar. Bagi langkah 2 hingga 4, larian sebenar menggunakan `browser.json` penulis (ia tidak pernah diterbitkan), dan tangkapan skrin kedua menunjukkan ujian dengan YouTube Music tiruan.
+1 -1
View File
@@ -27,4 +27,4 @@ Every constant is in `constants.py`. The tests use a stored copy of the chart pa
## Screenshots
The screenshots of step 1 are a real run. The screenshots of steps 2 to 4 show the run without `browser.json` and the tests with a fake YouTube Music; live screenshots are added when the author has created `browser.json`.
Every step has a screenshot of a real run. For steps 2 to 4 the live run uses the author's `browser.json` (it is never published), and a second screenshot shows the tests with a fake YouTube Music.
+2
View File
@@ -43,6 +43,8 @@ python -m pip install -e ".[dev]"
Filen indeholder dine cookies: den ignoreres af git og må aldrig deles. Cookies udløber efter et stykke tid; gentag trinnene for at få en ny fil.
**Hvis `--check-login` siger `Expecting value`**, indeholder filen poster, der ikke er anmodningshoveder (en kopi fra Chrome kan tilføje `Request URL`, `Decoded`, `music.youtube.com`, en sti eller `content-encoding`). Kopiér kun blokken **Request Headers**, eller brug Firefox' *Copy Request Headers*, og opret filen igen.
## Kørsel
```bash
+2
View File
@@ -43,6 +43,8 @@ python -m pip install -e ".[dev]"
Fail ini mengandungi kuki anda: ia diabaikan oleh git dan tidak boleh dikongsi sama sekali. Kuki akan tamat tempoh selepas beberapa lama; ulangi langkah-langkah ini untuk mendapatkan fail yang baharu.
**Jika `--check-login` berkata `Expecting value`**, fail itu mengandungi entri yang bukan pengepala permintaan (salinan daripada Chrome boleh menambah `Request URL`, `Decoded`, `music.youtube.com`, satu laluan atau `content-encoding`). Salin hanya blok **Request Headers**, atau gunakan *Copy Request Headers* Firefox, dan cipta fail itu semula.
## Jalankan
```bash
+2
View File
@@ -43,6 +43,8 @@ python -m pip install -e ".[dev]"
The file contains your cookies: it is ignored by git and must never be shared. The cookies expire after a while; repeat the steps for a fresh file.
**If `--check-login` says `Expecting value`**, the file holds entries that are not request headers (a Chrome copy can add `Request URL`, `Decoded`, `music.youtube.com`, a path entry or `content-encoding`). Copy only the **Request Headers** block, or use Firefox's *Copy Request Headers*, and create the file again.
## Run
```bash
@@ -12,7 +12,11 @@ python -m musical_time_machine --check-login
Ved succes udskriver det `Found N playlists in your library.` Uden en gyldig `browser.json` udskriver det trinnene til fornyelse og afslutter med kode 1 i stedet for at vise et stack trace.
Skærmbilledet viser kørslen **uden** `browser.json` og de tests, der bruger en falsk YouTube Music-tjeneste. Et rigtigt skærmbillede tilføjes, når `browser.json` findes.
En rigtig kørsel med forfatterens `browser.json` (udskriften viser kun antallet, aldrig playlisternes navne):
![Rigtigt login-tjek](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step2-live-check-login.png)
Skærmbilledet viser kørslen **uden** `browser.json` og de tests, der bruger en falsk YouTube Music-tjeneste.
![Login-tjek uden browser.json og testene til trin 2](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step2-check-login.png)
@@ -12,7 +12,11 @@ python -m musical_time_machine --check-login
Jika berjaya, ia mencetak `Found N playlists in your library.` Tanpa `browser.json` yang sah, ia mencetak langkah pembaharuan dan keluar dengan kod 1, dan bukannya jejak tindanan.
Tangkapan skrin menunjukkan larian **tanpa** `browser.json` dan ujian yang menggunakan YouTube Music tiruan. Tangkapan skrin langsung akan ditambah apabila `browser.json` wujud.
Larian sebenar dengan `browser.json` penulis (output hanya menunjukkan bilangan, tidak pernah nama senarai main):
![Semakan log masuk sebenar](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step2-live-check-login.png)
Tangkapan skrin menunjukkan larian **tanpa** `browser.json` dan ujian yang menggunakan YouTube Music tiruan.
![Semakan log masuk tanpa browser.json, dan ujian langkah 2](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step2-check-login.png)
@@ -12,7 +12,11 @@ python -m musical_time_machine --check-login
On success it prints `Found N playlists in your library.` Without a valid `browser.json` it prints the renewal steps and exits with code 1, instead of a stack trace.
The screenshot shows the run **without** `browser.json` and the tests that use a fake YouTube Music. A live screenshot is added when `browser.json` exists.
A live run with the author's `browser.json` (the output shows only the count, never the names of the playlists):
![Live login check](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step2-live-check-login.png)
The screenshot shows the run **without** `browser.json` and the tests that use a fake YouTube Music.
![Login check without browser.json, and the step 2 tests](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step2-check-login.png)
+5 -1
View File
@@ -10,7 +10,11 @@ Programmet opretter en privat playliste med navnet `{date} Billboard 100`, for e
python -m musical_time_machine --create-playlist
```
Skærmbilledet viser testene til dette trin med en falsk YouTube Music-tjeneste: det første kald opretter én playliste, og det andet kald for samme dato opretter ingen. Et rigtigt skærmbillede tilføjes, når `browser.json` findes.
En rigtig kørsel med forfatterens `browser.json`: første kørsel opretter playlisten, anden kørsel opretter ingenting:
![Rigtig kørsel: playlisten oprettes to gange](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step3-live-create-playlist.png)
Skærmbilledet viser testene til dette trin med en falsk YouTube Music-tjeneste: det første kald opretter én playliste, og det andet kald for samme dato opretter ingen.
![Tests af trin 3: playlisten oprettes én gang](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step3-create-playlist.png)
+5 -1
View File
@@ -10,7 +10,11 @@ Program mencipta senarai main peribadi bernama `{date} Billboard 100`, contohnya
python -m musical_time_machine --create-playlist
```
Tangkapan skrin menunjukkan ujian langkah ini dengan YouTube Music tiruan: panggilan pertama mencipta satu senarai main, panggilan kedua untuk tarikh yang sama tidak mencipta apa-apa. Tangkapan skrin langsung akan ditambah apabila `browser.json` wujud.
Larian sebenar dengan `browser.json` penulis: larian pertama mencipta senarai main, larian kedua tidak mencipta apa-apa:
![Larian sebenar: senarai main dicipta dua kali](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step3-live-create-playlist.png)
Tangkapan skrin menunjukkan ujian langkah ini dengan YouTube Music tiruan: panggilan pertama mencipta satu senarai main, panggilan kedua untuk tarikh yang sama tidak mencipta apa-apa.
![Ujian langkah 3: senarai main dicipta sekali sahaja](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step3-create-playlist.png)
+5 -1
View File
@@ -10,7 +10,11 @@ The program creates a private playlist named `{date} Billboard 100`, for example
python -m musical_time_machine --create-playlist
```
The screenshot shows the tests of this step with a fake YouTube Music: the first call creates one playlist, the second call for the same date creates none. A live screenshot is added when `browser.json` exists.
A live run with the author's `browser.json`: the first run creates the playlist, the second run creates nothing:
![Live: create the playlist twice](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step3-live-create-playlist.png)
The screenshot shows the tests of this step with a fake YouTube Music: the first call creates one playlist, the second call for the same date creates none.
![Tests of step 3: the playlist is created once](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step3-create-playlist.png)
+5 -1
View File
@@ -10,7 +10,11 @@ For hver sang på hitlisten søger programmet på YouTube Music med titlen og ku
python -m musical_time_machine
```
Skærmbilledet viser testene til dette trin med en falsk YouTube Music-tjeneste: alle sange tilføjes, og en sang, der fejler, springes over uden at stoppe kørslen. Et rigtigt skærmbillede tilføjes, når `browser.json` findes.
En rigtig kørsel med forfatterens `browser.json`: alle 100 sange blev tilføjet:
![Rigtig kørsel: hele programmet](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step4-live-add-songs.png)
Skærmbilledet viser testene til dette trin med en falsk YouTube Music-tjeneste: alle sange tilføjes, og en sang, der fejler, springes over uden at stoppe kørslen.
![Tests af trin 4: sange tilføjes, og en sang, der fejler, springes over](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step4-add-songs.png)
+5 -1
View File
@@ -10,7 +10,11 @@ Untuk setiap lagu dalam carta, program mencari di YouTube Music dengan tajuk dan
python -m musical_time_machine
```
Tangkapan skrin menunjukkan ujian langkah ini dengan YouTube Music tiruan: semua lagu ditambah, dan lagu yang gagal dilangkau tanpa menghentikan larian. Tangkapan skrin langsung akan ditambah apabila `browser.json` wujud.
Larian sebenar dengan `browser.json` penulis: kesemua 100 lagu telah ditambah:
![Larian sebenar: program penuh](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step4-live-add-songs.png)
Tangkapan skrin menunjukkan ujian langkah ini dengan YouTube Music tiruan: semua lagu ditambah, dan lagu yang gagal dilangkau tanpa menghentikan larian.
![Ujian langkah 4: lagu ditambah dan lagu yang gagal dilangkau](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step4-add-songs.png)
+5 -1
View File
@@ -10,7 +10,11 @@ For every song of the chart the program searches YouTube Music with the title an
python -m musical_time_machine
```
The screenshot shows the tests of this step with a fake YouTube Music: all songs are added, and a failing song is skipped without stopping the run. A live screenshot is added when `browser.json` exists.
A live run with the author's `browser.json`: all 100 songs were added:
![Live: the full program](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step4-live-add-songs.png)
The screenshot shows the tests of this step with a fake YouTube Music: all songs are added, and a failing song is skipped without stopping the run.
![Tests of step 4: songs are added and a failing song is skipped](https://git.tirsystem.com/Tirsvad-Udemy-100-days-of-code/046-scraping-the-billboard/raw/branch/main/docs/wiki/images/step4-add-songs.png)
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB