Skip to content

Commit

Permalink
Continue SpMp content
Browse files Browse the repository at this point in the history
  • Loading branch information
toasterofbread committed Nov 13, 2023
1 parent 7db4da0 commit 51c021a
Show file tree
Hide file tree
Showing 29 changed files with 211 additions and 68 deletions.
10 changes: 5 additions & 5 deletions content/_index.en.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
+++
[[cascade]]
hl = "en"
github_user = "toasterofbread"
+++
---
cascade:
hl: "en"
github_user: "toasterofbread"
---

{{< rawhtml >}}
<div style="display: flex; gap: 20px; margin-bottom: 50px;">
Expand Down
9 changes: 5 additions & 4 deletions content/_index.ja.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
+++
[[cascade]]
hl = "ja"
+++
---
cascade:
hl: "ja"
github_user: "toasterofbread"
---

TODO
9 changes: 5 additions & 4 deletions content/projects/gameoff2021/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,13 @@ end_year: 2021
end_month: 11
publishdate: 2021-11-01

bookcase_images: ["/projects/gameoff2021/0.png", "/projects/gameoff2021/1.png", "/projects/gameoff2021/2.png"]
bookcase_background_src: "/projects/gameoff2021/background.svg"
bookcase_accent_colour_light: "#737a85"
bookcase_accent_colour_dark: "#2c2a32"
images: ["/projects/gameoff2021/0.png", "/projects/gameoff2021/1.png", "/projects/gameoff2021/2.png"]
background_image: "/projects/gameoff2021/background.svg"
accent_colour_light: "#737a85"
accent_colour_dark: "#2c2a32"
---

{{< projecttheme >}}
{{< projectheader >}}

A project I started as an entry to the 2021 Github Game Off, involving an in-game scripting language.
Expand Down
9 changes: 5 additions & 4 deletions content/projects/gdmengine/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@ end_year: 2021
end_month: 9
publishdate: 2021-09-01

bookcase_images: ["/projects/gdmengine/1.jpg", "/projects/gdmengine/0.jpg", "/projects/gdmengine/2.jpg", "/projects/gdmengine/3.jpg", "/projects/gdmengine/4.gif"]
bookcase_background_src: "/projects/gdmengine/background.svg"
bookcase_accent_colour_light: "#e8553c"
bookcase_accent_colour_dark: "#5e1205"
images: ["/projects/gdmengine/1.jpg", "/projects/gdmengine/0.jpg", "/projects/gdmengine/2.jpg", "/projects/gdmengine/3.jpg", "/projects/gdmengine/4.gif"]
background_image: "/projects/gdmengine/background.svg"
accent_colour_light: "#e8553c"
accent_colour_dark: "#5e1205"
---

{{< projecttheme >}}
{{< projectheader >}}
9 changes: 5 additions & 4 deletions content/projects/kakutroid/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ end_year: 2022
end_month: 3
publishdate: 2022-03-01

bookcase_images: ["/projects/kakutroid/0.png"]
bookcase_background_src: "/projects/kakutroid/background.svg"
bookcase_accent_colour_light: "#01a5ab"
bookcase_accent_colour_dark: "#083538"
images: ["/projects/kakutroid/0.png"]
background_image: "/projects/kakutroid/background.svg"
accent_colour_light: "#01a5ab"
accent_colour_dark: "#083538"
---

{{< projecttheme >}}
{{< projectheader >}}

A Metroidvania with simple geometric graphics and Celeste-inspired movement.
Expand Down
9 changes: 5 additions & 4 deletions content/projects/metroidengine/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ end_year: 2020
end_month: 6
publishdate: 2020-06-01

bookcase_images: ["/projects/metroidengine/0.gif"]
bookcase_background_src: "/projects/metroidengine/background.svg"
bookcase_accent_colour_light: "#ed9966"
bookcase_accent_colour_dark: "#6b1c0c"
images: ["/projects/metroidengine/0.gif"]
background_image: "/projects/metroidengine/background.svg"
accent_colour_light: "#ed9966"
accent_colour_dark: "#6b1c0c"
---

