├── .gitignore
├── .prettierrc.yaml
├── icons
├── cdj-0.77rem.png
├── cdj-2.15rem.png
└── camelotdj-1.87rem.png
├── zip-me.sh
├── screenshot
├── hold-bin-1280x800.png
└── top100-1400x560.png
├── manifest.json
├── console-beatport.js
├── console-traxsource.js
├── src
├── options.html
├── options.css
├── content.css
└── content.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | **/.DS_Store
2 | *.zip
3 |
--------------------------------------------------------------------------------
/.prettierrc.yaml:
--------------------------------------------------------------------------------
1 | tabWidth: 4
2 | printWidth: 120
3 | singleQuote: true
--------------------------------------------------------------------------------
/icons/cdj-0.77rem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qel/camelotdj/HEAD/icons/cdj-0.77rem.png
--------------------------------------------------------------------------------
/icons/cdj-2.15rem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qel/camelotdj/HEAD/icons/cdj-2.15rem.png
--------------------------------------------------------------------------------
/icons/camelotdj-1.87rem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qel/camelotdj/HEAD/icons/camelotdj-1.87rem.png
--------------------------------------------------------------------------------
/zip-me.sh:
--------------------------------------------------------------------------------
1 | rm camelotdj.zip
2 | zip camelotdj.zip -r manifest.json icons/* src/* -x "*.DS_Store" -x ".*"
--------------------------------------------------------------------------------
/screenshot/hold-bin-1280x800.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qel/camelotdj/HEAD/screenshot/hold-bin-1280x800.png
--------------------------------------------------------------------------------
/screenshot/top100-1400x560.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qel/camelotdj/HEAD/screenshot/top100-1400x560.png
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Camelot DJ",
3 | "version": "0.4.2",
4 | "homepage_url": "http://camelotdj.com",
5 | "description": "Filter Beatport track lists by key.",
6 | "short_name": "camelotdj",
7 | "manifest_version": 2,
8 | "permissions": [],
9 | "icons": {
10 | "16": "icons/cdj-0.77rem.png",
11 | "48": "icons/cdj-2.15rem.png",
12 | "128": "icons/camelotdj-1.87rem.png"
13 | },
14 | "options_page": "src/options.html",
15 | "content_scripts": [
16 | {
17 | "matches": ["https://www.beatport.com/*"],
18 | "run_at": "document_start",
19 | "js": ["src/content.js"],
20 | "css": ["src/content.css"]
21 | }
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/console-beatport.js:
--------------------------------------------------------------------------------
1 | // Rewrite a Beatport Top 100 page -- add key/bpm column -- works in Chrome / Firefox
2 |
3 | // prettier-ignore
4 | beatportKeyToCamelotKey = {
5 | 'G♯ min': '1A', 'A♭ min': '1A', 'B maj': '1B',
6 | 'D♯ min': '2A', 'E♭ min': '2A', 'F♯ maj': '2B', 'G♭ maj': '2B',
7 | 'A♯ min': '3A', 'B♭ min': '3A', 'C♯ maj': '3B', 'D♭ maj': '3B',
8 | 'F min': '4A', 'G♯ maj': '4B', 'A♭ maj': '4B',
9 | 'C min': '5A', 'D♯ maj': '5B', 'E♭ maj': '5B',
10 | 'G min': '6A', 'A♯ maj': '6B', 'B♭ maj': '6B',
11 | 'D min': '7A', 'F maj': '7B',
12 | 'A min': '8A', 'C maj': '8B',
13 | 'E min': '9A', 'G maj': '9B',
14 | 'B min': '10A', 'D maj': '10B',
15 | 'F♯ min': '11A', 'G♭ min': '11A', 'A maj': '11B',
16 | 'C♯ min': '12A', 'D♭ min': '12A', 'E maj': '12B'
17 | };
18 | // prettier-ignore
19 | document.head.insertAdjacentHTML('beforeend', [
20 | ''
25 | ].join('\n'));
26 | if ((labelColumnHeader = document.querySelector('.bucket-track-header-col.buk-track-labels'))) {
27 | labelColumnHeader.innerHTML = 'BPM
KEY
';
28 | Array.from(document.querySelectorAll('li .buk-track-labels')).forEach((label, i) => {
29 | if ((info = window.Playables && window.Playables.tracks && window.Playables.tracks[i])) {
30 | label.innerHTML = `${info.bpm}
${beatportKeyToCamelotKey[info.key]}
`;
31 | }
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/console-traxsource.js:
--------------------------------------------------------------------------------
1 | // Traxsource.com Top 100 pages -- add key/bpm column
2 |
3 | // This script is pretty silly.
4 | // It fetches all 100 pages for each track to populate the BPM/key data.
5 |
6 | // prettier-ignore
7 | traxsourceKeyToCamelotKey = {
8 | 'G#min': '1A', 'Bmaj': '1B',
9 | 'D#min': '2A', 'F#maj': '2B',
10 | 'A#min': '3A', 'C#maj': '3B',
11 | 'Fmin': '4A', 'G#maj': '4B',
12 | 'Cmin': '5A', 'D#maj': '5B',
13 | 'Gmin': '6A', 'A#maj': '6B',
14 | 'Dmin': '7A', 'Fmaj': '7B',
15 | 'Amin': '8A', 'Cmaj': '8B',
16 | 'Emin': '9A', 'Gmaj': '9B',
17 | 'Bmin': '10A', 'Dmaj': '10B',
18 | 'F#min': '11A', 'Amaj': '11B',
19 | 'C#min': '12A', 'Emaj': '12B'
20 | };
21 | // prettier-ignore
22 | document.head.insertAdjacentHTML('beforeend', [
23 | ''
28 | ].join('\n'));
29 | if ((labelColumnHeader = document.querySelector('.trk-row.hdr .label'))) {
30 | labelColumnHeader.innerHTML = 'BPM
KEY
';
31 | Array.from(document.getElementsByClassName('trk-row play-trk')).forEach(trackRow => {
32 | const titleLink = trackRow.querySelector('.title a');
33 | const label = trackRow.getElementsByClassName('label')[0];
34 | if (titleLink && label) {
35 | fetch(titleLink.href)
36 | .then(r => r.text())
37 | .then(txt => {
38 | const det = txt.split('');
39 | if (det.length > 6) {
40 | const key = det[5].split('<')[0];
41 | const bpm = det[6].split('<')[0];
42 | label.innerHTML = ` ${bpm} ${traxsourceKeyToCamelotKey[key]} `;
43 | }
44 | });
45 | }
46 | });
47 | }
48 |
--------------------------------------------------------------------------------
/src/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | camelotdj
9 |
10 | Nothing to see here...
11 | The Options page does not currently have options.
12 |
14 | Top 100 Link Bar
15 |
18 |
30 | BPM KEY ';
55 | Array.from(document.querySelectorAll('li .buk-track-labels')).forEach((label, i) => {
56 | if ((info = window.Playables && window.Playables.tracks && window.Playables.tracks[i])) {
57 | label.innerHTML = `${info.bpm} ${beatportKeyToCamelotKey[info.key]} `;
58 | }
59 | });
60 | }
61 | ```
62 |
63 |
64 |
65 | ### The code
66 |
67 | Doing this in the console is a lot easier than doing it in an extension because of sandboxing.
68 |
69 | We can't get to the window object, and Beatport uses a lot of AJAX, and the track data lives in a dynamically-loaded script tag. Injecting all the code to hijack XHR events gets really messy, so we just grab the script tag and evaluate it. Then we have a polling function which checks to see when the URL changes after an AJAX call, and then we reload the data.
70 |
71 |
72 |
73 | ### Contact
74 |
75 | If you think I picked terrible genres, feel free to ping me on Reddit and tell me how awful I am.
76 |
77 | If you think showing the matching major/minor keys is an affront to music theory, feel free to explain to me how I can be better at this mixing thing.
78 |
79 | [u/raquel-eve](https://www.reddit.com/user/raquel-eve)
80 |
--------------------------------------------------------------------------------
/src/content.js:
--------------------------------------------------------------------------------
1 | // prettier-ignore
2 | const beatportKeyToCamelotKey = {
3 | 'G♯ min': '1A', 'A♭ min': '1A', 'B maj': '1B',
4 | 'D♯ min': '2A', 'E♭ min': '2A', 'F♯ maj': '2B', 'G♭ maj': '2B',
5 | 'A♯ min': '3A', 'B♭ min': '3A', 'C♯ maj': '3B', 'D♭ maj': '3B',
6 | 'F min': '4A', 'G♯ maj': '4B', 'A♭ maj': '4B',
7 | 'C min': '5A', 'D♯ maj': '5B', 'E♭ maj': '5B',
8 | 'G min': '6A', 'A♯ maj': '6B', 'B♭ maj': '6B',
9 | 'D min': '7A', 'F maj': '7B',
10 | 'A min': '8A', 'C maj': '8B',
11 | 'E min': '9A', 'G maj': '9B',
12 | 'B min': '10A', 'D maj': '10B',
13 | 'F♯ min': '11A', 'G♭ min': '11A', 'A maj': '11B',
14 | 'C♯ min': '12A', 'D♭ min': '12A', 'E maj': '12B'
15 | };
16 |
17 | // prettier-ignore
18 | const linkGenres = {
19 | 'min•tech': 14,
20 | 'raw•tech': 92,
21 | 'techno': 6,
22 | 'mel•h+t': 90,
23 | 'prog•hs': 15,
24 | 'trance': 7,
25 | 'electro': 3,
26 | 'breaks': 9,
27 | 'ind•dnc': 37,
28 | 'tech•hs': 11,
29 | 'house': 5,
30 | 'orgnic•dt': 93,
31 | 'deep•hs': 12,
32 | };
33 |
34 | const HOLD_BIN_URL = 'https://www.beatport.com/hold-bin/tracks?per-page=150';
35 |
36 | const POLLING_INTERVAL = 100; // checking for URL changes and XHR responses that update lists
37 |
38 |
39 |
40 | // logging
41 | const myLog = (...args) => console.log.apply(console, ['CamelotDJ:'].concat(args));
42 |
43 | // convert key dataset to string -- note that the dataset stringifies everything
44 | const keyStr = datasetObj => datasetObj.keyNum + (datasetObj.minor.toString() === 'true' ? 'A' : 'B');
45 |
46 |
47 |
48 | // UI: build the key selector
49 | const keySelectButtons = [];
50 | const mainContainer = document.createElement('div');
51 | const keySelectContainer = document.createElement('div');
52 | const keySelectLabel = document.createElement('a');
53 | const keySelectGrid = document.createElement('div');
54 | mainContainer.className = 'camelotdj-main';
55 | keySelectContainer.className = 'inner-container';
56 | keySelectLabel.className = 'key-label';
57 | keySelectGrid.className = 'key-grid';
58 | keySelectLabel.innerHTML = 'CamelotDJ';
59 | keySelectLabel.href = HOLD_BIN_URL;
60 | keySelectContainer.appendChild(keySelectLabel);
61 | keySelectContainer.appendChild(keySelectGrid);
62 | for (const minor of [true, false]) {
63 | const rowDiv = document.createElement('div');
64 | rowDiv.className = 'key-row';
65 | for (let keyNum = 1; keyNum <= 12; keyNum += 1) {
66 | const colDiv = document.createElement('div');
67 | colDiv.className = 'key-col';
68 | colDiv.textContent = keyStr({ keyNum, minor });
69 | colDiv.dataset.keyNum = keyNum;
70 | colDiv.dataset.minor = minor;
71 | keySelectButtons.push(colDiv);
72 | rowDiv.appendChild(colDiv);
73 | }
74 | keySelectGrid.appendChild(rowDiv);
75 | }
76 | mainContainer.appendChild(keySelectContainer);
77 |
78 | // UI: build row of links
79 | const genreLinks = {};
80 | const linkContainer = document.createElement('div');
81 | const linkLabel = document.createElement('div');
82 | const linkRow = document.createElement('div');
83 | linkContainer.className = 'inner-container';
84 | linkLabel.className = 'link-label';
85 | linkRow.className = 'link-row';
86 | linkLabel.innerHTML = 'top100s';
87 | for (const [gName, gNum] of Object.entries(linkGenres)) {
88 | const a = document.createElement('a');
89 | a.href = `https://www.beatport.com/genre/${gName}/${gNum}/top-100`;
90 | a.textContent = gName;
91 | genreLinks[gNum] = a;
92 | linkRow.appendChild(a);
93 | }
94 | linkContainer.appendChild(linkLabel);
95 | linkContainer.appendChild(linkRow);
96 | mainContainer.appendChild(linkContainer);
97 |
98 |
99 |
100 | // match URL
101 |
102 | // split path example:
103 | //
104 | // ['', 'cart', 'cart', 'BaSe64sTuFf==']
105 | // ['', 'hold-bin']
106 | // ['', 'genre', 'techno', '6', 'top-100']
107 |
108 | const pathMathches = wildcardPath => {
109 | const splitPath = window.location.pathname.split('/');
110 | const splitWild = wildcardPath.split('/');
111 | if (splitPath.length < splitWild.length) return false;
112 | for (const seg in splitWild) {
113 | if (splitWild[seg] !== '*' && splitWild[seg] !== splitPath[seg]) return false;
114 | }
115 | return true;
116 | }
117 |
118 | const getGenreNumberSeg = () => {
119 | const splitPath = window.location.pathname.split('/');
120 | if (splitPath.length < 4 || splitPath[1] !== 'genre') return null;
121 | return splitPath[3];
122 | }
123 |
124 | const urlIsTop100 = () => pathMathches('/genre/*/*/top-100');
125 | const urlIsMainCart = () => pathMathches('/cart/cart');
126 | const urlIsCustomCart = () => pathMathches('/cart/*') && !urlIsMainCart();
127 | const urlIsHoldBin = () => pathMathches('/hold-bin');
128 | const urlIsSearchPage = () => pathMathches('/search/tracks');
129 |
130 |
131 |
132 | // global track data object
133 | let tracks = {};
134 |
135 | // parse JSON track data in page scripts
136 | const parseScriptTracks = (scriptElement, assignedVarName, ...nestedVarNames) => {
137 | const scriptText = scriptElement.text;
138 | const objStart = scriptText.indexOf('{', scriptText.indexOf(assignedVarName) + assignedVarName.length);
139 | const objEnd = scriptText.indexOf('};', objStart) + 1;
140 | let varData = JSON.parse(scriptText.slice(objStart, objEnd));
141 | nestedVarNames.forEach(v => {
142 | varData = varData[v];
143 | })
144 | myLog(varData.length, assignedVarName, 'tracks found.');
145 | varData.forEach(track => {
146 | if (!(track.id in tracks)) {
147 | if (track.bpm && track.key) {
148 | tracks[track.id] = {
149 | key: track.key,
150 | bpm: track.bpm,
151 | camelot: beatportKeyToCamelotKey[track.key]
152 | };
153 | }
154 | myLog(track.id, 'name:', track.name, 'mix:', track.mix, 'bpm:', track.bpm, 'key:', track.key);
155 | }
156 | });
157 | scriptElement.dataset.parsed = 'parsed'; // flag it so we don't keep reloading the same data
158 | }
159 |
160 |
161 |
162 | // global key selection vars
163 | let selectedKey = null;
164 | let matchingKeys = [];
165 |
166 | // Selects a key basted on {keyNum, minor} object and stores matching keys in matchingKeys
167 | const selectKey = datasetObj => {
168 | myLog('selectKey()', datasetObj);
169 |
170 | // reset all buttons to only the default class
171 | for (const btn of keySelectButtons) {
172 | btn.className = 'key-col';
173 | }
174 |
175 | if (datasetObj) {
176 | selectedKey = keyStr(datasetObj);
177 | const keyNum = parseInt(datasetObj.keyNum);
178 | const minor = datasetObj.minor.toString() === 'true';
179 |
180 | // put the selection in storage
181 | window.localStorage.setItem('camelotdj.keyNum', keyNum);
182 | window.localStorage.setItem('camelotdj.minor', minor);
183 |
184 | // prettier-ignore
185 | matchingKeys = [selectedKey].concat([
186 | { add: 0, flip: true }, // 8A -> 8B -- same key, flipped major/minor
187 | { add: 11, flip: false }, // 8A -> 7A -- key -1
188 | { add: 1, flip: false }, // 8A -> 9A -- key +1
189 | { add: 9, flip: true }, // 8A -> 5B -- key -3, flipped major/minor
190 | { add: 3, flip: true } // 8A -> 11B -- key +3, flipped major/minor
191 | ].map(x => keyStr({ keyNum: (keyNum + x.add - 1) % 12 + 1, minor: x.flip ? !minor : minor })));
192 |
193 | // apply the correct classes to the buttons
194 | for (const btn of keySelectButtons) {
195 | const btnKeyStr = keyStr(btn.dataset);
196 | if (btnKeyStr === selectedKey) {
197 | btn.classList.add('selected');
198 | } else if (matchingKeys.includes(btnKeyStr)) {
199 | btn.classList.add('included');
200 | }
201 | }
202 | } else {
203 | selectedKey = null;
204 |
205 | // clear stored key
206 | window.localStorage.removeItem('camelotdj.keyNum');
207 | window.localStorage.removeItem('camelotdj.minor');
208 | }
209 | };
210 |
211 |
212 |
213 | const update = () => {
214 | if (urlIsTop100()) myLog('URL is a Top 100 page.');
215 | if (urlIsMainCart()) myLog('URL is the Main Cart.');
216 | if (urlIsCustomCart()) myLog('URL is a custom cart.');
217 | if (urlIsHoldBin()) myLog('URL is the Hold Bin.');
218 | if (urlIsSearchPage()) myLog('URL is a search result track list.');
219 |
220 | // Set/clear selection class on the top-100 genre link bar
221 | for (gNum of Object.keys(genreLinks)) {
222 | if (urlIsTop100() && getGenreNumberSeg() === gNum) {
223 | genreLinks[gNum].className = 'selected';
224 | } else {
225 | genreLinks[gNum].className = '';
226 | }
227 | }
228 |
229 | // We only filter stuff when we're on a top-100 / hold-bin / custom cart
230 | const keySelectorActive = (urlIsTop100() || urlIsHoldBin() || urlIsCustomCart() || urlIsSearchPage());
231 | const filtering = keySelectorActive && selectedKey;
232 |
233 | if (keySelectorActive) {
234 | keySelectContainer.style.display = '';
235 | if (filtering) {
236 | myLog('filtering', matchingKeys);
237 | }
238 | } else {
239 | // hide the key selector thingy if we're not filtering
240 | keySelectContainer.style.display = 'none';
241 | }
242 |
243 | // track list headers
244 | Array.from(document.querySelectorAll('.bucket-track-header-col.buk-track-labels')).forEach(labelColumnHeader => {
245 | labelColumnHeader.innerHTML = 'BPM KEY ';
246 | });
247 |
248 | // Top 100s, carts and hold-bin
249 | document.querySelectorAll('ul.bucket-items').forEach(trackList => {
250 | // This is goofy because the hold-bin rows aren't as nested as the Top 100 rows.
251 | Array.from(trackList.getElementsByClassName('track')).forEach(trackRow => {
252 | const trackLabel = trackRow.getElementsByClassName('buk-track-labels')[0];
253 | if (trackLabel) {
254 | const trackId = trackRow.dataset.ecId || trackRow.getElementsByClassName('track-play')[0].dataset.id;
255 |
256 | if (tracks[trackId]) {
257 | const { bpm, camelot } = tracks[trackId];
258 |
259 | if (filtering && matchingKeys.indexOf(camelot) == -1) {
260 | // hide rows that are filtered out
261 | trackRow.style.display = 'none';
262 | } else {
263 | trackRow.style.display = '';
264 | trackLabel.innerHTML = `${bpm} ${camelot} `;
265 | }
266 | } else {
267 | trackLabel.style.whiteSpace = 'noWrap';
268 | trackLabel.style.color = '#8c8c8c';
269 | trackLabel.innerText = 'no track data';
270 | }
271 | }
272 | });
273 |
274 | // tag that we've labelled the list so that we can see when it gets reloaded
275 | trackList.dataset.labeled = 'labeled';
276 | });
277 |
278 | // Top 10s
279 | Array.from(document.getElementsByClassName('top-ten-track-label')).forEach(topTenLabel => {
280 | const topTenRow = topTenLabel.parentNode.parentNode;
281 | const trackId = topTenRow.dataset.ecId;
282 | const { bpm, camelot } = tracks[trackId];
283 | topTenLabel.innerHTML = `${bpm} ${camelot} `;
284 | });
285 | };
286 |
287 |
288 |
289 | const checkForUpdate = () => {
290 | Array.from(document.getElementsByClassName('bucket-items')).forEach(trackListElement => {
291 | if (!trackListElement.dataset.labeled && trackListElement.firstElementChild.classList.contains('track')) {
292 | myLog('New track list found.');
293 | const trackScript = document.getElementById('data-objects');
294 | if (trackScript) {
295 | if (!trackScript.dataset.parsed) {
296 | parseScriptTracks(trackScript, 'window.Playables', 'tracks')
297 | }
298 | const nES = trackScript.nextElementSibling;
299 | const cartScript = nES !== null && nES.id === '' && nES.text.indexOf('window.localCart') !== -1 && nES;
300 | if (cartScript && !cartScript.dataset.parsed) {
301 | parseScriptTracks(cartScript, 'window.localCart', 'items');
302 | }
303 | update(trackListElement);
304 | } else {
305 | myLog('Waiting for track data script.');
306 | }
307 | }
308 | });
309 | };
310 |
311 | const loadHandler = e => {
312 | // add UI go page
313 | document.getElementsByClassName('header-bg-wrap')[0].appendChild(mainContainer);
314 |
315 | // load key selection from local storage
316 | const keyNum = window.localStorage.getItem('camelotdj.keyNum');
317 | const minor = window.localStorage.getItem('camelotdj.minor');
318 | if (keyNum && minor) {
319 | selectKey({ keyNum, minor });
320 | }
321 |
322 | // always polling for unlabeled track lists
323 | updateInterval = setInterval(checkForUpdate, POLLING_INTERVAL);
324 | };
325 | document.addEventListener('DOMContentLoaded', loadHandler);
326 |
327 | const clickHandler = e => {
328 | const { classList, dataset } = e.target;
329 | if (classList.contains('key-col')) {
330 | if (classList.contains('selected')) {
331 | myLog('clickHandler() un-selected', dataset);
332 | selectKey(null);
333 | } else {
334 | myLog('clickHandler() selected', dataset);
335 | selectKey(dataset);
336 | }
337 | update();
338 | }
339 | };
340 | document.addEventListener('click', clickHandler);
341 |
--------------------------------------------------------------------------------
|