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
121
122
123
124
125
126
127
128
129
130
131
132
<div data-controller="midwest-playlist" data-midwest-playlist-playlist-name-value="Chill Vibes" 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" view="playlist">
  <div class="midwest-playlist__title">
    <h6>Chill Vibes</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/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="1" 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">
          01
        </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 data-src="/audio/weeknd-starboy.mp3" data-title="Starboy" data-artist="The Weeknd" data-album="Starboy" data-picture="/images/albums/starboy.jpg" data-index="2" class="midwest-song has-artwork">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Starboy by The Weeknd">
        <span class="midwest-song__index">
          02
        </span>
        <div class="midwest-song__tracklisting">
          <img class="midwest-song__preview-image" alt="Album art for Starboy" src="/images/albums/starboy.jpg" />
          <h2 class="midwest-song__info">
            <span>Starboy</span> / The Weeknd
          </h2>
        </div>
        <img class="midwest-song__backdrop" alt="Album art for Starboy by The Weeknd" src="/images/albums/starboy.jpg" />
      </button>
    </div>
    <div data-src="/audio/weeknd-blinding-lights.mp3" data-title="Blinding Lights" data-artist="The Weeknd" data-album="After Hours" data-picture="/images/albums/after-hours.jpg" data-index="3" class="midwest-song has-artwork">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Blinding Lights by The Weeknd">
        <span class="midwest-song__index">
          03
        </span>
        <div class="midwest-song__tracklisting">
          <img class="midwest-song__preview-image" alt="Album art for Blinding Lights" src="/images/albums/after-hours.jpg" />
          <h2 class="midwest-song__info">
            <span>Blinding Lights</span> / The Weeknd
          </h2>
        </div>
        <img class="midwest-song__backdrop" alt="Album art for Blinding Lights by The Weeknd" src="/images/albums/after-hours.jpg" />
      </button>
    </div>
    <div data-src="/audio/dua-lipa-levitating.mp3" data-title="Levitating" data-artist="Dua Lipa" data-album="Future Nostalgia" data-picture="/images/albums/future-nostalgia.jpg" data-index="4" class="midwest-song has-artwork">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Levitating by Dua Lipa">
        <span class="midwest-song__index">
          04
        </span>
        <div class="midwest-song__tracklisting">
          <img class="midwest-song__preview-image" alt="Album art for Levitating" src="/images/albums/future-nostalgia.jpg" />
          <h2 class="midwest-song__info">
            <span>Levitating</span> / Dua Lipa
          </h2>
        </div>
        <img class="midwest-song__backdrop" alt="Album art for Levitating by Dua Lipa" src="/images/albums/future-nostalgia.jpg" />
      </button>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%#
  Playlist with artwork — displays album art for the currently playing track
  and preview images in the track list.
%>
<%= midwest_playlist(name: "Chill Vibes", artwork: true) do |playlist| %>
  <% playlist.with_song(title: "Midnight City", artist: "M83", album: "Hurry Up, We're Dreaming", picture: "/images/albums/m83-hurry-up.jpg", index: 1, src: "/audio/m83-midnight-city.mp3", artwork: true) %>
  <% playlist.with_song(title: "Starboy", artist: "The Weeknd", album: "Starboy", picture: "/images/albums/starboy.jpg", index: 2, src: "/audio/weeknd-starboy.mp3", artwork: true) %>
  <% playlist.with_song(title: "Blinding Lights", artist: "The Weeknd", album: "After Hours", picture: "/images/albums/after-hours.jpg", index: 3, src: "/audio/weeknd-blinding-lights.mp3", artwork: true) %>
  <% playlist.with_song(title: "Levitating", artist: "Dua Lipa", album: "Future Nostalgia", picture: "/images/albums/future-nostalgia.jpg", index: 4, src: "/audio/dua-lipa-levitating.mp3", artwork: true) %>
<% end %>

With Artwork

Enable the +artwork:+ option to display album art next to each track and in the player area.

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/with_artwork

Annotate a preview to embed its Figma design here:

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