{{< projecttheme >}}
{{< projectheader >}}

A remake of Super Metroid's Samus using the original assets.
Expand Down
9 changes: 5 additions & 4 deletions content/projects/re/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ end_year: 2022
end_month: 5
publishdate: 2022-05-01

bookcase_images: ["/projects/re/2.png", "/projects/re/1.png", "/projects/re/3.png", "/projects/re/0.gif"]
bookcase_background_src: "/projects/re/background.svg"
bookcase_accent_colour_light: "#77b64d"
bookcase_accent_colour_dark: "#42662a"
images: ["/projects/re/2.png", "/projects/re/1.png", "/projects/re/3.png", "/projects/re/0.gif"]
background_image: "/projects/re/background.svg"
accent_colour_light: "#77b64d"
accent_colour_dark: "#42662a"
---

{{< projecttheme >}}
{{< projectheader >}}

A basic 2D and 3D game engine I made as my first C++ project, including a basic voxel implementation.
Expand Down
53 changes: 42 additions & 11 deletions content/projects/spmp/_index.en.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
---
title: "SpMp"
description: "A YouTube Music client I've been making since August 2022.
I've implemented useful queue manipulation features, as well as language and metadata customisation options.
Seeing poor song title translations on a daily basis in the official app and not being able to change them was a great motivator."
description: "A YouTube Music client I've been workin on August 2022.
I've implemented useful queue manipulation features, as well as language and metadata customisation options."

github_repo: "spmp"
source_code: "https://github.com/toasterofbread/spmp"
icon_url: https://raw.githubusercontent.com/toasterofbread/spmp/main/metadata/en-US/images/icon.png

links: [
{ "icon": "fa-brands fa-github", "link": "https://github.com/toasterofbread/spmp", "label": "Repository" },
{ "icon": "fa-brands fa-github", "link": "https://github.com/toasterofbread/spmp", "label": "Repo" },
{ "icon": "fa-brands fa-android", "link": "https://f-droid.org/en/packages/com.toasterofbread.spmp/", "label": "F-Droid" },
{ "icon": "fa-brands fa-discord", "link": "https://discord.gg/B4uY4FkkJ3", "label": "Discord server" }
{ "icon": "fa-brands fa-discord", "link": "https://discord.gg/B4uY4FkkJ3", "label": "Discord" }
]
tags:
- Kotlin
Expand All @@ -22,15 +21,47 @@ start_year: 2022
start_month: 8
publishdate: 2022-08-01

bookcase_images: ["/projects/spmp/0.png", "/projects/spmp/1.png", "/projects/spmp/2.png", "/projects/spmp/3.png", "/projects/spmp/4.png", "/projects/spmp/5.png", "/projects/spmp/6.png", "/projects/spmp/7.png", "/projects/spmp/8.png", "/projects/spmp/9.png"]
bookcase_background_src: "/projects/spmp/background.svg"
images: ["/projects/spmp/images/0.png", "/projects/spmp/images/1.png", "/projects/spmp/images/2.png", "/projects/spmp/images/3.png", "/projects/spmp/images/4.png", "/projects/spmp/images/5.png", "/projects/spmp/images/6.png", "/projects/spmp/images/7.png", "/projects/spmp/images/8.png", "/projects/spmp/images/9.png"]
background_image: "/projects/spmp/background.svg"

bookcase_accent_colour_light: "#d6beeb"
bookcase_accent_colour_dark: "#43265c"
cascade:
accent_colour_light: "#d6beeb"
accent_colour_dark: "#43265c"
---

{{< projecttheme >}}
{{< projectheader >}}

I started this project after I got tired of dealing with YouTube's official music app's lack of language features and customisation. I tried several alternatives, but all had at least a few issues that bugged me.
# How it started

