FreeTube/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue at db91645f5e710f655cd8c54652459bf038203f5d · kommunarr/FreeTube · GitHub

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
<template>
  <ft-prompt
    theme="flex-column"
    :label="title"
    @click="hide"
  >
    <h2 class="heading">
      {{ title }}
    </h2>
    <p class="selected-count">
      {{ $tc('User Playlists.AddVideoPrompt.N playlists selected', selectedPlaylistCount, {
        playlistCount: selectedPlaylistCount,
      }) }}
    </p>
    <div
      class="searchInputsRow"
    >
      <ft-input
        ref="searchBar"
        :placeholder="$t('User Playlists.AddVideoPrompt.Search in Playlists')"
        :show-clear-text-button="true"
        :show-action-button="false"
        @input="(input) => updateQueryDebounce(input)"
        @clear="updateQueryDebounce('')"
      />
    </div>
    <div
      class="optionsRow"
    >
      <ft-toggle-switch
        :label="$t('User Playlists.Playlists with Matching Videos')"
        :compact="true"
        :default-value="doSearchPlaylistsWithMatchingVideos"
        @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
      />
      <ft-select
        v-if="allPlaylists.length > 1"
        class="sortSelect"
        :value="sortBy"
        :select-names="sortBySelectNames"
        :select-values="sortBySelectValues"
        :placeholder="$t('User Playlists.Sort By.Sort By')"
        :icon="getIconForSortPreference(sortBy)"
        @change="sortBy = $event"
      />
    </div>
    <div class="playlists-container">
      <ft-flex-box>
        <div
          v-for="(playlist, index) in activePlaylists"
          :key="playlist._id"
          class="playlist-selector-container"
        >
          <ft-playlist-selector
            tabindex="0"
            :playlist="playlist"
            :index="index"
            :selected="selectedPlaylistIdList.includes(playlist._id)"
            @selected="countSelected(playlist._id)"
          />
        </div>
      </ft-flex-box>
    </div>
    <div class="actions-container">
      <ft-flex-box>
        <ft-button
          :label="$t('User Playlists.Create New Playlist')"
          @click="openCreatePlaylistPrompt"
        />
        <ft-button
          :label="$t('User Playlists.AddVideoPrompt.Save')"
          @click="addSelectedToPlaylists"
        />
        <ft-button
          :label="$t('User Playlists.Cancel')"
          :text-color="null"
          :background-color="null"
          @click="hide"
        />
      </ft-flex-box>
    </div>
  </ft-prompt>
</template>

<script src="./ft-playlist-add-video-prompt.js" />
<style scoped src="./ft-playlist-add-video-prompt.css" />