feat: Audiobookshelf integration — browse, stream, chapters, sleep timer
- src/abs.js: full ABS API client + player engine - Login/token auth, library browsing, search - Playback session API (multi-file book support via startOffset) - Progress sync to ABS every 30s and on pause - Chapter navigation (prev/next/seek-to), ±10s / ±30s skip - Speed control (0.75–2×), sleep timer with countdown - index.html: sidebar nav, audiobooks/detail pages, full-screen player overlay, ABS settings section (URL + credentials + library picker) - state.js: abs + absPlayer state objects - views.js: navigate() handles 'audiobooks' and 'abs-book-detail' - styles.css: book grid, detail page, player overlay, pickers Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed
1 parent
719d4d9afd
commit
c17b7ea11a
7 files changed
+948
No files matched your search
+101
@@ -850,3 +850,104 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
|
||||
/* ── SEARCH page ── */
|
||||
.search-section{margin-bottom:24px}
|
||||
.search-section-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
AUDIOBOOKSHELF
|
||||
═══════════════════════════════════════════════════ */
|
||||
|
||||
/* -- Books grid -- */
|
||||
.abs-books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;padding-bottom:20px}
|
||||
.abs-book-card{cursor:pointer;transition:transform .15s}
|
||||
.abs-book-card:hover{transform:translateY(-2px)}
|
||||
.abs-book-cover-wrap{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface);margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
|
||||
.abs-book-cover{width:100%;height:100%;object-fit:cover;display:block}
|
||||
.abs-book-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--surface2)}
|
||||
.abs-book-prog-wrap{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.15)}
|
||||
.abs-book-prog-fill{height:100%;background:var(--accent);transition:width .3s}
|
||||
.abs-book-done{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#000}
|
||||
.abs-book-title{font-size:12px;font-weight:600;line-height:1.3;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.abs-book-author{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
|
||||
.abs-loading{padding:40px 20px;text-align:center;color:var(--text2);font-size:14px}
|
||||
.abs-empty{padding:40px 20px;text-align:center;color:var(--text2);font-size:14px}
|
||||
.abs-error{padding:20px;color:var(--danger);font-size:13px}
|
||||
|
||||
/* -- Book detail -- */
|
||||
.abs-detail-header{display:flex;gap:20px;margin-bottom:20px;align-items:flex-start}
|
||||
.abs-detail-cover-wrap{flex-shrink:0;width:140px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.5)}
|
||||
.abs-detail-cover{width:100%;height:100%;object-fit:cover;display:block}
|
||||
.abs-detail-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:50px;background:var(--surface2)}
|
||||
.abs-detail-meta{flex:1;min-width:0}
|
||||
.abs-detail-title{font-size:20px;font-weight:800;line-height:1.2;margin-bottom:6px}
|
||||
.abs-detail-author{font-size:13px;color:var(--text2);margin-bottom:4px}
|
||||
.abs-detail-series{font-size:12px;color:var(--accent);margin-bottom:4px}
|
||||
.abs-detail-year{font-size:12px;color:var(--text3);margin-bottom:4px}
|
||||
.abs-detail-dur{font-size:12px;color:var(--text3);margin-bottom:8px}
|
||||
.abs-detail-progress-wrap{display:flex;align-items:center;gap:8px;margin-bottom:10px}
|
||||
.abs-detail-progress-bar{flex:1;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}
|
||||
.abs-detail-progress-bar div{height:100%;background:var(--accent);border-radius:2px}
|
||||
.abs-detail-progress-wrap span{font-size:11px;color:var(--text2);flex-shrink:0}
|
||||
.abs-play-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#000;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s;margin-top:8px}
|
||||
.abs-play-btn:hover{opacity:.9;transform:translateY(-1px)}
|
||||
.abs-detail-desc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:20px;background:var(--surface);border-radius:var(--radius-sm);padding:14px;border:1px solid var(--border);max-height:120px;overflow-y:auto}
|
||||
.abs-detail-chapters{margin-top:4px}
|
||||
.abs-detail-chapters-title{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
|
||||
.abs-ch-count{font-size:12px;font-weight:400;color:var(--text2)}
|
||||
.abs-chapter-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}
|
||||
.abs-chapter-row:hover{background:var(--surface)}
|
||||
.abs-ch-num{font-size:11px;color:var(--text3);min-width:20px;text-align:right;flex-shrink:0}
|
||||
.abs-ch-title{flex:1;font-size:13px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.abs-ch-start{font-size:11px;color:var(--text3);flex-shrink:0;font-variant-numeric:tabular-nums}
|
||||
|
||||
/* -- Player overlay -- */
|
||||
.abs-player-overlay{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);overflow:hidden}
|
||||
.abs-player-overlay.open{transform:translateY(0)}
|
||||
.abs-player-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px;flex-shrink:0}
|
||||
.abs-player-label{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.5px;text-transform:uppercase}
|
||||
.abs-hbtn{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color .15s}
|
||||
.abs-hbtn:hover{color:var(--text)}
|
||||
.abs-cover-area{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 40px;min-height:0}
|
||||
.abs-cover-wrap{width:min(280px,calc(100vw - 80px));aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
|
||||
.abs-cover-img{width:100%;height:100%;object-fit:cover;display:block}
|
||||
.abs-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;background:var(--surface2)}
|
||||
.abs-player-info{text-align:center;padding:12px 24px 0;flex-shrink:0}
|
||||
.abs-player-title{font-size:18px;font-weight:800;line-height:1.2;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.abs-player-author{font-size:13px;color:var(--text2);margin-bottom:4px}
|
||||
.abs-player-chapter{font-size:12px;color:var(--accent);min-height:18px}
|
||||
.abs-progress-area{padding:12px 24px 0;flex-shrink:0}
|
||||
.abs-prog-bar{position:relative;height:32px;display:flex;align-items:center;cursor:pointer;touch-action:none}
|
||||
.abs-prog-track{position:relative;width:100%;height:4px;background:var(--surface2);border-radius:2px;overflow:visible}
|
||||
.abs-prog-fill{height:100%;background:var(--accent);border-radius:2px;pointer-events:none}
|
||||
.abs-prog-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--text);box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;transition:transform .1s}
|
||||
.abs-prog-bar:active .abs-prog-thumb{transform:translate(-50%,-50%) scale(1.3)}
|
||||
.abs-prog-times{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
|
||||
.abs-controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px 0;flex-shrink:0}
|
||||
.abs-ctrl-btn{background:none;border:none;color:var(--text2);cursor:pointer;padding:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;position:relative;flex-direction:column;gap:2px}
|
||||
.abs-ctrl-btn:hover{color:var(--text);background:var(--surface)}
|
||||
.abs-skip-label{font-size:9px;font-weight:700;color:var(--text3);line-height:1}
|
||||
.abs-play-pause{width:62px;height:62px;border-radius:50%;background:var(--accent);border:none;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--accent-glow);transition:transform .15s,opacity .15s;flex-shrink:0;margin:0 8px}
|
||||
.abs-play-pause:hover{transform:scale(1.05);opacity:.9}
|
||||
.abs-play-pause:active{transform:scale(.97)}
|
||||
.abs-extra-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 20px 16px;flex-shrink:0}
|
||||
.abs-picker-wrap{position:relative}
|
||||
.abs-extra-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--text2);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap}
|
||||
.abs-extra-btn:hover,.abs-extra-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
|
||||
.abs-picker{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.5);overflow:hidden;z-index:10;min-width:90px}
|
||||
.abs-picker.abs-picker-right{left:auto;right:0;transform:none}
|
||||
.abs-picker.open{display:block}
|
||||
.abs-picker button{display:block;width:100%;padding:9px 16px;background:none;border:none;color:var(--text);font-family:var(--font);font-size:13px;cursor:pointer;text-align:left;transition:background .15s;white-space:nowrap}
|
||||
.abs-picker button:hover{background:var(--surface2)}
|
||||
.abs-picker button.active{color:var(--accent);font-weight:700}
|
||||
.abs-chapter-list{flex-shrink:0;overflow-y:auto;max-height:0;transition:max-height .3s ease;border-top:1px solid transparent}
|
||||
.abs-chapter-list.open{max-height:220px;border-color:var(--border)}
|
||||
.abs-ch-item{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer;transition:background .15s}
|
||||
.abs-ch-item:hover{background:var(--surface)}
|
||||
.abs-ch-item.active{background:var(--accent-dim)}
|
||||
.abs-ch-item.active .abs-ch-title{color:var(--accent)}
|
||||
.abs-ch-item.active .abs-ch-num{color:var(--accent)}
|
||||
@media(max-width:768px){
|
||||
.abs-books-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
|
||||
.abs-detail-header{flex-direction:column;align-items:center;text-align:center}
|
||||
.abs-detail-cover-wrap{width:180px}
|
||||
.abs-cover-area{padding:8px 24px}
|
||||
.abs-cover-wrap{width:min(240px,calc(100vw - 48px))}
|
||||
}
|
||||
Reference in new issue
Block a user