{"id":74,"date":"2025-04-25T19:08:44","date_gmt":"2025-04-25T19:08:44","guid":{"rendered":"https:\/\/yarntail.com\/?page_id=74"},"modified":"2025-10-30T23:24:16","modified_gmt":"2025-10-30T23:24:16","slug":"music-catalog","status":"publish","type":"page","link":"https:\/\/yarntail.com\/index.php\/music-catalog\/","title":{"rendered":"Music Catalog"},"content":{"rendered":"\n<!-- ===== YarnTail \u00b7 Sync Catalog (Client-side filtering) ===== -->\n<div class=\"yt-sync\">\n  <h2>YarnTail \u00b7 Sync Catalog<\/h2>\n  <p class=\"yt-note\">Filter by Artist, Track, Genre, Mood, and BPM. Click a row to play.<\/p>\n\n  <!-- Filters -->\n  <form class=\"yt-filters\" id=\"yt-filters\" onsubmit=\"return false;\">\n    <div class=\"yt-field\">\n      <label for=\"q\">Search (Artist \/ Track)<\/label>\n      <input id=\"q\" type=\"search\" placeholder=\"Type to search\u2026\" \/>\n    <\/div>\n\n    <div class=\"yt-field\">\n      <label for=\"genre\">Genre<\/label>\n      <select id=\"genre\" multiple size=\"4\" title=\"Hold Cmd\/Ctrl to multi-select\"><\/select>\n    <\/div>\n\n    <div class=\"yt-field\">\n      <label for=\"mood\">Mood<\/label>\n      <select id=\"mood\" multiple size=\"4\" title=\"Hold Cmd\/Ctrl to multi-select\"><\/select>\n    <\/div>\n\n    <div class=\"yt-field yt-bpm\">\n      <label>BPM<\/label>\n      <div class=\"yt-bpm-row\">\n        <input id=\"bpmMin\" type=\"number\" inputmode=\"numeric\" placeholder=\"Min\" min=\"40\" max=\"220\" \/>\n        <span>\u2013<\/span>\n        <input id=\"bpmMax\" type=\"number\" inputmode=\"numeric\" placeholder=\"Max\" min=\"40\" max=\"220\" \/>\n      <\/div>\n    <\/div>\n\n    <div class=\"yt-field\">\n      <label for=\"sort\">Sort<\/label>\n      <select id=\"sort\">\n        <option value=\"artist-asc\">Artist (A\u2013Z)<\/option>\n        <option value=\"artist-desc\">Artist (Z\u2013A)<\/option>\n        <option value=\"title-asc\">Track (A\u2013Z)<\/option>\n        <option value=\"title-desc\">Track (Z\u2013A)<\/option>\n        <option value=\"bpm-asc\">BPM (Low\u2192High)<\/option>\n        <option value=\"bpm-desc\">BPM (High\u2192Low)<\/option>\n      <\/select>\n    <\/div>\n\n    <div class=\"yt-actions\">\n      <button type=\"button\" id=\"clear\">Reset<\/button>\n    <\/div>\n  <\/form>\n\n  <!-- Results -->\n  <div class=\"yt-summary\"><span id=\"count\">0<\/span> track(s)<\/div>\n  <div class=\"yt-table\" id=\"yt-table\" role=\"list\"><\/div>\n\n  <!-- Player -->\n  <div class=\"yt-player-card\" id=\"yt-player-card\" hidden>\n    <div class=\"yt-now\">\n      <div class=\"yt-now-title\" id=\"now-title\">\u2014<\/div>\n      <div class=\"yt-now-meta\" id=\"now-meta\">\u2014<\/div>\n    <\/div>\n    <audio id=\"yt-audio\" controls preload=\"metadata\" style=\"width:100%\"><\/audio>\n  <\/div>\n<\/div>\n\n<style>\n  .yt-sync { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; max-width: 1100px; margin: 0 auto; padding: 8px 12px 24px; }\n  .yt-sync h2 { margin: 8px 0 12px; font-size: 1.5rem; }\n  .yt-note { margin: 0 0 12px; color: #666; }\n\n  .yt-filters { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; align-items: end; margin-bottom: 12px; }\n  .yt-field label { display:block; font-size: 0.85rem; margin-bottom: 6px; color:#444; }\n  .yt-field input[type=\"search\"], .yt-field input[type=\"number\"], .yt-field select {\n    width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; background: #f7f7f7;\n  }\n  .yt-bpm-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items:center; }\n  .yt-actions { display:flex; gap:8px; align-items:center; }\n  .yt-actions button { padding:8px 12px; border-radius: 8px; border:1px solid #888; background:#2a2a2a; color:#eee; cursor:pointer; }\n  .yt-actions button:hover { background:#3a3a3a; }\n\n  .yt-summary { margin: 6px 0 8px; color:#555; }\n\n  .yt-table { display: grid; gap: 8px; }\n  .yt-row {\n    display: grid;\n    grid-template-columns: 1.2fr 1.2fr 0.7fr 140px; \/* artist | track | mood\/genre | bpm *\/\n    gap: 10px; align-items: center;\n    border: 1px solid #333; border-radius: 10px; background: #2a2a2a; color:#eee;\n    padding: 10px 12px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease;\n  }\n  .yt-row:hover { background:#3a3a3a; border-color:#555; }\n  .yt-col { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  .yt-col small { color:#bbb; }\n\n  .yt-player-card {\n    margin-top: 12px; border:1px solid #333; background:#2a2a2a; color:#eee; border-radius: 12px; padding: 12px;\n  }\n  .yt-now-title { font-weight:700; margin-bottom: 4px; }\n  .yt-now-meta { font-size: 0.95rem; color:#ccc; }\n\n  @media (max-width: 900px) {\n    .yt-filters { grid-template-columns: repeat(2, 1fr); }\n    .yt-row { grid-template-columns: 1fr; }\n  }\n\n  \/* Light scheme *\/\n  @media (prefers-color-scheme: light) {\n    .yt-row { background:#e0e0e0; border-color:#bbb; color:#111; }\n    .yt-row:hover { background:#f0f0f0; border-color:#999; }\n    .yt-player-card { background:#e0e0e0; border-color:#bbb; color:#111; }\n  }\n<\/style>\n\n\n\n<script src=\"https:\/\/yarntail.com\/wp-content\/uploads\/yarntail-sync.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>YarnTail \u00b7 Sync Catalog Filter by Artist, Track, Genre, Mood, and BPM. Click a row to play. Search (Artist \/ Track) Genre Mood BPM \u2013 Sort Artist (A\u2013Z)Artist (Z\u2013A)Track (A\u2013Z)Track<a href=\"https:\/\/yarntail.com\/index.php\/music-catalog\/\" class=\"more-link\"><span class=\"readmore\">Continue reading<span class=\"screen-reader-text\">Music Catalog<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"artist":[],"genre":[],"mood":[],"class_list":["post-74","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":8,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/pages\/74\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"artist","embeddable":true,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/artist?post=74"},{"taxonomy":"genre","embeddable":true,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/genre?post=74"},{"taxonomy":"mood","embeddable":true,"href":"https:\/\/yarntail.com\/index.php\/wp-json\/wp\/v2\/mood?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}