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
<div data-controller="midwest-playlist" data-midwest-playlist-playlist-name-value="Album Focus" data-midwest-playlist-autoplay-value="false" data-midwest-playlist-view-value="art" data-midwest-playlist-playlist-visible-value="true" data-midwest-playlist-artwork-value="true" class="midwest-playlist" view="art">
  <div class="midwest-playlist__title">
    <h6>Album Focus</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"><path d="M368 96H144a16 16 0 010-32h224a16 16 0 010 32zM400 144H112a16 16 0 010-32h288a16 16 0 010 32zM419.13 448H92.87A44.92 44.92 0 0148 403.13V204.87A44.92 44.92 0 0192.87 160h326.26A44.92 44.92 0 01464 204.87v198.26A44.92 44.92 0 01419.13 448z"></path></svg>
          </div>
        </div>
        Art
      </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/daft-punk-get-lucky.mp3" data-title="Get Lucky" data-artist="Daft Punk" data-album="Random Access Memories" data-picture="/images/albums/ram.jpg" data-index="1" class="midwest-song has-artwork">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Get Lucky by Daft Punk">
        <span class="midwest-song__index">
          01
        </span>
        <div class="midwest-song__tracklisting">
          <img class="midwest-song__preview-image" alt="Album art for Get Lucky" src="/images/albums/ram.jpg" />
          <h2 class="midwest-song__info">
            <span>Get Lucky</span> / Daft Punk
          </h2>
        </div>
        <img class="midwest-song__backdrop" alt="Album art for Get Lucky by Daft Punk" src="/images/albums/ram.jpg" />
      </button>
    </div>
    <div data-src="/audio/daft-punk-instant-crush.mp3" data-title="Instant Crush" data-artist="Daft Punk" data-album="Random Access Memories" data-picture="/images/albums/ram.jpg" data-index="2" class="midwest-song has-artwork">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Instant Crush by Daft Punk">
        <span class="midwest-song__index">
          02
        </span>
        <div class="midwest-song__tracklisting">
          <img class="midwest-song__preview-image" alt="Album art for Instant Crush" src="/images/albums/ram.jpg" />
          <h2 class="midwest-song__info">
            <span>Instant Crush</span> / Daft Punk
          </h2>
        </div>
        <img class="midwest-song__backdrop" alt="Album art for Instant Crush by Daft Punk" src="/images/albums/ram.jpg" />
      </button>
    </div>
    <div data-src="/audio/daft-punk-give-life-back.mp3" data-title="Give Life Back to Music" data-artist="Daft Punk" data-album="Random Access Memories" data-picture="/images/albums/ram.jpg" data-index="3" class="midwest-song has-artwork">
      <button type="button" data-action="click->midwest-playlist#playSong" aria-label="Play Give Life Back to Music by Daft Punk">
        <span class="midwest-song__index">
          03
        </span>
        <div class="midwest-song__tracklisting">
          <img class="midwest-song__preview-image" alt="Album art for Give Life Back to Music" src="/images/albums/ram.jpg" />
          <h2 class="midwest-song__info">
            <span>Give Life Back to Music</span> / Daft Punk
          </h2>
        </div>
        <img class="midwest-song__backdrop" alt="Album art for Give Life Back to Music by Daft Punk" src="/images/albums/ram.jpg" />
      </button>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<%#
  Art view mode — album art takes focus with track details shown on hover.
  Click the Player/Art toggle button to switch views.
%>
<%= midwest_playlist(name: "Album Focus", view: :art, artwork: true) do |playlist| %>
  <% playlist.with_song(title: "Get Lucky", artist: "Daft Punk", album: "Random Access Memories", picture: "/images/albums/ram.jpg", index: 1, src: "/audio/daft-punk-get-lucky.mp3", artwork: true) %>
  <% playlist.with_song(title: "Instant Crush", artist: "Daft Punk", album: "Random Access Memories", picture: "/images/albums/ram.jpg", index: 2, src: "/audio/daft-punk-instant-crush.mp3", artwork: true) %>
  <% playlist.with_song(title: "Give Life Back to Music", artist: "Daft Punk", album: "Random Access Memories", picture: "/images/albums/ram.jpg", index: 3, src: "/audio/daft-punk-give-life-back.mp3", artwork: true) %>
<% end %>

Art View

Switch to art view mode for a focused album-art display with track details shown on hover.

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

Annotate a preview to embed its Figma design here:

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