So instead of spending a few weeks learning the codebase of an existing project and contributing to it, I decided to spend almost a year (as of writing) creating my own solution.
Before SpMp I had been using the official YouTube Music client on both desktop and mobile, more or less exclusively. Over time, however, I grew less and less patient because of reasons including (but not limited to) these:

- Complete lack of customisability
- Very little creativity or flair in its visual or functional design
- Missing lyrics for most songs, and (at the time) no synchronisation
- Bloated and not open-source
- Desktop/browser version is particularly buggy and unpolished

{{< rawhtml >}}
<p style="font-size: 0.75em; opacity: 50%;">
An example of that last one: When you try to remove a song from the queue, YouTube Music will sometimes decide to instead remove the <b>current song</b> instead. This happened as I was writing this, so I thought I'd mention it.
</p>
{{< /rawhtml >}}

I tried a few alternatives, including Spotify and [ViMusic](https://github.com/vfsfitvnm/ViMusic), but nothing ticked all of the boxes I was hoping to fill.

While I did briefly consider forking a project like ViMusic, I felt like there was so much that I wanted to add that I would be better off starting with a blank canvas and coming out with a better understanding of what I'd created. And surely it would only take me a few months anyway (this was in August of 2022).

# How it's going

In early-mid 2023, after well over half a year of development, I completely stopped using YouTube Music on Android in favour of SpMp. Hopefully, I'll be able to leave it behind on desktop as well once I complete SpMp's own [desktop version](https://github.com/toasterofbread/spmp/pull/170).

You can read more about SpMp's development in [./journey](journey).

# What does "SpMp" stand for?

SpMp was originally a combination the first two letters of my old username "spectreseven1138" and "music player". Hence:
```
Sp + Mp = SpMp = spectreseven1138 music player
```
Very creative, I know.
8 changes: 8 additions & 0 deletions content/projects/spmp/journey/_index.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: "SpMp's Development"
show_subpages: true
---

{{< projecttheme >}}

# Development notes about SpMp
85 changes: 85 additions & 0 deletions content/projects/spmp/journey/helloworld/_index.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: "Hello World"
publishdate: 2023-11-13
---

{{< projecttheme >}}

# Hello World

{{< rawhtml >}}

<style>

.row {
display: flex;
gap: 20px;
margin-top: 35px;

.content {
margin-right: auto;

.date {
font-size: 0.75em;
opacity: 75%;
}
}

img {
max-height: 500px;
margin: 0;
}

.images {
gap: 10px;
display: flex;
overflow-x: scroll;
min-width: 50%;
}
}

</style>

<div class="row">
<div class="images">
<img src="/projects/spmp/journey/0.png">
<img src="/projects/spmp/journey/1.png">
<img src="/projects/spmp/journey/2.png">
</div>

<div class="content">
<h4>The first screenshots of SpMp</h4>
<span class="date">Taken 14 Sep 2022</span>
<p>
The layout is very different now, but most of the actual functionality and content of the core player page was already implemented after one month of development.
</p>
<p>
You can see that the song queue was originally placed to the side of the player and navigated to using a button row at the bottom of the page. The I never made the UI for the button row fully responsive, which is why it looks the same in each screenshot despite them being on different pages.
</p>
<p>
The system for theming the UI using a colour from the song image was also in place at this point. It doesn't look like it in the first screenshot, but the second and third make a bit more sense. Thankfully, the algorithm for colour selection has improved quite a bit since this.
</p>
</div>
</div>

<div class="row">
<img src="/projects/spmp/journey/-1.png" class="image">

<div class="content">
<h4>The <i>actual</i> first screenshot of SpMp</h4>
<span class="date">Taken 30 August 2022</span>
<p>
It looked funny, so I took a screenshot. That's it.
</p>
<p>
The culprit? Probably <a href="https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).aspectRatio(kotlin.Float,kotlin.Boolean)">aspectRatio()</a> (if you know, you know).
</p>
<p>
The song? <a href="https://music.youtube.com/watch?v=olWvy0PiLfA">https://music.youtube.com/watch?v=olWvy0PiLfA</a>.
</p>
</div>
</div>

{{< /rawhtml >}}
9 changes: 5 additions & 4 deletions content/projects/toastbits/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@ start_month: 10
publishdate: 2023-10-23

hide_in_preview: true
bookcase_images: []
bookcase_background_src: "/projects/toastbits/background.svg"
bookcase_accent_colour_light: "#f27483"
bookcase_accent_colour_dark: "#470512"
images: []
background_image: "/projects/toastbits/background.svg"
accent_colour_light: "#f27483"
accent_colour_dark: "#470512"
---


{{< projecttheme >}}
{{< projectheader >}}

My personal website. Features a list of my projects, among other things.
Expand Down
9 changes: 5 additions & 4 deletions content/projects/untitleddinogame/_index.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,13 @@ end_year: 2021
end_month: 10
publishdate: 2021-10-01

bookcase_images: ["/projects/untitleddinogame/2.png", "/projects/untitleddinogame/1.png", "/projects/untitleddinogame/0.gif"]
bookcase_background_src: "/projects/untitleddinogame/background.svg"
bookcase_accent_colour_light: "#0bd404"
bookcase_accent_colour_dark: "#012a01"
images: ["/projects/untitleddinogame/2.png", "/projects/untitleddinogame/1.png", "/projects/untitleddinogame/0.gif"]
background_image: "/projects/untitleddinogame/background.svg"
accent_colour_light: "#0bd404"
accent_colour_dark: "#012a01"
---

{{< projecttheme >}}
{{< projectheader >}}

A simple p2p infinite runner game I made in Godot in about a week.
Expand Down
28 changes: 9 additions & 19 deletions layouts/shortcodes/projectheader.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,20 @@
{{ $title := .Page.Params.title }}
{{ $description := .Page.Params.description }}
{{ $source_code := .Page.Params.source_code }}
{{ $images := .Page.Params.bookcase_images }}
{{ $background_src := .Page.Params.bookcase_background_src }}
{{ $images := .Page.Params.images }}
{{ $background_src := .Page.Params.background_image }}
{{ $tags := .Page.Params.tags }}
{{ $links := .Page.Params.links }}
{{ $icon_url := .Page.Params.icon_url }}
{{ $github_user := .Page.Params.github_user }}
{{ $github_repo := .Page.Params.github_repo }}

{{ $accent_light := .Page.Params.bookcase_accent_colour_light }}
{{ $accent_dark := .Page.Params.bookcase_accent_colour_dark }}
{{ $accent_light := .Page.Params.accent_colour_light }}
{{ $accent_dark := .Page.Params.accent_colour_dark }}

<script src="/scripts/projectheader.js" data-user="{{ $github_user }}" data-repo="{{ $github_repo }}"></script>

<style>
html[data-theme="light"] {
--accent-colour: {{ $accent_dark }};
--on-accent-colour: white;
--accent-colour-reverse: {{ $accent_light }};
}

html[data-theme="dark"] {
--accent-colour: {{ $accent_light }};
--on-accent-colour: black;
--accent-colour-reverse: {{ $accent_dark }};
}

.projectheader {
display: flex;
gap: 10px;
Expand All @@ -40,6 +28,10 @@
overflow-x: scroll;
}

h1 {
margin: 0;
}

.header-column {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -71,7 +63,6 @@

h1 {
font-size: 3em;
color: var(--accent-colour);
}

p {
Expand Down Expand Up @@ -99,8 +90,7 @@
margin-left: -5.5%;
margin-right: -5.5%;

margin-top: 15px;
margin-bottom: 15px;
margin-top: 25px;

--mask:
radial-gradient(27.42px at 50% calc(100% + 21.75px),#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%) calc(50% - 30px) calc(50% - 8.5px + .5px)/60px 17px repeat-x,
Expand Down
Loading

0 comments on commit 51c021a

Please sign in to comment.