diff --git a/blueprints/risdeveau/modules/api/lb.py b/blueprints/risdeveau/modules/api/lb.py
index 10b4491..bf7ff82 100644
--- a/blueprints/risdeveau/modules/api/lb.py
+++ b/blueprints/risdeveau/modules/api/lb.py
@@ -49,11 +49,13 @@ def parse_listens(json: dict) -> dict:
}
for track in json["listens"]:
+ listened_at = track.get("listened_at", 0)
track = track["track_metadata"]
new_track = {
"artist_name": track["artist_name"],
- "track_name": track["track_name"]
+ "track_name": track["track_name"],
+ "listened_at": listened_at
}
if mb := track.get("mbid_mapping"):
diff --git a/blueprints/risdeveau/static/script/rtime.js b/blueprints/risdeveau/static/script/rtime.js
new file mode 100644
index 0000000..dfdbdf3
--- /dev/null
+++ b/blueprints/risdeveau/static/script/rtime.js
@@ -0,0 +1,68 @@
+document.addEventListener('alpine:init', () => {
+ Alpine.data('rtime', (unixTimestamp) => ({
+ targetDate: new Date(unixTimestamp * 1000),
+ timeString: '',
+ timer: null,
+ interval: 1000,
+
+ colorClasses: {
+ green: 't-green',
+ yellow: 't-yellow',
+ orange: 't-orange',
+ red: 't-red'
+ },
+
+ currentColor: 'green',
+
+ get textColorClass() {
+ return this.colorClasses[this.currentColor];
+ },
+
+ init() {
+ this.updateTime();
+ this.timer = setInterval(() => this.updateTime(), this.interval);
+
+ this.$el.addEventListener('alpine:removing', () => {
+ if (this.interval) clearInterval(this.interval);
+ });
+ },
+
+ updateTime() {
+ const now = new Date();
+ const diffInSeconds = Math.floor((now - this.targetDate) / 1000);
+ const diffInMinutes = Math.floor(diffInSeconds / 60);
+ const diffInHours = Math.floor(diffInSeconds / 3600);
+ const diffInDays = Math.floor(diffInSeconds / 86400);
+
+ let newInterval = this.interval;
+
+ if (diffInSeconds < 60) {
+ this.timeString = 'a moment ago';
+ } else if (diffInMinutes < 60) {
+ this.timeString = `${diffInMinutes} m ago`;
+ newInterval = 10000;
+ } else if (diffInHours < 24) {
+ this.timeString = `${diffInHours} h ago`;
+ newInterval = 60000;
+ } else {
+ this.timeString = `${diffInDays} d ago`;
+ clearInterval(this.timer);
+ }
+
+ if (diffInMinutes <= 15) {
+ this.currentColor = 'green';
+ } else if (diffInHours < 1) {
+ this.currentColor = 'yellow';
+ } else if (diffInDays < 1) {
+ this.currentColor = 'orange';
+ } else {
+ this.currentColor = 'red';
+ }
+
+ if (this.interval != newInterval) {
+ clearInterval(this.timer)
+ this.timer = setInterval(() => this.updateTime(), newInterval);
+ }
+ },
+ }));
+});
\ No newline at end of file
diff --git a/blueprints/risdeveau/templates/index.html b/blueprints/risdeveau/templates/index.html
index 9751ccd..61a3aae 100644
--- a/blueprints/risdeveau/templates/index.html
+++ b/blueprints/risdeveau/templates/index.html
@@ -3,9 +3,12 @@
Sweet Bread
+
+
+
+
+
{{ track.artist_name }}
{{ track.track_name }}
+ {% if not is_active %}
+
+ {% endif %}
{% endmacro %}
diff --git a/blueprints/risdeveau/templates/steam.htm b/blueprints/risdeveau/templates/steam.htm
index f9735c0..b02be66 100644
--- a/blueprints/risdeveau/templates/steam.htm
+++ b/blueprints/risdeveau/templates/steam.htm
@@ -31,7 +31,10 @@
{% endfor %}
- Last updated: {{ rtmsmp(steam.caches.recent.last_updated) }} ago
+
{% endif %}
{% if steam.caches.owned.data.games %}
@@ -58,6 +61,9 @@
{% endfor %}
- Last updated: {{ rtmsmp(steam.caches.owned.last_updated) }} ago
+
{% endif %}
diff --git a/blueprints/root/modules/style.py b/blueprints/root/modules/style.py
index dc30d2d..1d86e94 100644
--- a/blueprints/root/modules/style.py
+++ b/blueprints/root/modules/style.py
@@ -3,7 +3,7 @@ from os.path import join
def compile_styles():
dir = "blueprints/root/static/style"
- files = ("main",)
+ files = ("main", "tw")
for file in files:
console(f"sass {join(dir, file+'.scss')} {join(dir, file+'.css')}")
\ No newline at end of file
diff --git a/blueprints/root/static/style/_catppuccin.scss b/blueprints/root/static/style/_catppuccin.scss
index 3ecbcdc..bd7a868 100644
--- a/blueprints/root/static/style/_catppuccin.scss
+++ b/blueprints/root/static/style/_catppuccin.scss
@@ -18,6 +18,7 @@ $subtext0: #a6adc8;
$subtext1: #bac2de;
$red: #f38ba8;
+$yellow: #f9e2af;
$green: #a6e3a1;
$peach: #fab387;
$blue: #89b4fa;
diff --git a/blueprints/root/static/style/tw.scss b/blueprints/root/static/style/tw.scss
new file mode 100644
index 0000000..0fbb9f3
--- /dev/null
+++ b/blueprints/root/static/style/tw.scss
@@ -0,0 +1,8 @@
+@use "catppuccin" as theme;
+
+.t {
+ &-red { color: theme.$red; }
+ &-orange { color: theme.$peach; }
+ &-yellow { color: theme.$yellow; }
+ &-green { color: theme.$green; }
+}