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
<div data-controller="midwest-playlist" data-midwest-playlist-playlist-name-value="Lo-Fi Beats" data-midwest-playlist-autoplay-value="true" 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>Lo-Fi Beats</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/lofi-simplicity.mp3" data-title="Simplicity" data-artist="Lofi Girl" data-album="Beats to Study To" data-index="1" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Simplicity by Lofi Girl">
        <span class="midwest-song__index">
          01
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Simplicity</span> / Lofi Girl
          </h2>
        </div>
      </button>
    </div>
    <div data-src="/audio/lofi-coffee-break.mp3" data-title="Coffee Break" data-artist="Chill Hopper" data-album="Morning Vibes" data-index="2" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Coffee Break by Chill Hopper">
        <span class="midwest-song__index">
          02
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Coffee Break</span> / Chill Hopper
          </h2>
        </div>
      </button>
    </div>
    <div data-src="/audio/lofi-rainy-day.mp3" data-title="Rainy Day" data-artist="Ambient Waves" data-album="Weather Moods" data-index="3" class="midwest-song">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Rainy Day by Ambient Waves">
        <span class="midwest-song__index">
          03
        </span>
        <div class="midwest-song__tracklisting">
          <h2 class="midwest-song__info">
            <span>Rainy Day</span> / Ambient Waves
          </h2>
        </div>
      </button>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<%#
  Autoplay enabled — the playlist starts playing automatically when loaded.
%>
<%= midwest_playlist(name: "Lo-Fi Beats", autoplay: true) do |playlist| %>
  <% playlist.with_song(title: "Simplicity", artist: "Lofi Girl", album: "Beats to Study To", index: 1, src: "/audio/lofi-simplicity.mp3") %>
  <% playlist.with_song(title: "Coffee Break", artist: "Chill Hopper", album: "Morning Vibes", index: 2, src: "/audio/lofi-coffee-break.mp3") %>
  <% playlist.with_song(title: "Rainy Day", artist: "Ambient Waves", album: "Weather Moods", index: 3, src: "/audio/lofi-rainy-day.mp3") %>
<% end %>

Autoplay

Set +autoplay: true+ to start playing automatically when the page loads.

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

Annotate a preview to embed its Figma design here:

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