Adding lastfm and other bits
This commit is contained in:
Dan Baker
parent
0e4e0318cc
commit
f0902b072f
10 changed files with 313 additions and 90 deletions
|
|
@ -18,3 +18,31 @@ article a[href^="https://"]:not(article .social-icons a, .paginav a, .buy-me-a-c
|
|||
background-size: 100% 2px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.photo {
|
||||
flex: 25%;
|
||||
|
||||
img {
|
||||
border-radius: var(--radius);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
flex: 75%;
|
||||
}
|
||||
BIN
assets/images/me.webp
Normal file
BIN
assets/images/me.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
|
|
@ -73,7 +73,7 @@ params:
|
|||
# home-info mode
|
||||
homeInfoParams:
|
||||
Title: "I’m Dan. I live in the Golden Valley, Herefordshire. I work remotely as a software engineer, team leader, and system architect. "
|
||||
Content: "I like to talk about engineering, networking, and system design. There’s a higher I may also talk about many of my other interests – photography, digital minimalism, lego, gaming and game dev, coffee, or the great outdoors."
|
||||
Content: "I like to talk about engineering, networking, and system design. There’s a higher change I will also talk about many of my other interests – photography, digital minimalism, lego, gaming and game dev, coffee, or the great outdoors."
|
||||
|
||||
socialIcons:
|
||||
- name: instagram
|
||||
|
|
@ -82,6 +82,8 @@ params:
|
|||
url: "https://dice.camp/@ritual"
|
||||
- name: github
|
||||
url: "https://github.com/unbolt"
|
||||
- name: lastfm
|
||||
url: "https://www.last.fm/user/ritualplays"
|
||||
|
||||
analytics:
|
||||
google:
|
||||
|
|
|
|||
|
|
@ -1,92 +1,12 @@
|
|||
---
|
||||
title: What’s up?
|
||||
title: Some stuff about me
|
||||
author: Dan
|
||||
type: page
|
||||
date: 2024-01-09T11:46:01+00:00
|
||||
comments: false
|
||||
disableCoffee: true
|
||||
hideMeta: true
|
||||
|
||||
---
|
||||
<div class="wp-block-group alignfull has-accent-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
|
||||
<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex">
|
||||
<div class="wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
|
||||
<div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-layout-1 wp-block-group-is-layout-flex" style="min-height:100%">
|
||||
<p class="has-large-font-size">
|
||||
I'm <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-base-color">Dan</mark></strong>. I live in the Golden Valley, <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-base-color">Herefordshire</mark></strong>. I work remotely as a <strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-base-color">software engineer</mark></strong>, team leader, and system architect.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I like to talk about engineering, networking, and system design. There's a really good chance I may also talk about some of my other interests - photography, lego, gaming and game dev, coffee, or the great outdoors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%">
|
||||
<figure class="wp-block-image size-large is-style-rounded wp-duotone-unset-1"><img data-dominant-color="6a5949" data-has-transparency="false" loading="lazy" decoding="async" width="1119" height="1120" src="https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/IMG_5055-edited.webp?resize=1119%2C1120&ssl=1" alt="" class="not-transparent wp-image-50" style="--dominant-color: #6a5949; aspect-ratio:1;object-fit:cover" srcset="https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/IMG_5055-edited.webp?w=1119&ssl=1 1119w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/IMG_5055-edited.webp?resize=300%2C300&ssl=1 300w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/IMG_5055-edited.webp?resize=1024%2C1024&ssl=1 1024w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/IMG_5055-edited.webp?resize=150%2C150&ssl=1 150w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/IMG_5055-edited.webp?resize=768%2C769&ssl=1 768w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" /></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wp-block-group alignfull has-base-2-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-3fb09f2875769cf7d7ccd642208cba31 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
|
||||
<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex">
|
||||
<div class="wp-block-column is-vertically-aligned-stretch is-layout-flow wp-block-column-is-layout-flow" style="padding-right:0;flex-basis:60%">
|
||||
<div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-layout-3 wp-block-group-is-layout-flex" style="min-height:100%">
|
||||
<figure class="wp-block-image size-large is-resized is-style-rounded is-layout-flow wp-block-image-is-layout-flow"><img data-dominant-color="898b75" data-has-transparency="false" loading="lazy" decoding="async" width="1024" height="732" src="https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DJI_0229-HDR-1024x732.webp?resize=1024%2C732&ssl=1" alt="" class="not-transparent wp-image-64" style="--dominant-color: #898b75; width:667px;height:auto" srcset="https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DJI_0229-HDR-jpg.webp?resize=1024%2C732&ssl=1 1024w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DJI_0229-HDR-jpg.webp?resize=300%2C214&ssl=1 300w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DJI_0229-HDR-jpg.webp?resize=768%2C549&ssl=1 768w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DJI_0229-HDR-jpg.webp?resize=1536%2C1097&ssl=1 1536w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DJI_0229-HDR-jpg.webp?w=2048&ssl=1 2048w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" /><figcaption class="wp-element-caption">Dorset 2023, near Bridport. 50°41'28” N 2°42'32” W</figcaption></figure>
|
||||
|
||||
<p>
|
||||
As well as traditional photoghraphy, I am trying to get to grips with my DJI Mini 2 for drone photography which opens up a whole new world of angles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40%">
|
||||
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
|
||||
<h2 class="wp-block-heading has-base-color has-text-color has-link-color has-large-font-size wp-elements-a248b251d7830cc1a26d6de4bfa004a4">
|
||||
Photography
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
I've been a keen photographer for many years. Currently I shoot with a Fujifilm X-T5, mainly with the 16-55mm f2.8. I also have the 70-300 f4-5. I'm making some effort to post my photos to <a href="https://www.instagram.com/ritualphotos/" target="_blank" rel="noreferrer noopener">instagram</a> more frequently.
|
||||
</p>
|
||||
|
||||
<div class="wp-block-jetpack-instagram-gallery wp-block-jetpack-instagram-gallery__grid wp-block-jetpack-instagram-gallery__grid-columns-3 is-stacked-on-mobile" style="grid-gap: 10px; --latest-instagram-posts-spacing: 10px;">
|
||||
<a
|
||||
class="wp-block-jetpack-instagram-gallery__grid-post"
|
||||
href="https://www.instagram.com/p/C2C7CrLthy4/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
> <img
|
||||
alt="These seed heads always have some crazy #tentacle action. #nature #weird #photography #naturephotography"
|
||||
src="https://scontent-dfw5-2.cdninstagram.com/v/t51.29350-15/418639424_741086241251254_471771321641352299_n.jpg?_nc_cat=108&ccb=1-7&_nc_sid=18de74&_nc_ohc=ZUSyi4tjHVoAX9ITSfD&_nc_ht=scontent-dfw5-2.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AfB1n67fPCXaQ0r9ykZ78eybIxLfcI4zrcrVUvNlwjzzNw&oe=65CBC9B4"
|
||||
loading="lazy"
|
||||
/> </a> <a
|
||||
class="wp-block-jetpack-instagram-gallery__grid-post"
|
||||
href="https://www.instagram.com/p/C2C62C-trjv/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
> <img
|
||||
alt="Flowers being hung to dry in the #greenhouse at #weirgarden @nationaltrust in #hereford. #driedflowers #flower"
|
||||
src="https://scontent-dfw5-2.cdninstagram.com/v/t51.29350-15/418610808_942834420595794_277835948344277259_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=18de74&_nc_ohc=kdRCYaqnYrYAX81bHP1&_nc_ht=scontent-dfw5-2.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AfDzL_uMfajhnFzpfua1Ql7GyRb2fMalfPkNhhXpeZhEyg&oe=65CB7E1F"
|
||||
loading="lazy"
|
||||
/> </a> <a
|
||||
class="wp-block-jetpack-instagram-gallery__grid-post"
|
||||
href="https://www.instagram.com/p/C2C6iJdtvY0/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
> <img
|
||||
alt="Friendly robin at the #weirgarden in #hereford today. #robin #wildlife #wildlifephotography #ukwildlife"
|
||||
src="https://scontent-dfw5-2.cdninstagram.com/v/t51.29350-15/419447288_2141674276187415_6647487415531800578_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=18de74&_nc_ohc=u1FqQ25QKKAAX8kUEdC&_nc_ht=scontent-dfw5-2.cdninstagram.com&edm=ANo9K5cEAAAA&oh=00_AfBuDQ7aOgoeULg5mUNjQ9r0EHhBW1gOQgMQz_1jWAdgMQ&oe=65CA781A"
|
||||
loading="lazy"
|
||||
/> </a>
|
||||
</div>
|
||||
|
||||
<div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer">
|
||||
</div>
|
||||
|
||||
<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">
|
||||
<figure class="wp-block-image aligncenter size-large is-style-rounded"><img data-dominant-color="92867c" data-has-transparency="false" style="--dominant-color: #92867c;" loading="lazy" decoding="async" width="1024" height="732" src="https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DSCF1130-1024x732.webp?resize=1024%2C732&ssl=1" alt="" class="not-transparent wp-image-65" srcset="https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DSCF1130-jpg.webp?resize=1024%2C732&ssl=1 1024w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DSCF1130-jpg.webp?resize=300%2C214&ssl=1 300w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DSCF1130-jpg.webp?resize=768%2C549&ssl=1 768w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DSCF1130-jpg.webp?resize=1536%2C1097&ssl=1 1536w, https://i0.wp.com/danbaker.dev/wp-content/uploads/2024/01/DSCF1130-jpg.webp?w=2048&ssl=1 2048w" sizes="(max-width: 1000px) 100vw, 1000px" data-recalc-dims="1" /><figcaption class="wp-element-caption">Rhayader, 2023</figcaption></figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
This page is coming soon...
|
||||
121
layouts/_default/list.html
Normal file
121
layouts/_default/list.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
{{- define "main" }}
|
||||
|
||||
{{- if (and site.Params.profileMode.enabled .IsHome) }}
|
||||
{{- partial "index_profile.html" . }}
|
||||
{{- else }} {{/* if not profileMode */}}
|
||||
|
||||
{{- if not .IsHome | and .Title }}
|
||||
<header class="page-header">
|
||||
{{- partial "breadcrumbs.html" . }}
|
||||
<h1>
|
||||
{{ .Title }}
|
||||
{{- if and (or (eq .Kind `term`) (eq .Kind `section`)) (.Param "ShowRssButtonInSectionTermList") }}
|
||||
{{- with .OutputFormats.Get "rss" }}
|
||||
<a href="{{ .RelPermalink }}" title="RSS" aria-label="RSS">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" height="23">
|
||||
<path d="M4 11a9 9 0 0 1 9 9" />
|
||||
<path d="M4 4a16 16 0 0 1 16 16" />
|
||||
<circle cx="5" cy="19" r="1" />
|
||||
</svg>
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</h1>
|
||||
{{- if .Description }}
|
||||
<div class="post-description">
|
||||
{{ .Description | markdownify }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</header>
|
||||
{{- end }}
|
||||
|
||||
{{- if .Content }}
|
||||
<div class="post-content">
|
||||
{{- if not (.Param "disableAnchoredHeadings") }}
|
||||
{{- partial "anchored_headings.html" .Content -}}
|
||||
{{- else }}{{ .Content }}{{ end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{- $pages := union .RegularPages .Sections }}
|
||||
|
||||
{{- if .IsHome }}
|
||||
{{- $pages = where site.RegularPages "Type" "in" site.Params.mainSections }}
|
||||
{{- $pages = where $pages "Params.hiddenInHomeList" "!=" "true" }}
|
||||
{{- end }}
|
||||
|
||||
{{- $paginator := .Paginate $pages }}
|
||||
|
||||
{{- if and .IsHome site.Params.homeInfoParams (eq $paginator.PageNumber 1) }}
|
||||
{{- partial "home_info.html" . }}
|
||||
{{- end }}
|
||||
|
||||
{{- $term := .Data.Term }}
|
||||
{{- range $index, $page := $paginator.Pages }}
|
||||
|
||||
{{- $class := "post-entry" }}
|
||||
|
||||
{{- $user_preferred := or site.Params.disableSpecial1stPost site.Params.homeInfoParams }}
|
||||
{{- if (and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) (not $user_preferred)) }}
|
||||
{{- $class = "first-entry" }}
|
||||
{{- else if $term }}
|
||||
{{- $class = "post-entry tag-entry" }}
|
||||
{{- end }}
|
||||
|
||||
<article class="{{ $class }}">
|
||||
{{- $isHidden := (.Param "cover.hiddenInList") | default (.Param "cover.hidden") | default false }}
|
||||
{{- partial "cover.html" (dict "cxt" . "IsSingle" false "isHidden" $isHidden) }}
|
||||
<header class="entry-header">
|
||||
<h2 class="entry-hint-parent">
|
||||
{{- .Title }}
|
||||
{{- if .Draft }}
|
||||
<span class="entry-hint" title="Draft">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" fill="currentColor">
|
||||
<path
|
||||
d="M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" />
|
||||
</svg>
|
||||
</span>
|
||||
{{- end }}
|
||||
</h2>
|
||||
</header>
|
||||
{{- if (ne (.Param "hideSummary") true) }}
|
||||
<div class="entry-content">
|
||||
<p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- if not (.Param "hideMeta") }}
|
||||
<footer class="entry-footer">
|
||||
{{- partial "post_meta.html" . -}}
|
||||
</footer>
|
||||
{{- end }}
|
||||
<a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
|
||||
</article>
|
||||
{{- end }}
|
||||
|
||||
{{- if gt $paginator.TotalPages 1 }}
|
||||
<footer class="page-footer">
|
||||
<nav class="pagination">
|
||||
{{- if $paginator.HasPrev }}
|
||||
<a class="prev" href="{{ $paginator.Prev.URL | absURL }}">
|
||||
« {{ i18n "prev_page" }}
|
||||
{{- if (.Param "ShowPageNums") }}
|
||||
{{- sub $paginator.PageNumber 1 }}/{{ $paginator.TotalPages }}
|
||||
{{- end }}
|
||||
</a>
|
||||
{{- end }}
|
||||
{{- if $paginator.HasNext }}
|
||||
<a class="next" href="{{ $paginator.Next.URL | absURL }}">
|
||||
{{- i18n "next_page" }}
|
||||
{{- if (.Param "ShowPageNums") }}
|
||||
{{- add 1 $paginator.PageNumber }}/{{ $paginator.TotalPages }}
|
||||
{{- end }} »
|
||||
</a>
|
||||
{{- end }}
|
||||
</nav>
|
||||
</footer>
|
||||
{{- end }}
|
||||
|
||||
{{- end }}{{/* end profileMode */}}
|
||||
|
||||
{{- end }}{{- /* end main */ -}}
|
||||
|
|
@ -3,11 +3,32 @@
|
|||
<header class="entry-header">
|
||||
<h1>{{ .Title | markdownify }}</h1>
|
||||
</header>
|
||||
<div class="entry-content">
|
||||
{{ .Content | markdownify }}
|
||||
</div>
|
||||
<footer class="entry-footer">
|
||||
{{ partial "social_icons.html" (dict "align" site.Params.homeInfoParams.AlignSocialIconsTo) }}
|
||||
</footer>
|
||||
|
||||
<div class="entry-content">
|
||||
|
||||
<div class="row">
|
||||
<div class="col photo">
|
||||
{{- $me := resources.Get "/images/me.webp" }}
|
||||
<img src="{{ $me.Permalink }}">
|
||||
</div>
|
||||
<div class="col intro-text">
|
||||
{{ .Content | markdownify }}
|
||||
|
||||
<div class="entry-content">
|
||||
{{- partial "nowplaying.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<footer class="entry-footer">
|
||||
{{ partial "social_icons.html" (dict "align" site.Params.homeInfoParams.AlignSocialIconsTo) }}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</article>
|
||||
{{- end -}}
|
||||
|
|
|
|||
26
layouts/partials/nowplaying.html
Executable file
26
layouts/partials/nowplaying.html
Executable file
|
|
@ -0,0 +1,26 @@
|
|||
<script src="/js/nowplaying.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/css/nowplaying.css">
|
||||
|
||||
<div class="nowplayingcard">
|
||||
<div class="nowplayingcontainer-inner">
|
||||
<div class="trackInfo">
|
||||
<p><strong>Recently listening to:</strong></p>
|
||||
🎵 <span id="artist"></span> - <a id="tracktitle"></a>
|
||||
<a id="album"></a>
|
||||
</div>
|
||||
<img id="trackart" src="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setInterval(getLastTrack("ritualplays","3a4fef48fecc593d25e0f9a40df1fefe"), 10 * 1000);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
28
static/css/nowplaying.css
Executable file
28
static/css/nowplaying.css
Executable file
|
|
@ -0,0 +1,28 @@
|
|||
.nowplayingcard {
|
||||
margin: auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.nowplayingcontainer-inner {
|
||||
transition: 0.3s;
|
||||
display: inline-flex;
|
||||
|
||||
.trackInfo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#album {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
img#trackart {
|
||||
transition: 0.3s;
|
||||
width: 60px;
|
||||
height: 50px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
img#trackart[src=""] {
|
||||
display: none;
|
||||
}
|
||||
BIN
static/images/OoO.png
Executable file
BIN
static/images/OoO.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
77
static/js/nowplaying.js
Executable file
77
static/js/nowplaying.js
Executable file
|
|
@ -0,0 +1,77 @@
|
|||
const URL_BASE = "https://ws.audioscrobbler.com/2.0/?method=";
|
||||
const TRACK_METHOD = "user.getrecenttracks&user=";
|
||||
const KEY_PARAM = "&api_key="
|
||||
const MB_PARAM = "&mbid="
|
||||
const REQ_PARAMS = "&format=json&limit=1"
|
||||
|
||||
function getDetail(item, requestType, key) {
|
||||
|
||||
const detailNode = document.getElementById(requestType);
|
||||
if (Object.values(item).indexOf('mbid') > -1) {
|
||||
const detailUrl = URL_BASE + requestType + ".getinfo" + KEY_PARAM + key + MB_PARAM + item["mbid"] + REQ_PARAMS
|
||||
let detailRequest = null;
|
||||
if (window.XMLHttpRequest) {
|
||||
detailRequest = new XMLHttpRequest();
|
||||
} else {
|
||||
detailRequest = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
|
||||
detailRequest.onreadystatechange = function () {
|
||||
if (detailRequest.readyState === XMLHttpRequest.DONE) {
|
||||
if (detailRequest.status === 200) {
|
||||
const response = JSON.parse(detailRequest.responseText);
|
||||
detailNode.setAttribute("href", response[requestType]["url"])
|
||||
detailNode.innerText = response[requestType]["name"]
|
||||
}
|
||||
}
|
||||
}
|
||||
detailRequest.open('GET', detailUrl, true);
|
||||
detailRequest.send();
|
||||
} else {
|
||||
detailNode.setAttribute("href", "#")
|
||||
detailNode.innerText = item["#text"]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getLastTrack(user, key) {
|
||||
|
||||
const recentTracksUrl =
|
||||
URL_BASE + TRACK_METHOD + user + KEY_PARAM + key + REQ_PARAMS
|
||||
|
||||
if (window.XMLHttpRequest) {
|
||||
httpRequest = new XMLHttpRequest();
|
||||
} else {
|
||||
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
|
||||
httpRequest.onreadystatechange = function () {
|
||||
if (httpRequest.readyState === XMLHttpRequest.DONE) {
|
||||
const titleNode = document.getElementById("tracktitle");
|
||||
const imageNode = document.getElementById("trackart");
|
||||
const albumNode = document.getElementById("album")
|
||||
|
||||
if (httpRequest.status === 200) {
|
||||
|
||||
const response = JSON.parse(httpRequest.responseText);
|
||||
const recentTrack = response.recenttracks.track[0];
|
||||
console.log(recentTrack)
|
||||
titleNode.innerText = recentTrack.name;
|
||||
titleNode.setAttribute("href", recentTrack.url);
|
||||
titleNode.setAttribute("title", recentTrack.name + " by " + recentTrack.artist["#text"]);
|
||||
imageNode.setAttribute("src", recentTrack.image[3]["#text"]);
|
||||
|
||||
getDetail(recentTrack.album, "album", key)
|
||||
getDetail(recentTrack.artist, "artist", key)
|
||||
|
||||
} else {
|
||||
titleNode.innerText = "Please Try Again";
|
||||
imageNode.setAttribute("src", "/images/OoO.png");
|
||||
albumNode.innerText = "Last.fm"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
httpRequest.open('GET', recentTracksUrl, true);
|
||||
httpRequest.send();
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue