diff --git a/README.md b/README.md index 28e0bb0..94880a9 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,15 @@ It's a simple way to play music from Youtube and smoothly fade between tracks th ## What's next? ### Maybe one day -- Search videos straight from the app (needs API key and calls) +- ~~Search videos straight from the app (needs API key and calls)~~ - Compatibility with Bandcamp music (not sure if it can be done without too much hacks) +- A playlist of to-be-played tracks that can be added manually ("add url") or through the search +- A history of played tracks? ### Should be done quickly - Clean code (especially old P5JS) - Sanitize it (naming, organization, comments...) - Add current tracks/playlists as hashes in the URL so we can share track combinations +- Better indication of the video current status (playing or paused),maybe using `outline` on the iframe, or changing the `box-shadow color`? ## External resources and inspiration ### Inspiration diff --git a/css/main.css b/css/main.css index cd68970..72c26ac 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,5 @@ :root { - --bg-color: #223; + --bg-color: 34, 34, 51; /* #223 */ --text-color: #eee; --text-color-light: #bbb; --accent-color-1: #ff91d8; @@ -9,7 +9,6 @@ --crossfader-thumb-width: 30px; --crossfader-thumb-height: 60px; --crossfader-thumb-radius: 15px; - } @font-face { @@ -79,6 +78,11 @@ textarea { resize: vertical; } +a, a:visited { + color: inherit; + text-decoration: none; +} + #bg { z-index: -2; overflow: hidden; @@ -105,8 +109,7 @@ textarea { #players, #search-area { display: flex; justify-content: center; - padding-bottom: 2em; - gap: 15px; + /* gap: 15px; */ } .hidden { @@ -142,15 +145,20 @@ iframe { /* right: 0; */ } +input[type=button], button { + cursor: pointer; + border: none; + background-color: var(--accent-color-2); + color: rgb(var(--bg-color)); + border-radius: 5px; + font-weight: 900; + transition: transform 0.2s ease; +} + +input[type=button]:hover, button:hover { + transform: scale(1.1); +} .load-button { - /* flex-grow: 2; */ - cursor: pointer; - border: none; - background-color: var(--accent-color-2); - color: var(--bg-color); - font-weight: 900; - border-radius: 5px; - /* padding: 2em; */ width: 50%; } @@ -244,6 +252,8 @@ input[type=range]:focus { input[type=range]::-webkit-slider-runnable-track { background: var(--accent-color-1); border-radius: 25px; + margin-bottom: 0.5em; + height: 4px; width: 100%; cursor: pointer; } @@ -251,12 +261,13 @@ input[type=range]::-webkit-slider-thumb { background: var(--accent-color-2); border: solid var(--accent-color-1-light); border-width: 0px; + margin-top: -0.4em; + width: 1em; + height: 1em; + border-radius: 1em; cursor: pointer; -webkit-appearance: none; } -input[type=range]:focus::-webkit-slider-runnable-track { - background: var(--accent-color-1-light); -} input[type=range]::-moz-range-track { background: var(--accent-color-1); width: 100%; @@ -265,39 +276,10 @@ input[type=range]::-moz-range-track { } input[type=range]::-moz-range-thumb { background: var(--accent-color-2); - /* border: solid var(--accent-color-1-light); */ cursor: pointer; border-width: 0px; border-radius: var(--crossfader-thumb-radius); } -input[type=range]::-ms-track { - background: transparent; - border-color: transparent; - color: transparent; - width: 100%; - cursor: pointer; -} -input[type=range]::-ms-fill-lower { - background: var(--accent-color-1); - border-radius: 25px; -} -input[type=range]::-ms-fill-upper { - background: var(--accent-color-1); - border-radius: 25px; -} -input[type=range]::-ms-thumb { - background: var(--accent-color-2); - /* border: solid var(--accent-color-1-light); */ - cursor: pointer; - margin-top: 0px; - /*Needed to keep the Edge thumb centred*/ -} -input[type=range]:focus::-ms-fill-lower { - background: var(--accent-color-1); -} -input[type=range]:focus::-ms-fill-upper { - background: var(--accent-color-1-light); -} /*------------------------*/ input[type=range]#crossfader::-webkit-slider-runnable-track { @@ -307,12 +289,11 @@ input[type=range]#crossfader::-webkit-slider-thumb { margin-top: -20.65px; width: var(--crossfader-thumb-width); height: var(--crossfader-thumb-height); - /* border-width: 5px; - border-radius: 12px; */ + border-radius: var(--crossfader-thumb-radius); } input[type=range]#crossfader::-moz-range-track { - /* border-radius: 25px; */ + border-radius: var(--crossfader-thumb-radius); width: 100%; height: 13.3px; cursor: pointer; @@ -320,39 +301,100 @@ input[type=range]#crossfader::-moz-range-track { input[type=range]#crossfader::-moz-range-thumb { width: var(--crossfader-thumb-width); height: var(--crossfader-thumb-height); - /* border-width: 5px; */ - /* border-radius: 12px; */ + border-radius: var(--crossfader-thumb-radius); cursor: pointer; } -input[type=range]#crossfader::-ms-track { - /* border-width: 18.75px 0; */ - height: 13.3px; + +.search-wrapper { + /* margin-bottom: 2em; */ } -input[type=range]#crossfader::-ms-fill-lower { - /* border-width: 2.3px; - border-radius: 50px; */ +.search-bar-wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 2em; + margin-bottom: 1em; } -input[type=range]#crossfader::-ms-fill-upper { - /* border-radius: 50px; */ + +#search-bar { + display: flex; + column-gap: 1em; } -input[type=range]#crossfader::-ms-thumb { - width: var(--crossfader-thumb-width); - height: var(--crossfader-thumb-height); - /* border-width: 5px; - border-radius: 12px; */ - cursor: pointer; - margin-top: 0px; - /*Needed to keep the Edge thumb centred*/ +#search-bar input, #search-bar button { + height: 2em;; +} + +#search-button { + padding: 0.2em 1em; +} + +#search-results { + display: flex; + overflow: auto; + width: 95vw; + /* flex-direction: column; */ + column-gap: 1em; + /* padding-bottom: 1em; */ + + scrollbar-width: thin; + scrollbar-color: rgba(255,255,255,0.8) rgba(0,0,0,0); + border-radius: 6px; +} + +#search-results::-webkit-scrollbar { + height: 9px; +} +#search-results::-webkit-scrollbar-track { + background: rgba(0,0,0,0); +} +#search-results::-webkit-scrollbar-thumb { + background-color: rgba(255,255,255,0.8); + width: 9px; } +.search-item { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + position: relative; +} + +.search-item-info { + position: relative; +} + +.search-item-title { + position: absolute; + top: 0; + margin: 0.5em; +} + +.search-item-thumbnail img { + /* width: 80%; */ +} +.search-item-title span { + display: inline; + background-color: rgba(var(--bg-color), 0.8); + padding: 0.3em 0; + line-height: 1.8em; +} + +.search-item-controls { + display: flex; + /* justify-content: center; */ + column-gap: 1em; + margin: 0.5em; + position: absolute; + bottom: 0; +} +.load-to-A, .load-to-B { + padding: 0.5em; +} .footer { font-weight: 100; - padding-top: 2em; -} -.footer a, .footer a:visited { - color: var(--text-color); - text-decoration: none; + /* padding-top: 2em; */ } .footer span { diff --git a/index.html b/index.html index 5d8bf32..1383c49 100644 --- a/index.html +++ b/index.html @@ -84,24 +84,53 @@ +