Skip to content

Commit

Permalink
chore(player): remove desktop elements from mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbaraa
mbaraa committed Jun 18, 2024
1 parent 8967d50 commit 785f7d1
Showing 1 changed file with 72 additions and 60 deletions.
132 changes: 72 additions & 60 deletions app/views/components/player/collapsed_player.templ
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
package player

import "dankmuzikk/views/components/ui"

templ collapsedPlayer() {
<div
class={ "h-full", "flex", "justify-between", "items-center", "gap-x-2", "md:gap-x-5", }
Expand Down Expand Up @@ -34,9 +36,11 @@ templ collapsedPlayer() {
<p class={ "w-full" }>
<span id="song-name">Loading...</span>
</p>
<p class={ "hidden", "md:inline-block", "w-full" }>
<span id="artist-name"></span>
</p>
@ui.DesktopOnly() {
<p class={ "hidden", "md:inline-block", "w-full" }>
<span id="artist-name"></span>
</p>
}
</div>
</div>
<!-- seeker, time, and volume -->
Expand All @@ -47,21 +51,25 @@ templ collapsedPlayer() {
}
>
<div class={ "flex", "justify-between", "w-fit", "md:w-full", "items-center" }>
<div class={ "w-3/5", "hidden", "md:flex", "items-center", "gap-x-3" }>
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0408 7.0289C15.6748 7.87954 16.0505 8.9369 16.0505 10.0827C16.0505 11.2284 15.6748 12.2858 15.0408 13.1364M17.0606 3.25413C18.9204 4.93162 20.0909 7.3694 20.0909 10.0827C20.0909 12.7959 18.9204 15.2336 17.0606 16.9112M3.52522 7.0289H4.43552C4.99202 7.0289 5.27026 7.0289 5.5281 6.95899C5.75656 6.89705 5.97244 6.79516 6.16592 6.65794C6.38428 6.50309 6.5624 6.28767 6.91866 5.85686L9.57108 2.64929C10.0112 2.11711 10.2312 1.85101 10.4234 1.82331C10.5899 1.79933 10.7572 1.86041 10.8699 1.98621C11 2.13149 11 2.47787 11 3.17062V16.9946C11 17.6874 11 18.0338 10.8699 18.1791C10.7572 18.3049 10.5899 18.366 10.4234 18.342C10.2313 18.3143 10.0112 18.0482 9.57108 17.516L6.91866 14.3085C6.5624 13.8777 6.38428 13.6622 6.16592 13.5074C5.97244 13.3701 5.75656 13.2682 5.5281 13.2064C5.27026 13.1364 4.99202 13.1364 4.43552 13.1364H3.52522C2.95951 13.1364 2.67665 13.1364 2.46058 13.0255C2.27052 12.9279 2.116 12.7721 2.01915 12.5806C1.90906 12.3629 1.90906 12.0778 1.90906 11.5078V8.65758C1.90906 8.08745 1.90906 7.80244 2.01915 7.58469C2.116 7.39315 2.27052 7.23743 2.46058 7.13985C2.67665 7.0289 2.95951 7.0289 3.52522 7.0289Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<input
id="volume-seek-bar"
type="range"
min="0"
max="100"
value="100"
class={ "my-1", "w-full" }
/>
</div>
@ui.DesktopOnly() {
<div class={ "w-3/5", "hidden", "md:flex", "items-center", "gap-x-3" }>
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.0408 7.0289C15.6748 7.87954 16.0505 8.9369 16.0505 10.0827C16.0505 11.2284 15.6748 12.2858 15.0408 13.1364M17.0606 3.25413C18.9204 4.93162 20.0909 7.3694 20.0909 10.0827C20.0909 12.7959 18.9204 15.2336 17.0606 16.9112M3.52522 7.0289H4.43552C4.99202 7.0289 5.27026 7.0289 5.5281 6.95899C5.75656 6.89705 5.97244 6.79516 6.16592 6.65794C6.38428 6.50309 6.5624 6.28767 6.91866 5.85686L9.57108 2.64929C10.0112 2.11711 10.2312 1.85101 10.4234 1.82331C10.5899 1.79933 10.7572 1.86041 10.8699 1.98621C11 2.13149 11 2.47787 11 3.17062V16.9946C11 17.6874 11 18.0338 10.8699 18.1791C10.7572 18.3049 10.5899 18.366 10.4234 18.342C10.2313 18.3143 10.0112 18.0482 9.57108 17.516L6.91866 14.3085C6.5624 13.8777 6.38428 13.6622 6.16592 13.5074C5.97244 13.3701 5.75656 13.2682 5.5281 13.2064C5.27026 13.1364 4.99202 13.1364 4.43552 13.1364H3.52522C2.95951 13.1364 2.67665 13.1364 2.46058 13.0255C2.27052 12.9279 2.116 12.7721 2.01915 12.5806C1.90906 12.3629 1.90906 12.0778 1.90906 11.5078V8.65758C1.90906 8.08745 1.90906 7.80244 2.01915 7.58469C2.116 7.39315 2.27052 7.23743 2.46058 7.13985C2.67665 7.0289 2.95951 7.0289 3.52522 7.0289Z" stroke="var(--secondary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<input
id="volume-seek-bar"
type="range"
min="0"
max="100"
value="100"
class={ "my-1", "w-full" }
/>
</div>
}
<div>
<span id="song-current-time">00:00</span><span class={ "hidden", "md:inline-block" }>/ </span><span id="song-duration" class={ "hidden", "md:inline-block" }>00:00</span>
<span id="song-current-time">00:00</span>@ui.DesktopOnly() {
<span class={ "hidden", "md:inline-block" }>/ </span><span id="song-duration" class={ "hidden", "md:inline-block" }>00:00</span>
}
</div>
</div>
<input
Expand All @@ -76,53 +84,57 @@ templ collapsedPlayer() {
</div>
<!-- controls -->
<div class={ "flex", "items-center", "gap-x-0" }>
<button id="shuffle" class={ "hidden", "md:inline-block" } type="button" title="Shuffle" disabled>
<svg class={ "w-[30px]" } width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_170_535)">
<path d="M22.863 7.72233C22.327 8.25834 22.327 9.12732 22.863 9.66339C23.399 10.1994 24.2679 10.1994 24.804 9.66339L22.863 7.72233ZM28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217C27.9281 3.52616 27.0592 3.52616 26.5232 4.06217L28.4642 6.00326ZM26.5232 6.00326C27.0592 6.53928 27.9281 6.53928 28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217L26.5232 6.00326ZM24.804 0.402009C24.2679 -0.134003 23.399 -0.134003 22.863 0.402009C22.327 0.938018 22.327 1.80709 22.863 2.3431L24.804 0.402009ZM27.4937 6.40528C28.2517 6.40528 28.8663 5.79075 28.8663 5.03271C28.8663 4.27468 28.2517 3.66015 27.4937 3.66015V6.40528ZM12.3798 11.5987C11.9632 12.2319 12.1387 13.083 12.7721 13.4997C13.4054 13.9163 14.2565 13.7408 14.6732 13.1074L12.3798 11.5987ZM14.6732 13.1074C15.0897 12.4742 14.9143 11.623 14.2809 11.2063C13.6477 10.7898 12.7965 10.9653 12.3798 11.5987L14.6732 13.1074ZM1.87256 18.3008C1.11452 18.3008 0.5 18.9154 0.5 19.6734C0.5 20.4313 1.11452 21.0459 1.87256 21.0459V18.3008ZM14.6732 11.5987C14.2565 10.9653 13.4054 10.7898 12.7721 11.2063C12.1387 11.623 11.9632 12.4742 12.3798 13.1074L14.6732 11.5987ZM27.4937 21.0459C28.2517 21.0459 28.8663 20.4313 28.8663 19.6734C28.8663 18.9154 28.2517 18.3008 27.4937 18.3008V21.0459ZM12.3798 13.1074C12.7965 13.7408 13.6477 13.9163 14.2809 13.4997C14.9143 13.083 15.0897 12.2319 14.6732 11.5987L12.3798 13.1074ZM1.87256 3.66015C1.11452 3.66015 0.5 4.27468 0.5 5.03271C0.5 5.79075 1.11452 6.40528 1.87256 6.40528V3.66015ZM24.804 15.0427C24.2679 14.5067 23.399 14.5067 22.863 15.0427C22.327 15.5788 22.327 16.4477 22.863 16.9837L24.804 15.0427ZM26.5232 20.6438C27.0592 21.1799 27.9281 21.1799 28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029L26.5232 20.6438ZM28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029C27.9281 18.1669 27.0592 18.1669 26.5232 18.7029L28.4642 20.6438ZM22.863 22.363C22.327 22.899 22.327 23.7679 22.863 24.304C23.399 24.84 24.2679 24.84 24.804 24.304L22.863 22.363ZM24.804 9.66339L28.4642 6.00326L26.5232 4.06217L22.863 7.72233L24.804 9.66339ZM28.4642 4.06217L24.804 0.402009L22.863 2.3431L26.5232 6.00326L28.4642 4.06217ZM27.4937 3.66015H23.2845L23.2832 6.40528H27.4937V3.66015ZM23.2845 3.66015C19.7398 3.65671 16.4327 5.43824 14.4844 8.3997L16.7779 9.90839C18.2178 7.71951 20.6631 6.40273 23.2832 6.40528L23.2845 3.66015ZM14.4844 8.3997L12.3798 11.5987L14.6732 13.1074L16.7779 9.90839L14.4844 8.3997ZM12.3798 11.5987L10.2753 14.7977L12.5687 16.3063L14.6732 13.1074L12.3798 11.5987ZM10.2753 14.7977C8.83678 16.9842 6.39496 18.3008 3.77763 18.3008L3.77767 21.0459C7.31877 21.0457 10.6224 19.2647 12.5687 16.3063L10.2753 14.7977ZM3.77763 18.3008H1.87256V21.0459H3.77767L3.77763 18.3008ZM12.3798 13.1074L14.4844 16.3063L16.7779 14.7977L14.6732 11.5987L12.3798 13.1074ZM14.4844 16.3063C16.4327 19.2678 19.7411 21.0494 23.2858 21.0459L23.2845 18.3008C20.6644 18.3034 18.2178 16.9866 16.7779 14.7977L14.4844 16.3063ZM23.2858 21.0459H27.4937V18.3008H23.2845L23.2858 21.0459ZM14.6732 11.5987L12.5687 8.39968L10.2753 9.90839L12.3798 13.1074L14.6732 11.5987ZM12.5687 8.39968C10.6224 5.44136 7.3188 3.66025 3.77771 3.66015L3.77763 6.40528C6.39496 6.40535 8.83676 7.72181 10.2753 9.90839L12.5687 8.39968ZM3.77771 3.66015H1.87256V6.40528H3.77763L3.77771 3.66015ZM22.863 16.9837L26.5232 20.6438L28.4642 18.7029L24.804 15.0427L22.863 16.9837ZM26.5232 18.7029L22.863 22.363L24.804 24.304L28.4642 20.6438L26.5232 18.7029Z" fill="var(--secondary-color)"></path>
<path d="M5.48209 0.57385C5.23909 0.256924 4.72487 0.24324 4.33355 0.543285C3.94223 0.843329 3.82199 1.34348 4.06499 1.66041L21.6565 24.6034C21.8995 24.9203 22.4137 24.934 22.805 24.634C23.1963 24.3339 23.3166 23.8338 23.0736 23.5168L5.48209 0.57385Z" fill="var(--accent-color)"></path>
</g>
<defs>
<clipPath id="clip0_170_535">
<rect width="28.5714" height="25" fill="var(--accent-color)" transform="translate(0.5)"></rect>
</clipPath>
</defs>
</svg>
</button>
<button id="prev" class={ "hidden", "md:inline-block" } type="button" title="Previous song" disabled>
<svg class={ "w-[50px]" } width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1119 10.8769L16.3915 18.2226C15.7561 18.6753 15.3789 19.4072 15.3789 20.1872C15.3789 20.9674 15.7561 21.6992 16.3915 22.1518L26.1119 30.181C26.9332 30.8376 28.0483 30.9912 29.0165 30.581C29.9847 30.171 30.6502 29.2632 30.75 28.2164V12.8414C30.6502 11.7947 29.9847 10.8869 29.0165 10.4768C28.0483 10.0667 26.9332 10.2203 26.1119 10.8769Z" stroke="var(--secondary-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.25 10.2791V30.7791" stroke="var(--secondary-color)" stroke-width="5" stroke-linecap="round"></path>
</svg>
</button>
@ui.DesktopOnly() {
<button id="shuffle" class={ "hidden", "md:inline-block" } type="button" title="Shuffle" disabled>
<svg class={ "w-[30px]" } width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_170_535)">
<path d="M22.863 7.72233C22.327 8.25834 22.327 9.12732 22.863 9.66339C23.399 10.1994 24.2679 10.1994 24.804 9.66339L22.863 7.72233ZM28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217C27.9281 3.52616 27.0592 3.52616 26.5232 4.06217L28.4642 6.00326ZM26.5232 6.00326C27.0592 6.53928 27.9281 6.53928 28.4642 6.00326C29.0002 5.46725 29.0002 4.59818 28.4642 4.06217L26.5232 6.00326ZM24.804 0.402009C24.2679 -0.134003 23.399 -0.134003 22.863 0.402009C22.327 0.938018 22.327 1.80709 22.863 2.3431L24.804 0.402009ZM27.4937 6.40528C28.2517 6.40528 28.8663 5.79075 28.8663 5.03271C28.8663 4.27468 28.2517 3.66015 27.4937 3.66015V6.40528ZM12.3798 11.5987C11.9632 12.2319 12.1387 13.083 12.7721 13.4997C13.4054 13.9163 14.2565 13.7408 14.6732 13.1074L12.3798 11.5987ZM14.6732 13.1074C15.0897 12.4742 14.9143 11.623 14.2809 11.2063C13.6477 10.7898 12.7965 10.9653 12.3798 11.5987L14.6732 13.1074ZM1.87256 18.3008C1.11452 18.3008 0.5 18.9154 0.5 19.6734C0.5 20.4313 1.11452 21.0459 1.87256 21.0459V18.3008ZM14.6732 11.5987C14.2565 10.9653 13.4054 10.7898 12.7721 11.2063C12.1387 11.623 11.9632 12.4742 12.3798 13.1074L14.6732 11.5987ZM27.4937 21.0459C28.2517 21.0459 28.8663 20.4313 28.8663 19.6734C28.8663 18.9154 28.2517 18.3008 27.4937 18.3008V21.0459ZM12.3798 13.1074C12.7965 13.7408 13.6477 13.9163 14.2809 13.4997C14.9143 13.083 15.0897 12.2319 14.6732 11.5987L12.3798 13.1074ZM1.87256 3.66015C1.11452 3.66015 0.5 4.27468 0.5 5.03271C0.5 5.79075 1.11452 6.40528 1.87256 6.40528V3.66015ZM24.804 15.0427C24.2679 14.5067 23.399 14.5067 22.863 15.0427C22.327 15.5788 22.327 16.4477 22.863 16.9837L24.804 15.0427ZM26.5232 20.6438C27.0592 21.1799 27.9281 21.1799 28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029L26.5232 20.6438ZM28.4642 20.6438C29.0002 20.1079 29.0002 19.2389 28.4642 18.7029C27.9281 18.1669 27.0592 18.1669 26.5232 18.7029L28.4642 20.6438ZM22.863 22.363C22.327 22.899 22.327 23.7679 22.863 24.304C23.399 24.84 24.2679 24.84 24.804 24.304L22.863 22.363ZM24.804 9.66339L28.4642 6.00326L26.5232 4.06217L22.863 7.72233L24.804 9.66339ZM28.4642 4.06217L24.804 0.402009L22.863 2.3431L26.5232 6.00326L28.4642 4.06217ZM27.4937 3.66015H23.2845L23.2832 6.40528H27.4937V3.66015ZM23.2845 3.66015C19.7398 3.65671 16.4327 5.43824 14.4844 8.3997L16.7779 9.90839C18.2178 7.71951 20.6631 6.40273 23.2832 6.40528L23.2845 3.66015ZM14.4844 8.3997L12.3798 11.5987L14.6732 13.1074L16.7779 9.90839L14.4844 8.3997ZM12.3798 11.5987L10.2753 14.7977L12.5687 16.3063L14.6732 13.1074L12.3798 11.5987ZM10.2753 14.7977C8.83678 16.9842 6.39496 18.3008 3.77763 18.3008L3.77767 21.0459C7.31877 21.0457 10.6224 19.2647 12.5687 16.3063L10.2753 14.7977ZM3.77763 18.3008H1.87256V21.0459H3.77767L3.77763 18.3008ZM12.3798 13.1074L14.4844 16.3063L16.7779 14.7977L14.6732 11.5987L12.3798 13.1074ZM14.4844 16.3063C16.4327 19.2678 19.7411 21.0494 23.2858 21.0459L23.2845 18.3008C20.6644 18.3034 18.2178 16.9866 16.7779 14.7977L14.4844 16.3063ZM23.2858 21.0459H27.4937V18.3008H23.2845L23.2858 21.0459ZM14.6732 11.5987L12.5687 8.39968L10.2753 9.90839L12.3798 13.1074L14.6732 11.5987ZM12.5687 8.39968C10.6224 5.44136 7.3188 3.66025 3.77771 3.66015L3.77763 6.40528C6.39496 6.40535 8.83676 7.72181 10.2753 9.90839L12.5687 8.39968ZM3.77771 3.66015H1.87256V6.40528H3.77763L3.77771 3.66015ZM22.863 16.9837L26.5232 20.6438L28.4642 18.7029L24.804 15.0427L22.863 16.9837ZM26.5232 18.7029L22.863 22.363L24.804 24.304L28.4642 20.6438L26.5232 18.7029Z" fill="var(--secondary-color)"></path>
<path d="M5.48209 0.57385C5.23909 0.256924 4.72487 0.24324 4.33355 0.543285C3.94223 0.843329 3.82199 1.34348 4.06499 1.66041L21.6565 24.6034C21.8995 24.9203 22.4137 24.934 22.805 24.634C23.1963 24.3339 23.3166 23.8338 23.0736 23.5168L5.48209 0.57385Z" fill="var(--accent-color)"></path>
</g>
<defs>
<clipPath id="clip0_170_535">
<rect width="28.5714" height="25" fill="var(--accent-color)" transform="translate(0.5)"></rect>
</clipPath>
</defs>
</svg>
</button>
<button id="prev" class={ "hidden", "md:inline-block" } type="button" title="Previous song" disabled>
<svg class={ "w-[50px]" } width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1119 10.8769L16.3915 18.2226C15.7561 18.6753 15.3789 19.4072 15.3789 20.1872C15.3789 20.9674 15.7561 21.6992 16.3915 22.1518L26.1119 30.181C26.9332 30.8376 28.0483 30.9912 29.0165 30.581C29.9847 30.171 30.6502 29.2632 30.75 28.2164V12.8414C30.6502 11.7947 29.9847 10.8869 29.0165 10.4768C28.0483 10.0667 26.9332 10.2203 26.1119 10.8769Z" stroke="var(--secondary-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.25 10.2791V30.7791" stroke="var(--secondary-color)" stroke-width="5" stroke-linecap="round"></path>
</svg>
</button>
}
<button id="play" type="button" title="Play/Pause" disabled>
<div class="loader !h-10 !w-10"></div>
</button>
<button id="next" class={ "hidden", "md:inline-block" } type="button" title="Next song" disabled>
<svg class={ "w-[50px]" } width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8881 10.8769L24.6085 18.2226C25.2439 18.6753 25.6211 19.4072 25.6211 20.1872C25.6211 20.9674 25.2439 21.6992 24.6085 22.1518L14.8881 30.181C14.0668 30.8376 12.9517 30.9912 11.9835 30.581C11.0153 30.171 10.3498 29.2632 10.25 28.2164V12.8414C10.3498 11.7947 11.0153 10.8869 11.9835 10.4768C12.9517 10.0667 14.0668 10.2203 14.8881 10.8769Z" stroke="var(--secondary-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M30.75 10.2791V30.7791" stroke="var(--secondary-color)" stroke-width="5" stroke-linecap="round"></path>
</svg>
</button>
<button id="loop" class={ "hidden", "md:inline-block" } type="button" title="Loop" disabled>
<svg class={ "w-[30px]" } width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_170_513)">
<mask id="mask0_170_513" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="29" height="25">
<path d="M28.3333 0H0V25H28.3333V0Z" fill="white"></path>
</mask>
<g mask="url(#mask0_170_513)">
<path d="M2.36115 13.75L2.0777 12.5595C1.15135 8.66883 4.44686 5 8.86802 5H23.8889M23.8889 5L19.7223 8.75M23.8889 5L19.7223 1.25M25.9723 11.25L26.2557 12.4405C27.1821 16.3312 23.8865 20 19.4654 20H4.44448M4.44448 20L8.6111 16.25M4.44448 20L8.6111 23.75" stroke="var(--secondary-color)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.97807 0.771709L4.97806 0.771715C4.51448 1.12717 4.42682 1.79112 4.78227 2.25471L21.4896 24.0445C21.845 24.5081 22.509 24.5958 22.9726 24.2403C23.4361 23.8849 23.5238 23.2209 23.1684 22.7573L6.46106 0.967499C6.10561 0.503917 5.44165 0.416258 4.97807 0.771709Z" fill="var(--accent-color)"></path>
<path d="M4.97806 0.771715L4.97807 0.771709C5.44165 0.416258 6.10561 0.503917 6.46106 0.967499L23.1684 22.7573C23.5238 23.2209 23.4361 23.8849 22.9726 24.2403L22.9726 24.2403C22.509 24.5958 21.845 24.5081 21.4896 24.0445L4.78227 2.25471C4.42682 1.79112 4.51448 1.12717 4.97806 0.771715Z"></path>
@ui.DesktopOnly() {
<button id="next" class={ "hidden", "md:inline-block" } type="button" title="Next song" disabled>
<svg class={ "w-[50px]" } width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8881 10.8769L24.6085 18.2226C25.2439 18.6753 25.6211 19.4072 25.6211 20.1872C25.6211 20.9674 25.2439 21.6992 24.6085 22.1518L14.8881 30.181C14.0668 30.8376 12.9517 30.9912 11.9835 30.581C11.0153 30.171 10.3498 29.2632 10.25 28.2164V12.8414C10.3498 11.7947 11.0153 10.8869 11.9835 10.4768C12.9517 10.0667 14.0668 10.2203 14.8881 10.8769Z" stroke="var(--secondary-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M30.75 10.2791V30.7791" stroke="var(--secondary-color)" stroke-width="5" stroke-linecap="round"></path>
</svg>
</button>
<button id="loop" class={ "hidden", "md:inline-block" } type="button" title="Loop" disabled>
<svg class={ "w-[30px]" } width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_170_513)">
<mask id="mask0_170_513" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="29" height="25">
<path d="M28.3333 0H0V25H28.3333V0Z" fill="white"></path>
</mask>
<g mask="url(#mask0_170_513)">
<path d="M2.36115 13.75L2.0777 12.5595C1.15135 8.66883 4.44686 5 8.86802 5H23.8889M23.8889 5L19.7223 8.75M23.8889 5L19.7223 1.25M25.9723 11.25L26.2557 12.4405C27.1821 16.3312 23.8865 20 19.4654 20H4.44448M4.44448 20L8.6111 16.25M4.44448 20L8.6111 23.75" stroke="var(--secondary-color)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4.97807 0.771709L4.97806 0.771715C4.51448 1.12717 4.42682 1.79112 4.78227 2.25471L21.4896 24.0445C21.845 24.5081 22.509 24.5958 22.9726 24.2403C23.4361 23.8849 23.5238 23.2209 23.1684 22.7573L6.46106 0.967499C6.10561 0.503917 5.44165 0.416258 4.97807 0.771709Z" fill="var(--accent-color)"></path>
<path d="M4.97806 0.771715L4.97807 0.771709C5.44165 0.416258 6.10561 0.503917 6.46106 0.967499L23.1684 22.7573C23.5238 23.2209 23.4361 23.8849 22.9726 24.2403L22.9726 24.2403C22.509 24.5958 21.845 24.5081 21.4896 24.0445L4.78227 2.25471C4.42682 1.79112 4.51448 1.12717 4.97806 0.771715Z"></path>
</g>
</g>
</g>
<defs>
<clipPath id="clip0_170_513">
<rect width="28.3333" height="25" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<defs>
<clipPath id="clip0_170_513">
<rect width="28.3333" height="25" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
}
</div>
</div>
}

0 comments on commit 785f7d1

Please sign in to comment.