-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (146 loc) · 10.5 KB
/
index.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en-US" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="theme-color" content="#1db954">
<title>Spotify Tools</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
<link href="./static/css/bootstrap-multiselect.min.css" rel="stylesheet">
<link href="./static/css/style.css" rel="stylesheet">
</head>
<body>
<!-- <a href="#" target="_blank" class="github-link">
<i class="bi bi-github"></i> Repo <i class="bi bi-box-arrow-up-right small"></i>
</a> -->
<main id="app">
<div class="container-lg bg-dark rounded-bottom py-3 px-4">
<div style="position:relative">
<h1 class="display-4 text-md-center my-2">Spotify Tools</h1>
<button v-if="ACCESS_TOKEN" @click="disconnect" type="button" class="btn btn-secondary disconnect-btn">Disconnect</button>
</div>
<hr>
<div v-if="ACCESS_TOKEN == ''">
<h2>Features</h2>
<div class="bg-surface1 px-3 py-2 d-flex">
<div class="me-2">
<h4>Duplicates</h4>
<p class="lead mb-3">Finds songs in a playlist that share the same name (case-insensitive) and atleast 1 author.</p>
<p>Spotify alerts you if you try to add a song you already have in your playlist. This, however, does not work if the song is from different album or contains additional artists.</p>
</div>
<figure class="figure bg-dark rounded mb-0">
<img src="./static/img/DuplicatesExample.png" class="img-fluid rounded" alt="Duplicate Songs Example">
<figcaption class="figure-caption text-end px-3 py-2"><strong>Example:</strong> Identical songs from different albums</figcaption>
</figure>
</div>
<div class="bg-surface1 px-3 py-2 my-3">
<h4>Playlist Intersection</h4>
<p class="lead">Finds songs that exist in both playlists.</p>
</div>
<div class="bg-surface1 px-3 py-2 my-3">
<h4>Playlist Difference</h4>
<p class="lead">Finds songs that are in one playlist and not the others.</p>
</div>
<div class="bg-surface1 px-3 py-2 my-3">
<h4>Song Backup</h4>
<p class="lead">Download JSON file with listed songs from selected playlists.</p>
</div>
<div class="bg-surface1 px-3 py-2">
<h4>Artists Ranking</h4>
<p class="lead">Rank artists from selected playlists based on number of songs.</p>
</div>
<div class="d-flex justify-content-center mt-3">
<button @click="authenticate" type="button" class="btn btn-spotify btn-lg d-flex gap-2">
<span>Connect with</span><strong class="d-flex align-items-center gap-1"><img src="./static/img/Spotify_Icon_RGB_Black.png" alt="Spotify" style="max-height: 27px;"> Spotify</strong>
</button>
</div>
</div>
<div v-else class="d-flex flex-column flex-lg-row align-items-start">
<div class="nav flex-lg-column nav-pills bg-surface1 fs-4 mb-3 me-lg-3" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="duplicatesTab" data-bs-toggle="pill" data-bs-target="#duplicatesTabPanel" type="button" role="tab" aria-controls="duplicatesTabPanel" aria-selected="true">Duplicates</button>
<button class="nav-link" id="commonTab" data-bs-toggle="pill" data-bs-target="#commonTabPanel" type="button" role="tab" aria-controls="commonTabPanel" aria-selected="false">Intersection</button>
<button class="nav-link" id="differenceTab" data-bs-toggle="pill" data-bs-target="#differenceTabPanel" type="button" role="tab" aria-controls="differenceTabPanel" aria-selected="false">Difference</button>
<button class="nav-link" id="backupTab" data-bs-toggle="pill" data-bs-target="#backupTabPanel" type="button" role="tab" aria-controls="backupTabPanel" aria-selected="false">Backup</button>
<button class="nav-link" id="artistsTab" data-bs-toggle="pill" data-bs-target="#artistsTabPanel" type="button" role="tab" aria-controls="artistsTabPanel" aria-selected="false">Artists</button>
</div>
<div class="tab-content bg-surface1 flex-grow-1 align-self-stretch p-3">
<div class="tab-pane fade show active" id="duplicatesTabPanel" role="tabpanel" aria-labelledby="duplicatesTab" tabindex="0">
<p class="lead mb-3">Finds songs in a playlist that share the same name (case-insensitive) and atleast 1 artist.</p>
<div class="input-group input-group-lg">
<select v-model="duplicatesSelected" class="form-select" aria-label="Playlist select">
<option value="" selected>Select Playlist</option>
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<button @click="findDuplicates" class="btn btn-spotify" type="button" :disabled="duplicatesSelected == ''">Find Duplicates</button>
</div>
<div id="duplicatesResult"></div>
</div>
<div class="tab-pane fade ad-flex flex-column align-items-end gap-3" id="commonTabPanel" role="tabpanel" aria-labelledby="commonTab" tabindex="0">
<p class="lead align-self-start">Finds songs that exist in both playlists.</p>
<select v-model="commonSelected1" class="form-select form-select-lg" aria-label="Playlist select">
<option value="" selected>Select Playlist 1</option>
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<select v-model="commonSelected2" class="form-select form-select-lg" aria-label="Playlist select">
<option value="" selected>Select Playlist 2</option>
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<button @click="findCommon" class="btn btn-spotify btn-lg" type="button" :disabled="commonSelected1 == '' || commonSelected2 == ''">Find Common</button>
<div class="align-self-stretch" id="commonResult"></div>
</div>
<div class="tab-pane fade ad-flex flex-column align-items-end gap-3" id="differenceTabPanel" role="tabpanel" aria-labelledby="differenceTab" tabindex="0">
<p class="lead align-self-start">Finds songs that are in one playlist and not the others.</p>
<select v-model="diffSelected1" class="form-select form-select-lg" aria-label="Playlist select">
<option value="" selected>Select Playlist 1</option>
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<select class="form-select form-select-lg" aria-label="Playlist select" multiple="multiple" id="diffMultiselect">
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<button @click="findDiff" class="btn btn-spotify btn-lg" type="button" :disabled="diffSelected1 == '' || diffSelected2.length == 0">Find Difference</button>
<div class="align-self-stretch" id="diffResult"></div>
</div>
<div class="tab-pane fade ad-flex flex-column gap-3" id="backupTabPanel" role="tabpanel" aria-labelledby="backupTab" tabindex="0">
<p class="lead align-self-start">Download JSON file with listed songs from selected playlists.</p>
<div class="input-group input-group-lg">
<select class="form-select form-select-lg" aria-label="Playlist select" multiple="multiple" id="backupMultiselect">
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<button @click="getBackup" class="btn btn-spotify" type="button" :disabled="backupSelected.length == 0">Download</button>
</div>
</div>
<div class="tab-pane fade ad-flex flex-column gap-3" id="artistsTabPanel" role="tabpanel" aria-labelledby="artistsTab" tabindex="0">
<p class="lead align-self-start">Rank artists from selected playlists based on number of songs.</p>
<div class="input-group input-group-lg">
<select class="form-select form-select-lg" aria-label="Playlist select" multiple="multiple" id="artistsMultiselect">
<option v-for="playlist in playlists" :value="playlist.id">{{playlist.name}}</option>
</select>
<button @click="getArtists" class="btn btn-spotify" type="button" :disabled="artistsSelected.length == 0">Get</button>
</div>
<div class="align-self-stretch" id="artistsResult"></div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid mt-auto text-muted bg-dark-subtle rounded-top py-2 px-4 d-flex justify-content-center align-items-center">
<span>© Terra</span>
<a class="nav-link mx-2" href="https://github.com/itzTerra" target="_blank"><i class="bi bi-github"></i></a>
</footer>
<button id="back-to-top-btn" class="btn btn-info rounded-circle opacity-50">
<i class="bi bi-arrow-up-short fs-3"></i>
</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.prod.js"></script>
<!-- <script src="http://cdn.rawgit.com/h2non/jsHashes/master/hashes.js"></script> -->
<script src="./static/js/back_to_top_btn.js"></script>
<script src="./static/js/spotify-web-api.js"></script>
<script src="./static/js/bootstrap-multiselect.min.js"></script>
<script src="./static/js/app.js"></script>
</body>
</html>