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
133
134
135
136
<div data-controller="midwest-playlist" data-midwest-playlist-playlist-name-value="Synthwave Playlist" data-midwest-playlist-autoplay-value="false" data-midwest-playlist-view-value="playlist" data-midwest-playlist-playlist-visible-value="true" data-midwest-playlist-artwork-value="false" class="midwest-playlist" view="playlist">
  <div class="midwest-playlist__title">
    <h6>Synthwave Playlist</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-index="1" class="midwest-song">
      <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">
          <h2 class="midwest-song__info">
            <span>Midnight City</span> / M83
          </h2>
        </div>
      </button>
    </div>
    <div data-src="/audio/kavinsky-nightcall.mp3" data-title="Nightcall" data-artist="Kavinsky" data-album="OutRun" data-index="2" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Nightcall by Kavinsky">
        <span class="midwest-song__index">
          02
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Nightcall</span> / Kavinsky
          </h2>
        </div>
      </button>
    </div>
    <div data-src="/audio/gunship-tech-noir.mp3" data-title="Tech Noir" data-artist="Gunship" data-album="Gunship" data-index="3" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Tech Noir by Gunship">
        <span class="midwest-song__index">
          03
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Tech Noir</span> / Gunship
          </h2>
        </div>
      </button>
    </div>
    <div data-src="/audio/home-resonance.mp3" data-title="Resonance" data-artist="Home" data-album="Odyssey" data-index="4" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Resonance by Home">
        <span class="midwest-song__index">
          04
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Resonance</span> / Home
          </h2>
        </div>
      </button>
    </div>
    <div data-src="/audio/perturbator-mainframe.mp3" data-title="Mainframe" data-artist="Perturbator" data-album="Dangerous Days" data-index="5" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Mainframe by Perturbator">
        <span class="midwest-song__index">
          05
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Mainframe</span> / Perturbator
          </h2>
        </div>
      </button>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<%#
  Default playlist — a basic audio player with track list.
  Keyboard controls: space (play/pause), left/right arrows (previous/next).
%>
<%= midwest_playlist(name: "Synthwave Playlist") do |playlist| %>
  <% playlist.with_song(title: "Midnight City", artist: "M83", album: "Hurry Up, We're Dreaming", index: 1, src: "/audio/m83-midnight-city.mp3") %>
  <% playlist.with_song(title: "Nightcall", artist: "Kavinsky", album: "OutRun", index: 2, src: "/audio/kavinsky-nightcall.mp3") %>
  <% playlist.with_song(title: "Tech Noir", artist: "Gunship", album: "Gunship", index: 3, src: "/audio/gunship-tech-noir.mp3") %>
  <% playlist.with_song(title: "Resonance", artist: "Home", album: "Odyssey", index: 4, src: "/audio/home-resonance.mp3") %>
  <% playlist.with_song(title: "Mainframe", artist: "Perturbator", album: "Dangerous Days", index: 5, src: "/audio/perturbator-mainframe.mp3") %>
<% end %>

Default

A basic playlist with several tracks. Click any track to play, use the controls to navigate, and click the progress bar to seek.

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

Annotate a preview to embed its Figma design here:

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