packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Library view container should display an empty local library 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="local_files_view"
>
<div
class="library_header_row"
>
<div
class="header_container"
>
Local Library
</div>
<button
class="ui basic icon button"
>
<i
aria-hidden="true"
class="chevron up icon"
/>
</button>
</div>
<div
class="ui segment library_folders"
>
<div
class="ui segment control_bar"
>
<button
class="ui icon inverted left labeled button add_folder"
>
<i
aria-hidden="true"
class="folder open icon"
/>
Add folders
</button>
<button
class="ui icon inverted button refresh_icon"
>
<i
aria-hidden="true"
class="refresh icon"
/>
</button>
</div>
<div
class="ui divider"
/>
<div
class="ui divided middle aligned list equalizer_list"
role="list"
>
<div
class="item"
role="listitem"
>
<div
class="right floated content"
>
<i
aria-hidden="true"
class="close icon folder_remove_icon"
/>
</div>
<div
class="content"
>
/home/nuclear/Music
</div>
</div>
</div>
</div>
<div
class="ui segment library_contents"
>
<div
class="search_field_row"
>
<div
class="ui inverted transparent left icon input"
>
<input
placeholder="Filter..."
type="text"
/>
<i
aria-hidden="true"
class="search icon"
/>
</div>
<div
class="ui buttons library_list_type_toggle"
>
<button
class="ui active icon inverted button"
data-testid="library-list-type-toggle-simple-list"
>
<i
aria-hidden="true"
class="unordered list icon"
/>
</button>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-album-grid"
>
<i
aria-hidden="true"
class="th icon"
/>
</button>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-folder-tree"
>
<i
aria-hidden="true"
class="folder icon"
/>
</button>
</div>
</div>
<div
class="library_empty_state"
>
<i
aria-hidden="true"
class="file audio outline icon"
/>
<h2>
The library is empty
</h2>
<div>
Try adding some music using the button above.
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Library view container should display local library in album grid mode 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="local_files_view"
>
<div
class="library_header_row"
>
<div
class="header_container"
>
Local Library
</div>
<button
class="ui basic icon button"
>
<i
aria-hidden="true"
class="chevron up icon"
/>
</button>
</div>
<div
class="ui segment library_folders"
>
<div
class="ui segment control_bar"
>
<button
class="ui icon inverted left labeled button add_folder"
>
<i
aria-hidden="true"
class="folder open icon"
/>
Add folders
</button>
<button
class="ui icon inverted button refresh_icon"
>
<i
aria-hidden="true"
class="refresh icon"
/>
</button>
</div>
<div
class="ui divider"
/>
<div
class="ui divided middle aligned list equalizer_list"
role="list"
>
<div
class="item"
role="listitem"
>
<div
class="right floated content"
>
<i
aria-hidden="true"
class="close icon folder_remove_icon"
/>
</div>
<div
class="content"
>
/home/nuclear/Music
</div>
</div>
</div>
</div>
<div
class="ui segment library_contents"
>
<div
class="search_field_row"
>
<div
class="ui inverted transparent left icon input"
>
<input
placeholder="Filter..."
type="text"
/>
<i
aria-hidden="true"
class="search icon"
/>
</div>
<div
class="ui buttons library_list_type_toggle"
>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-simple-list"
>
<i
aria-hidden="true"
class="unordered list icon"
/>
</button>
<button
class="ui active icon inverted button"
data-testid="library-list-type-toggle-album-grid"
>
<i
aria-hidden="true"
class="th icon"
/>
</button>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-folder-tree"
>
<i
aria-hidden="true"
class="folder icon"
/>
</button>
</div>
</div>
<div
class="ui inverted segment tracks_container"
>
<div
class="ui dimmer"
loading="false"
/>
<div
class="nuclear album_grid"
>
<div
class="album_cards"
>
<div
class="nuclear card_container"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
local album 1
</h4>
</div>
</div>
</div>
<div
class="nuclear card_container"
>
<div
class="card animated"
>
<div
class="thumbnail"
>
<div
class="overlay"
/>
</div>
<div
class="card_content"
>
<h4>
local album 2
</h4>
</div>
</div>
</div>
</div>
<hr />
<div
class="album_preview"
>
<div
class="album_cover"
>
<div
class="album_cover_overlay"
>
<button
class="ui huge basic icon button"
>
<i
aria-hidden="true"
class="plus icon"
/>
</button>
<button
class="ui huge basic icon button"
>
<i
aria-hidden="true"
class="play icon"
/>
</button>
</div>
</div>
<div
class="track_list"
>
<table>
<tbody>
<tr
class="track_row mini"
>
<td
class="track_row_position"
/>
<td
class="track_row_artist"
>
local artist 1
</td>
<td
class="track_row_name"
>
local track 1
</td>
<td
class="track_row_album"
>
local album 1
</td>
<td
class="track_row_duration"
>
05:00
</td>
</tr>
<tr
class="track_row mini"
>
<td
class="track_row_position"
/>
<td
class="track_row_artist"
>
local artist 1
</td>
<td
class="track_row_name"
>
local track 2
</td>
<td
class="track_row_album"
>
local album 1
</td>
<td
class="track_row_duration"
>
03:20
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Library view container should display local library in folder tree mode 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="local_files_view"
>
<div
class="library_header_row"
>
<div
class="header_container"
>
Local Library
</div>
<button
class="ui basic icon button"
>
<i
aria-hidden="true"
class="chevron up icon"
/>
</button>
</div>
<div
class="ui segment library_folders"
>
<div
class="ui segment control_bar"
>
<button
class="ui icon inverted left labeled button add_folder"
>
<i
aria-hidden="true"
class="folder open icon"
/>
Add folders
</button>
<button
class="ui icon inverted button refresh_icon"
>
<i
aria-hidden="true"
class="refresh icon"
/>
</button>
</div>
<div
class="ui divider"
/>
<div
class="ui divided middle aligned list equalizer_list"
role="list"
>
<div
class="item"
role="listitem"
>
<div
class="right floated content"
>
<i
aria-hidden="true"
class="close icon folder_remove_icon"
/>
</div>
<div
class="content"
>
/home/nuclear/Music
</div>
</div>
</div>
</div>
<div
class="ui segment library_contents"
>
<div
class="search_field_row"
>
<div
class="ui inverted transparent left icon input"
>
<input
placeholder="Filter..."
type="text"
/>
<i
aria-hidden="true"
class="search icon"
/>
</div>
<div
class="ui buttons library_list_type_toggle"
>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-simple-list"
>
<i
aria-hidden="true"
class="unordered list icon"
/>
</button>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-album-grid"
>
<i
aria-hidden="true"
class="th icon"
/>
</button>
<button
class="ui active icon inverted button"
data-testid="library-list-type-toggle-folder-tree"
>
<i
aria-hidden="true"
class="folder icon"
/>
</button>
</div>
</div>
<div
class="ui inverted segment tracks_container"
>
<div
class="ui dimmer"
loading="false"
/>
<div
style="overflow: visible; height: 0px; width: 0px;"
>
<div
class="BaseTable BaseTable--expandable"
style="position: relative;"
>
<div
class="BaseTable__table BaseTable__table-main"
role="table"
>
<div
class="BaseTable__body"
style="position: relative; overflow: auto; will-change: transform; direction: ltr;"
>
<div
style="height: 23px;"
/>
</div>
<div
class="BaseTable__header"
role="grid"
style="position: relative; overflow: hidden;"
>
<div
role="rowgroup"
>
<div
class="BaseTable__header-row"
role="row"
style="width: 100%; height: 50px;"
>
<div
class="BaseTable__header-cell"
data-key="name"
role="gridcell"
style="flex: 2 1 auto; width: 0px; overflow: hidden;"
>
<div
class="BaseTable__expand-icon"
style="font-family: initial; cursor: pointer; user-select: none; width: 16px; min-width: 16px; height: 16px; line-height: 16px; font-size: 16px; text-align: center; transition: transform 0.15s ease-out; transform: rotate(0deg); margin-left: 0px;"
/>
<div
class="BaseTable__header-cell-text"
>
Name
</div>
</div>
<div
class="BaseTable__header-cell"
data-key="album"
role="gridcell"
style="flex: 1 1 auto; width: 0px; overflow: hidden;"
>
<div
class="BaseTable__header-cell-text"
>
Album
</div>
</div>
<div
class="BaseTable__header-cell"
data-key="artist"
role="gridcell"
style="flex: 1 1 auto; width: 0px; overflow: hidden;"
>
<div
class="BaseTable__header-cell-text"
>
Artist
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="BaseTable__overlay"
/>
</div>
</div>
<div
class="resize-triggers"
>
<div
class="expand-trigger"
>
<div
style="width: 1px; height: 1px;"
/>
</div>
<div
class="contract-trigger"
/>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Library view container should display local library in simple list mode 1`] = `
<DocumentFragment>
<div
class="main_layout_container"
>
<div
class="local_files_view"
>
<div
class="library_header_row"
>
<div
class="header_container"
>
Local Library
</div>
<button
class="ui basic icon button"
>
<i
aria-hidden="true"
class="chevron up icon"
/>
</button>
</div>
<div
class="ui segment library_folders"
>
<div
class="ui segment control_bar"
>
<button
class="ui icon inverted left labeled button add_folder"
>
<i
aria-hidden="true"
class="folder open icon"
/>
Add folders
</button>
<button
class="ui icon inverted button refresh_icon"
>
<i
aria-hidden="true"
class="refresh icon"
/>
</button>
</div>
<div
class="ui divider"
/>
<div
class="ui divided middle aligned list equalizer_list"
role="list"
>
<div
class="item"
role="listitem"
>
<div
class="right floated content"
>
<i
aria-hidden="true"
class="close icon folder_remove_icon"
/>
</div>
<div
class="content"
>
/home/nuclear/Music
</div>
</div>
</div>
</div>
<div
class="ui segment library_contents"
>
<div
class="search_field_row"
>
<div
class="ui inverted transparent left icon input"
>
<input
placeholder="Filter..."
type="text"
/>
<i
aria-hidden="true"
class="search icon"
/>
</div>
<div
class="ui buttons library_list_type_toggle"
>
<button
class="ui active icon inverted button"
data-testid="library-list-type-toggle-simple-list"
>
<i
aria-hidden="true"
class="unordered list icon"
/>
</button>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-album-grid"
>
<i
aria-hidden="true"
class="th icon"
/>
</button>
<button
class="ui icon inverted button"
data-testid="library-list-type-toggle-folder-tree"
>
<i
aria-hidden="true"
class="folder icon"
/>
</button>
</div>
</div>
<div
class="ui inverted segment tracks_container"
>
<div
class="ui dimmer"
loading="false"
/>
<table
class="track_table"
role="table"
>
<thead>
<tr
role="row"
>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="title_with_icon"
data-testid="position-header"
>
<i
aria-hidden="true"
class="hashtag icon"
/>
<i
aria-hidden="true"
class="sort content ascending icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="center_aligned"
>
<i
aria-hidden="true"
class="image icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="title_with_icon"
>
Title
<i
aria-hidden="true"
class="sort content ascending disabled icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
<span
class="title_with_icon"
>
Artist
<i
aria-hidden="true"
class="sort content ascending disabled icon"
/>
</span>
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
Album
</th>
<th
colspan="1"
role="columnheader"
style="cursor: pointer;"
title="Toggle SortBy"
>
Length
</th>
<th
colspan="1"
role="columnheader"
>
<span
class="select_header"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle All Rows Selected"
type="checkbox"
value=""
/>
<label />
</div>
</span>
</th>
</tr>
</thead>
<tbody
data-rbd-droppable-context-id="0"
data-rbd-droppable-id="track_table"
role="rowgroup"
>
<tr
class=""
data-rbd-draggable-context-id="0"
data-rbd-draggable-id="local track 1 0"
data-testid="track-table-row"
role="row"
>
<td
class="position_cell narrow"
data-testid="position-cell"
role="cell"
>
<button
class="ui pink tiny circular icon button nuclear button add_button"
data-testid="play-now"
>
<i
aria-hidden="true"
class="play icon"
/>
</button>
<span
class="position_cell_value"
>
1
</span>
</td>
<td
class="thumbnail_cell narrow"
role="cell"
>
<img
class="thumbnail"
src="local track thumbnail 1"
/>
</td>
<td
class="title_cell"
data-testid="title-cell"
role="cell"
>
<span
class="title_cell_content"
>
<span
class="title_cell_value"
>
local track 1
</span>
<span
class="title_cell_buttons"
>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="add-to-queue"
>
<i
aria-hidden="true"
class="plus icon"
/>
</button>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="track-popup-trigger"
>
<i
aria-hidden="true"
class="ellipsis horizontal icon"
/>
</button>
</span>
</span>
</td>
<td
role="cell"
>
local artist 1
</td>
<td
role="cell"
>
local album 1
</td>
<td
role="cell"
>
05:00
</td>
<td
class="select_cell narrow"
role="cell"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle Row Selected"
type="checkbox"
value=""
/>
<label />
</div>
</td>
</tr>
<tr
class=""
data-rbd-draggable-context-id="0"
data-rbd-draggable-id="local track 2 1"
data-testid="track-table-row"
role="row"
>
<td
class="position_cell narrow"
data-testid="position-cell"
role="cell"
>
<button
class="ui pink tiny circular icon button nuclear button add_button"
data-testid="play-now"
>
<i
aria-hidden="true"
class="play icon"
/>
</button>
<span
class="position_cell_value"
>
2
</span>
</td>
<td
class="thumbnail_cell narrow"
role="cell"
>
<img
class="thumbnail"
src="local track thumbnail 2"
/>
</td>
<td
class="title_cell"
data-testid="title-cell"
role="cell"
>
<span
class="title_cell_content"
>
<span
class="title_cell_value"
>
local track 2
</span>
<span
class="title_cell_buttons"
>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="add-to-queue"
>
<i
aria-hidden="true"
class="plus icon"
/>
</button>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="track-popup-trigger"
>
<i
aria-hidden="true"
class="ellipsis horizontal icon"
/>
</button>
</span>
</span>
</td>
<td
role="cell"
>
local artist 1
</td>
<td
role="cell"
>
local album 1
</td>
<td
role="cell"
>
03:20
</td>
<td
class="select_cell narrow"
role="cell"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle Row Selected"
type="checkbox"
value=""
/>
<label />
</div>
</td>
</tr>
<tr
class=""
data-rbd-draggable-context-id="0"
data-rbd-draggable-id="local track 3 2"
data-testid="track-table-row"
role="row"
>
<td
class="position_cell narrow"
data-testid="position-cell"
role="cell"
>
<button
class="ui pink tiny circular icon button nuclear button add_button"
data-testid="play-now"
>
<i
aria-hidden="true"
class="play icon"
/>
</button>
<span
class="position_cell_value"
>
3
</span>
</td>
<td
class="thumbnail_cell narrow"
role="cell"
>
<img
class="thumbnail"
src="local track thumbnail 3"
/>
</td>
<td
class="title_cell"
data-testid="title-cell"
role="cell"
>
<span
class="title_cell_content"
>
<span
class="title_cell_value"
>
local track 3
</span>
<span
class="title_cell_buttons"
>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="add-to-queue"
>
<i
aria-hidden="true"
class="plus icon"
/>
</button>
<button
class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
data-testid="track-popup-trigger"
>
<i
aria-hidden="true"
class="ellipsis horizontal icon"
/>
</button>
</span>
</span>
</td>
<td
role="cell"
>
local artist 2
</td>
<td
role="cell"
>
local album 2
</td>
<td
role="cell"
>
01:40
</td>
<td
class="select_cell narrow"
role="cell"
>
<div
class="ui fitted checkbox nuclear checkbox"
style="cursor: pointer;"
>
<input
class="hidden"
readonly=""
tabindex="0"
title="Toggle Row Selected"
type="checkbox"
value=""
/>
<label />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;