Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<div style="background: var(--gray-12); padding: 2rem;">
  <div data-controller="midwest-playlist" data-midwest-playlist-playlist-name-value="Night Owl Mix" data-midwest-playlist-autoplay-value="false" data-midwest-playlist-view-value="playlist" data-midwest-playlist-playlist-visible-value="true" data-midwest-playlist-artwork-value="true" class="midwest-playlist is-dark" view="playlist">
    <div class="midwest-playlist__title">
      <h6>Night Owl Mix</h6>
      <button class="midwest-playlist__playlist-toggle" data-action="click->midwest-playlist#togglePlaylist" type="button">
        <h6 class="midwest-playlist__list-label">
          <div class="midwest-icon " aria-hidden="true">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M421.84 37.37a25.86 25.86 0 00-22.6-4.46L199.92 86.49A32.3 32.3 0 00176 118v226c0 6.74-4.36 12.56-11.11 14.83l-.12.05-52 18C92.88 383.53 80 402 80 423.91a55.54 55.54 0 0023.23 45.63A54.78 54.78 0 00135.34 480a55.82 55.82 0 0017.75-2.93l.38-.13 21.84-7.94A47.84 47.84 0 00208 423.91v-212c0-7.29 4.77-13.21 12.16-15.07l.21-.06L395 150.14a4 4 0 015 3.86v141.93c0 6.75-4.25 12.38-11.11 14.68l-.25.09-50.89 18.11A49.09 49.09 0 00304 375.92a55.67 55.67 0 0023.23 45.8 54.63 54.63 0 0049.88 7.35l.36-.12 21.84-7.95A47.83 47.83 0 00432 375.92V58a25.74 25.74 0 00-10.16-20.63z"></path></svg>
            </div>
          </div>
          list
        </h6>
      </button>
      <button class="midwest-playlist__view-toggle" data-action="click->midwest-playlist#toggleView" type="button">
        <h6 class="midwest-playlist__list-label">
          <div class="midwest-icon " aria-hidden="true">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><circle cx="256" cy="256" r="36"></circle><path d="M190.24 341.77a22 22 0 01-16.46-7.38 118 118 0 010-156.76 22 22 0 1132.87 29.24 74 74 0 000 98.29 22 22 0 01-16.43 36.61zM321.76 341.77a22 22 0 01-16.43-36.61 74 74 0 000-98.29 22 22 0 1132.87-29.24 118 118 0 010 156.76 22 22 0 01-16.44 7.38z"></path><path d="M139.29 392.72a21.92 21.92 0 01-16.08-7 190 190 0 010-259.49 22 22 0 1132.13 30.06 146 146 0 000 199.38 22 22 0 01-16.06 37zM372.71 392.72a22 22 0 01-16.06-37 146 146 0 000-199.38 22 22 0 1132.13-30.06 190 190 0 010 259.49 21.92 21.92 0 01-16.07 6.95z"></path><path d="M429 438a22 22 0 01-16.39-36.67 218.34 218.34 0 000-290.66 22 22 0 0132.78-29.34 262.34 262.34 0 010 349.34A22 22 0 01429 438zM83 438a21.94 21.94 0 01-16.41-7.33 262.34 262.34 0 010-349.34 22 22 0 0132.78 29.34 218.34 218.34 0 000 290.66A22 22 0 0183 438z"></path></svg>
            </div>
          </div>
          Player
        </h6>
      </button>
    </div>
    <div class="midwest-playlist__playing">
      <button class="midwest-playlist__toggle-button" data-action="click->midwest-playlist#togglePlay" type="button" aria-label="Play or pause">
        <div class="midwest-icon midwest-playlist__play-icon" aria-hidden="true" data-midwest-playlist-target="playIcon">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z"></path></svg>
          </div>
        </div>
        <div class="midwest-icon midwest-playlist__pause-icon" aria-hidden="true" hidden="hidden" data-midwest-playlist-target="pauseIcon">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M208 432h-48a16 16 0 01-16-16V96a16 16 0 0116-16h48a16 16 0 0116 16v320a16 16 0 01-16 16zM352 432h-48a16 16 0 01-16-16V96a16 16 0 0116-16h48a16 16 0 0116 16v320a16 16 0 01-16 16z"></path></svg>
          </div>
        </div>
      </button>
      <div class="midwest-playlist__details" data-midwest-playlist-target="details">
        <h2 data-midwest-playlist-target="trackTitle">Select a track</h2>
        <h3 data-midwest-playlist-target="trackArtist">—</h3>
      </div>
      <div class="midwest-playlist__artwork" data-midwest-playlist-target="artworkContainer">
        <div class="midwest-icon midwest-playlist__placeholder" aria-hidden="true" data-midwest-playlist-target="placeholderIcon">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M421.84 37.37a25.86 25.86 0 00-22.6-4.46L199.92 86.49A32.3 32.3 0 00176 118v226c0 6.74-4.36 12.56-11.11 14.83l-.12.05-52 18C92.88 383.53 80 402 80 423.91a55.54 55.54 0 0023.23 45.63A54.78 54.78 0 00135.34 480a55.82 55.82 0 0017.75-2.93l.38-.13 21.84-7.94A47.84 47.84 0 00208 423.91v-212c0-7.29 4.77-13.21 12.16-15.07l.21-.06L395 150.14a4 4 0 015 3.86v141.93c0 6.75-4.25 12.38-11.11 14.68l-.25.09-50.89 18.11A49.09 49.09 0 00304 375.92a55.67 55.67 0 0023.23 45.8 54.63 54.63 0 0049.88 7.35l.36-.12 21.84-7.95A47.83 47.83 0 00432 375.92V58a25.74 25.74 0 00-10.16-20.63z"></path></svg>
          </div>
        </div>
      </div>
      <div class="midwest-playlist__progress">
        <h6 data-midwest-playlist-target="currentTime">0:00</h6>
        <h6 data-midwest-playlist-target="totalTime">0:00</h6>
        <progress value="0" max="100" data-midwest-playlist-target="progressBar" data-action="click->midwest-playlist#seek"></progress>
      </div>
    </div>
    <div class="midwest-playlist__controls">
      <button class="midwest-playlist__button midwest-playlist__button--previous" data-action="click->midwest-playlist#previous" type="button" aria-label="Previous track">
        <div class="midwest-icon " aria-hidden="true">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M112 64a16 16 0 0116 16v136.43L360.77 77.11a35.13 35.13 0 0135.77-.44c12 6.8 19.46 20 19.46 34.33v290c0 14.37-7.46 27.53-19.46 34.33a35.14 35.14 0 01-35.77-.45L128 295.57V432a16 16 0 01-32 0V80a16 16 0 0116-16z"></path></svg>
          </div>
        </div>
      </button>
      <button class="midwest-playlist__button midwest-playlist__button--next" data-action="click->midwest-playlist#next" type="button" aria-label="Next track">
        <div class="midwest-icon " aria-hidden="true">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M400 64a16 16 0 00-16 16v136.43L151.23 77.11a35.13 35.13 0 00-35.77-.44C103.46 83.47 96 96.63 96 111v290c0 14.37 7.46 27.53 19.46 34.33a35.14 35.14 0 0035.77-.45L384 295.57V432a16 16 0 0032 0V80a16 16 0 00-16-16z"></path></svg>
          </div>
        </div>
      </button>
    </div>
    <audio data-midwest-playlist-target="audio" preload="auto" controls>
      <source data-midwest-playlist-target="audioSource" type="audio/mpeg">
    </audio>
    <div class="midwest-playlist__list" data-midwest-playlist-target="songList">
      <div data-src="/audio/after-dark.mp3" data-title="After Dark" data-artist="Mr.Kitty" data-album="Time" data-picture="/images/albums/after-dark.jpg" data-index="1" class="midwest-song has-artwork">
        <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play After Dark by Mr.Kitty">
          <span class="midwest-song__index">
            01
          </span>
          <div class="midwest-song__tracklisting">
            <img class="midwest-song__preview-image" alt="Album art for After Dark" src="/images/albums/after-dark.jpg" />
            <h2 class="midwest-song__info">
              <span>After Dark</span> / Mr.Kitty
            </h2>
          </div>
          <img class="midwest-song__backdrop" alt="Album art for After Dark by Mr.Kitty" src="/images/albums/after-dark.jpg" />
        </button>
      </div>
      <div data-src="/audio/dark-paradise.mp3" data-title="Dark Paradise" data-artist="Lana Del Rey" data-album="Born to Die" data-picture="/images/albums/born-to-die.jpg" data-index="2" class="midwest-song has-artwork">
        <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Dark Paradise by Lana Del Rey">
          <span class="midwest-song__index">
            02
          </span>
          <div class="midwest-song__tracklisting">
            <img class="midwest-song__preview-image" alt="Album art for Dark Paradise" src="/images/albums/born-to-die.jpg" />
            <h2 class="midwest-song__info">
              <span>Dark Paradise</span> / Lana Del Rey
            </h2>
          </div>
          <img class="midwest-song__backdrop" alt="Album art for Dark Paradise by Lana Del Rey" src="/images/albums/born-to-die.jpg" />
        </button>
      </div>
      <div data-src="/audio/m83-midnight-city.mp3" data-title="Midnight City" data-artist="M83" data-album="Hurry Up, We're Dreaming" data-picture="/images/albums/m83-hurry-up.jpg" data-index="3" class="midwest-song has-artwork">
        <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Midnight City by M83">
          <span class="midwest-song__index">
            03
          </span>
          <div class="midwest-song__tracklisting">
            <img class="midwest-song__preview-image" alt="Album art for Midnight City" src="/images/albums/m83-hurry-up.jpg" />
            <h2 class="midwest-song__info">
              <span>Midnight City</span> / M83
            </h2>
          </div>
          <img class="midwest-song__backdrop" alt="Album art for Midnight City by M83" src="/images/albums/m83-hurry-up.jpg" />
        </button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%#
  Dark mode playlist — styling optimized for dark backgrounds.
%>
<div style="background: var(--gray-12); padding: 2rem;">
  <%= midwest_playlist(name: "Night Owl Mix", dark: true, artwork: true) do |playlist| %>
    <% playlist.with_song(title: "After Dark", artist: "Mr.Kitty", album: "Time", picture: "/images/albums/after-dark.jpg", index: 1, src: "/audio/after-dark.mp3", artwork: true) %>
    <% playlist.with_song(title: "Dark Paradise", artist: "Lana Del Rey", album: "Born to Die", picture: "/images/albums/born-to-die.jpg", index: 2, src: "/audio/dark-paradise.mp3", artwork: true) %>
    <% playlist.with_song(title: "Midnight City", artist: "M83", album: "Hurry Up, We're Dreaming", picture: "/images/albums/m83-hurry-up.jpg", index: 3, src: "/audio/m83-midnight-city.mp3", artwork: true) %>
  <% end %>
</div>

Dark Mode

Dark mode styling for the playlist.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Playlist/dark_mode

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."