index.vue 58 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502
  1. <script setup lang="ts">
  2. import { useStore } from "vuex";
  3. import { storeToRefs } from "pinia";
  4. import {
  5. defineAsyncComponent,
  6. ref,
  7. computed,
  8. watch,
  9. onMounted,
  10. onBeforeUnmount
  11. } from "vue";
  12. import Toast from "toasters";
  13. import aw from "@/aw";
  14. import ws from "@/ws";
  15. import validation from "@/validation";
  16. import keyboardShortcuts from "@/keyboardShortcuts";
  17. import { useWebsocketsStore } from "@/stores/websockets";
  18. import { useEditSongStore } from "@/stores/editSong";
  19. const FloatingBox = defineAsyncComponent(
  20. () => import("@/components/FloatingBox.vue")
  21. );
  22. const SaveButton = defineAsyncComponent(
  23. () => import("@/components/SaveButton.vue")
  24. );
  25. const AutoSuggest = defineAsyncComponent(
  26. () => import("@/components/AutoSuggest.vue")
  27. );
  28. const Discogs = defineAsyncComponent(() => import("./Tabs/Discogs.vue"));
  29. const ReportsTab = defineAsyncComponent(() => import("./Tabs/Reports.vue"));
  30. const Youtube = defineAsyncComponent(() => import("./Tabs/Youtube.vue"));
  31. const MusareSongs = defineAsyncComponent(() => import("./Tabs/Songs.vue"));
  32. const props = defineProps({
  33. modalUuid: { type: String, default: "" },
  34. modalModulePath: {
  35. type: String,
  36. default: "modals/editSong/MODAL_UUID"
  37. },
  38. discogsAlbum: { type: Object, default: null },
  39. bulk: { type: Boolean, default: false },
  40. flagged: { type: Boolean, default: false }
  41. });
  42. const emit = defineEmits([
  43. "error",
  44. "savedSuccess",
  45. "savedError",
  46. "flagSong",
  47. "nextSong",
  48. "close"
  49. ]);
  50. const store = useStore();
  51. const editSongStore = useEditSongStore(props);
  52. const { socket } = useWebsocketsStore();
  53. const modals = computed(() => store.state.modalVisibility.modals);
  54. const activeModals = computed(() => store.state.modalVisibility.activeModals);
  55. const {
  56. tab,
  57. video,
  58. song,
  59. youtubeId,
  60. prefillData,
  61. originalSong,
  62. reports,
  63. newSong
  64. } = storeToRefs(editSongStore);
  65. const songDataLoaded = ref(false);
  66. const songDeleted = ref(false);
  67. const youtubeError = ref(false);
  68. const youtubeErrorMessage = ref("");
  69. const youtubeVideoDuration = ref("0.000");
  70. const youtubeVideoCurrentTime = ref(0);
  71. const youtubeVideoNote = ref("");
  72. const useHTTPS = ref(false);
  73. const muted = ref(false);
  74. const volumeSliderValue = ref(0);
  75. const artistInputValue = ref("");
  76. const genreInputValue = ref("");
  77. const tagInputValue = ref("");
  78. const activityWatchVideoDataInterval = ref(null);
  79. const activityWatchVideoLastStatus = ref("");
  80. const activityWatchVideoLastStartDuration = ref("");
  81. const recommendedGenres = ref([
  82. "Blues",
  83. "Country",
  84. "Disco",
  85. "Funk",
  86. "Hip-Hop",
  87. "Jazz",
  88. "Metal",
  89. "Oldies",
  90. "Other",
  91. "Pop",
  92. "Rap",
  93. "Reggae",
  94. "Rock",
  95. "Techno",
  96. "Trance",
  97. "Classical",
  98. "Instrumental",
  99. "House",
  100. "Electronic",
  101. "Christian Rap",
  102. "Lo-Fi",
  103. "Musical",
  104. "Rock 'n' Roll",
  105. "Opera",
  106. "Drum & Bass",
  107. "Club-House",
  108. "Indie",
  109. "Heavy Metal",
  110. "Christian rock",
  111. "Dubstep"
  112. ]);
  113. const autosuggest = ref({
  114. allItems: {
  115. artists: [],
  116. genres: [],
  117. tags: []
  118. }
  119. });
  120. const songNotFound = ref(false);
  121. const showRateDropdown = ref(false);
  122. const thumbnailElement = ref();
  123. const thumbnailNotSquare = ref(false);
  124. const thumbnailWidth = ref(null);
  125. const thumbnailHeight = ref(null);
  126. const thumbnailLoadError = ref(false);
  127. const tabs = ref([]);
  128. const inputs = ref([]);
  129. const playerReady = ref(true);
  130. const interval = ref();
  131. const saveButtonRefs = ref([]);
  132. const canvasElement = ref();
  133. const genreHelper = ref();
  134. const isYoutubeThumbnail = computed(
  135. () =>
  136. songDataLoaded.value &&
  137. song.value.youtubeId &&
  138. song.value.thumbnail &&
  139. (song.value.thumbnail.lastIndexOf("i.ytimg.com") !== -1 ||
  140. song.value.thumbnail.lastIndexOf("img.youtube.com") !== -1)
  141. );
  142. const {
  143. stopVideo,
  144. hardStopVideo,
  145. loadVideoById,
  146. pauseVideo,
  147. setSong,
  148. resetSong,
  149. updateOriginalSong,
  150. updateSongField,
  151. updateReports,
  152. setPlaybackRate
  153. } = editSongStore;
  154. const openModal = payload =>
  155. store.dispatch("modalVisibility/openModal", payload);
  156. const closeCurrentModal = () => {
  157. if (props.bulk) emit("close");
  158. else store.dispatch("modalVisibility/closeCurrentModal");
  159. };
  160. const showTab = payload => {
  161. if (tabs.value[`${payload}-tab`])
  162. tabs.value[`${payload}-tab`].scrollIntoView({ block: "nearest" });
  163. editSongStore.showTab(payload);
  164. };
  165. const onThumbnailLoad = () => {
  166. if (thumbnailElement.value) {
  167. const height = thumbnailElement.value.naturalHeight;
  168. const width = thumbnailElement.value.naturalWidth;
  169. thumbnailNotSquare.value = height !== width;
  170. thumbnailHeight.value = height;
  171. thumbnailWidth.value = width;
  172. } else {
  173. thumbnailNotSquare.value = false;
  174. thumbnailHeight.value = null;
  175. thumbnailWidth.value = null;
  176. }
  177. };
  178. const onThumbnailLoadError = error => {
  179. thumbnailLoadError.value = error !== 0;
  180. };
  181. const unloadSong = (_youtubeId, songId) => {
  182. songDataLoaded.value = false;
  183. songDeleted.value = false;
  184. stopVideo();
  185. pauseVideo(true);
  186. resetSong(_youtubeId);
  187. thumbnailNotSquare.value = false;
  188. thumbnailWidth.value = null;
  189. thumbnailHeight.value = null;
  190. youtubeVideoCurrentTime.value = "0.000";
  191. youtubeVideoDuration.value = "0.000";
  192. youtubeVideoNote.value = "";
  193. if (songId) socket.dispatch("apis.leaveRoom", `edit-song.${songId}`);
  194. if (saveButtonRefs.value.saveButton)
  195. saveButtonRefs.value.saveButton.status = "default";
  196. };
  197. const loadSong = _youtubeId => {
  198. console.log(`LOAD SONG ${_youtubeId}`);
  199. songNotFound.value = false;
  200. socket.dispatch(`songs.getSongsFromYoutubeIds`, [_youtubeId], res => {
  201. const { songs } = res.data;
  202. if (res.status === "success" && songs.length > 0) {
  203. let _song = songs[0];
  204. _song = Object.assign(_song, prefillData.value);
  205. setSong(_song);
  206. songDataLoaded.value = true;
  207. if (_song._id)
  208. socket.dispatch("apis.joinRoom", `edit-song.${_song._id}`);
  209. if (video.value.player && video.value.player.cueVideoById) {
  210. video.value.player.cueVideoById(_youtubeId, _song.skipDuration);
  211. }
  212. } else {
  213. new Toast("Song with that ID not found");
  214. if (props.bulk) songNotFound.value = true;
  215. if (!props.bulk) closeCurrentModal();
  216. }
  217. });
  218. if (!newSong.value)
  219. socket.dispatch("reports.getReportsForSong", song.value._id, res => {
  220. updateReports(res.data.reports);
  221. });
  222. };
  223. const drawCanvas = () => {
  224. if (!songDataLoaded.value || !canvasElement.value) return;
  225. const ctx = canvasElement.value.getContext("2d");
  226. const videoDuration = Number(youtubeVideoDuration.value);
  227. const skipDuration = Number(song.value.skipDuration);
  228. const duration = Number(song.value.duration);
  229. const afterDuration = videoDuration - (skipDuration + duration);
  230. const width = 530;
  231. const currentTime =
  232. video.value.player && video.value.player.getCurrentTime
  233. ? video.value.player.getCurrentTime()
  234. : 0;
  235. const widthSkipDuration = (skipDuration / videoDuration) * width;
  236. const widthDuration = (duration / videoDuration) * width;
  237. const widthAfterDuration = (afterDuration / videoDuration) * width;
  238. const widthCurrentTime = (currentTime / videoDuration) * width;
  239. const skipDurationColor = "#F42003";
  240. const durationColor = "#03A9F4";
  241. const afterDurationColor = "#41E841";
  242. const currentDurationColor = "#3b25e8";
  243. ctx.fillStyle = skipDurationColor;
  244. ctx.fillRect(0, 0, widthSkipDuration, 20);
  245. ctx.fillStyle = durationColor;
  246. ctx.fillRect(widthSkipDuration, 0, widthDuration, 20);
  247. ctx.fillStyle = afterDurationColor;
  248. ctx.fillRect(widthSkipDuration + widthDuration, 0, widthAfterDuration, 20);
  249. ctx.fillStyle = currentDurationColor;
  250. ctx.fillRect(widthCurrentTime, 0, 1, 20);
  251. };
  252. const seekTo = position => {
  253. pauseVideo(false);
  254. video.value.player.seekTo(position);
  255. };
  256. const init = () => {
  257. if (newSong.value && !youtubeId.value && !props.bulk) {
  258. setSong({
  259. youtubeId: "",
  260. title: "",
  261. artists: [],
  262. genres: [],
  263. tags: [],
  264. duration: 0,
  265. skipDuration: 0,
  266. thumbnail: "",
  267. verified: false
  268. });
  269. songDataLoaded.value = true;
  270. showTab("youtube");
  271. } else if (youtubeId.value) loadSong(youtubeId.value);
  272. else if (!props.bulk) {
  273. new Toast("You can't open EditSong without editing a song");
  274. return closeCurrentModal();
  275. }
  276. interval.value = setInterval(() => {
  277. if (
  278. song.value.duration !== -1 &&
  279. video.value.paused === false &&
  280. playerReady.value &&
  281. (video.value.player.getCurrentTime() - song.value.skipDuration >
  282. song.value.duration ||
  283. (video.value.player.getCurrentTime() > 0 &&
  284. video.value.player.getCurrentTime() >=
  285. video.value.player.getDuration()))
  286. ) {
  287. stopVideo();
  288. pauseVideo(true);
  289. drawCanvas();
  290. }
  291. if (
  292. playerReady.value &&
  293. video.value.player.getVideoData &&
  294. video.value.player.getVideoData() &&
  295. video.value.player.getVideoData().video_id === song.value.youtubeId
  296. ) {
  297. const currentTime = video.value.player.getCurrentTime();
  298. if (currentTime !== undefined)
  299. youtubeVideoCurrentTime.value = currentTime.toFixed(3);
  300. if (youtubeVideoDuration.value.indexOf(".000") !== -1) {
  301. const duration = video.value.player.getDuration();
  302. if (duration !== undefined) {
  303. if (
  304. `${youtubeVideoDuration.value}` ===
  305. `${Number(song.value.duration).toFixed(3)}`
  306. )
  307. song.value.duration = duration.toFixed(3);
  308. youtubeVideoDuration.value = duration.toFixed(3);
  309. if (youtubeVideoDuration.value.indexOf(".000") !== -1)
  310. youtubeVideoNote.value = "(~)";
  311. else youtubeVideoNote.value = "";
  312. drawCanvas();
  313. }
  314. }
  315. }
  316. if (video.value.paused === false) drawCanvas();
  317. }, 200);
  318. if (window.YT && window.YT.Player) {
  319. video.value.player = new window.YT.Player(
  320. `editSongPlayer-${props.modalUuid}`,
  321. {
  322. height: 298,
  323. width: 530,
  324. videoId: null,
  325. host: "https://www.youtube-nocookie.com",
  326. playerVars: {
  327. controls: 0,
  328. iv_load_policy: 3,
  329. rel: 0,
  330. showinfo: 0,
  331. autoplay: 0
  332. },
  333. startSeconds: song.value.skipDuration,
  334. events: {
  335. onReady: () => {
  336. let volume = parseFloat(localStorage.getItem("volume"));
  337. volume = typeof volume === "number" ? volume : 20;
  338. video.value.player.setVolume(volume);
  339. if (volume > 0) video.value.player.unMute();
  340. playerReady.value = true;
  341. if (song.value && song.value.youtubeId)
  342. video.value.player.cueVideoById(
  343. song.value.youtubeId,
  344. song.value.skipDuration
  345. );
  346. setPlaybackRate(null);
  347. drawCanvas();
  348. },
  349. onStateChange: event => {
  350. drawCanvas();
  351. if (event.data === 1) {
  352. video.value.paused = false;
  353. let youtubeDuration =
  354. video.value.player.getDuration();
  355. const newYoutubeVideoDuration =
  356. youtubeDuration.toFixed(3);
  357. if (
  358. youtubeVideoDuration.value.indexOf(".000") !==
  359. -1 &&
  360. `${youtubeVideoDuration.value}` !==
  361. `${newYoutubeVideoDuration}`
  362. ) {
  363. const songDurationNumber = Number(
  364. song.value.duration
  365. );
  366. const songDurationNumber2 =
  367. Number(song.value.duration) + 1;
  368. const songDurationNumber3 =
  369. Number(song.value.duration) - 1;
  370. const fixedSongDuration =
  371. songDurationNumber.toFixed(3);
  372. const fixedSongDuration2 =
  373. songDurationNumber2.toFixed(3);
  374. const fixedSongDuration3 =
  375. songDurationNumber3.toFixed(3);
  376. if (
  377. `${youtubeVideoDuration.value}` ===
  378. `${Number(song.value.duration).toFixed(
  379. 3
  380. )}` &&
  381. (fixedSongDuration ===
  382. youtubeVideoDuration.value ||
  383. fixedSongDuration2 ===
  384. youtubeVideoDuration.value ||
  385. fixedSongDuration3 ===
  386. youtubeVideoDuration.value)
  387. )
  388. song.value.duration =
  389. newYoutubeVideoDuration;
  390. youtubeVideoDuration.value =
  391. newYoutubeVideoDuration;
  392. if (
  393. youtubeVideoDuration.value.indexOf(
  394. ".000"
  395. ) !== -1
  396. )
  397. youtubeVideoNote.value = "(~)";
  398. else youtubeVideoNote.value = "";
  399. }
  400. if (song.value.duration === -1)
  401. song.value.duration =
  402. youtubeVideoDuration.value;
  403. youtubeDuration -= song.value.skipDuration;
  404. if (song.value.duration > youtubeDuration + 1) {
  405. stopVideo();
  406. pauseVideo(true);
  407. return new Toast(
  408. "Video can't play. Specified duration is bigger than the YouTube song duration."
  409. );
  410. }
  411. if (song.value.duration <= 0) {
  412. stopVideo();
  413. pauseVideo(true);
  414. return new Toast(
  415. "Video can't play. Specified duration has to be more than 0 seconds."
  416. );
  417. }
  418. if (
  419. video.value.player.getCurrentTime() <
  420. song.value.skipDuration
  421. ) {
  422. return seekTo(song.value.skipDuration);
  423. }
  424. setPlaybackRate(null);
  425. } else if (event.data === 2) {
  426. video.value.paused = true;
  427. }
  428. return false;
  429. }
  430. }
  431. }
  432. );
  433. } else {
  434. youtubeError.value = true;
  435. youtubeErrorMessage.value = "Player could not be loaded.";
  436. }
  437. ["artists", "genres", "tags"].forEach(type => {
  438. socket.dispatch(
  439. `songs.get${type.charAt(0).toUpperCase()}${type.slice(1)}`,
  440. res => {
  441. if (res.status === "success") {
  442. const { items } = res.data;
  443. if (type === "genres")
  444. autosuggest.value.allItems[type] = Array.from(
  445. new Set([...recommendedGenres.value, ...items])
  446. );
  447. else autosuggest.value.allItems[type] = items;
  448. } else {
  449. new Toast(res.message);
  450. }
  451. }
  452. );
  453. });
  454. return null;
  455. };
  456. const save = (songToCopy, closeOrNext, saveButtonRefName, _newSong = false) => {
  457. const _song = JSON.parse(JSON.stringify(songToCopy));
  458. if (!newSong.value || props.bulk) emit("saving", _song.youtubeId);
  459. const saveButtonRef = saveButtonRefs.value[saveButtonRefName];
  460. if (!youtubeError.value && youtubeVideoDuration.value === "0.000") {
  461. saveButtonRef.handleFailedSave();
  462. if (!_newSong) emit("savedError", _song.youtubeId);
  463. return new Toast("The video appears to not be working.");
  464. }
  465. if (!_song.title) {
  466. saveButtonRef.handleFailedSave();
  467. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  468. return new Toast("Please fill in all fields");
  469. }
  470. if (!_song.thumbnail) {
  471. saveButtonRef.handleFailedSave();
  472. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  473. return new Toast("Please fill in all fields");
  474. }
  475. // const thumbnailHeight = thumbnailElement.value.naturalHeight;
  476. // const thumbnailWidth = thumbnailElement.value.naturalWidth;
  477. // if (thumbnailHeight < 80 || thumbnailWidth < 80) {
  478. // saveButtonRef.handleFailedSave();
  479. // return new Toast(
  480. // "Thumbnail width and height must be at least 80px."
  481. // );
  482. // }
  483. // if (thumbnailHeight > 4000 || thumbnailWidth > 4000) {
  484. // saveButtonRef.handleFailedSave();
  485. // return new Toast(
  486. // "Thumbnail width and height must be less than 4000px."
  487. // );
  488. // }
  489. // if (thumbnailHeight - thumbnailWidth > 5) {
  490. // saveButtonRef.handleFailedSave();
  491. // return new Toast("Thumbnail cannot be taller than it is wide.");
  492. // }
  493. // Youtube Id
  494. if (
  495. !_newSong &&
  496. youtubeError.value &&
  497. originalSong.value.youtubeId !== _song.youtubeId
  498. ) {
  499. saveButtonRef.handleFailedSave();
  500. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  501. return new Toast(
  502. "You're not allowed to change the YouTube id while the player is not working"
  503. );
  504. }
  505. // Duration
  506. if (
  507. Number(_song.skipDuration) + Number(_song.duration) >
  508. youtubeVideoDuration.value &&
  509. (((!_newSong || props.bulk) && !youtubeError.value) ||
  510. originalSong.value.duration !== _song.duration)
  511. ) {
  512. saveButtonRef.handleFailedSave();
  513. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  514. return new Toast(
  515. "Duration can't be higher than the length of the video"
  516. );
  517. }
  518. // Title
  519. if (!validation.isLength(_song.title, 1, 100)) {
  520. saveButtonRef.handleFailedSave();
  521. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  522. return new Toast("Title must have between 1 and 100 characters.");
  523. }
  524. // Artists
  525. if (
  526. (_song.verified && _song.artists.length < 1) ||
  527. _song.artists.length > 10
  528. ) {
  529. saveButtonRef.handleFailedSave();
  530. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  531. return new Toast(
  532. "Invalid artists. You must have at least 1 artist and a maximum of 10 artists."
  533. );
  534. }
  535. let error;
  536. _song.artists.forEach(artist => {
  537. if (!validation.isLength(artist, 1, 64)) {
  538. error = "Artist must have between 1 and 64 characters.";
  539. return error;
  540. }
  541. if (artist === "NONE") {
  542. error =
  543. 'Invalid artist format. Artists are not allowed to be named "NONE".';
  544. return error;
  545. }
  546. return false;
  547. });
  548. if (error) {
  549. saveButtonRef.handleFailedSave();
  550. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  551. return new Toast(error);
  552. }
  553. // Genres
  554. error = undefined;
  555. if (_song.verified && _song.genres.length < 1)
  556. _song.genres.forEach(genre => {
  557. if (!validation.isLength(genre, 1, 32)) {
  558. error = "Genre must have between 1 and 32 characters.";
  559. return error;
  560. }
  561. if (!validation.regex.ascii.test(genre)) {
  562. error =
  563. "Invalid genre format. Only ascii characters are allowed.";
  564. return error;
  565. }
  566. return false;
  567. });
  568. if ((_song.verified && _song.genres.length < 1) || _song.genres.length > 16)
  569. error = "You must have between 1 and 16 genres.";
  570. if (error) {
  571. saveButtonRef.handleFailedSave();
  572. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  573. return new Toast(error);
  574. }
  575. error = undefined;
  576. _song.tags.forEach(tag => {
  577. if (
  578. !/^[a-zA-Z0-9_]{1,64}$|^[a-zA-Z0-9_]{1,64}\[[a-zA-Z0-9_]{1,64}\]$/.test(
  579. tag
  580. )
  581. ) {
  582. error = "Invalid tag format.";
  583. return error;
  584. }
  585. return false;
  586. });
  587. if (error) {
  588. saveButtonRef.handleFailedSave();
  589. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  590. return new Toast(error);
  591. }
  592. // Thumbnail
  593. if (!validation.isLength(_song.thumbnail, 1, 256)) {
  594. saveButtonRef.handleFailedSave();
  595. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  596. return new Toast("Thumbnail must have between 8 and 256 characters.");
  597. }
  598. if (useHTTPS.value && _song.thumbnail.indexOf("https://") !== 0) {
  599. saveButtonRef.handleFailedSave();
  600. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  601. return new Toast('Thumbnail must start with "https://".');
  602. }
  603. if (
  604. !useHTTPS.value &&
  605. _song.thumbnail.indexOf("http://") !== 0 &&
  606. _song.thumbnail.indexOf("https://") !== 0
  607. ) {
  608. saveButtonRef.handleFailedSave();
  609. if (!_newSong || props.bulk) emit("savedError", _song.youtubeId);
  610. return new Toast('Thumbnail must start with "http://".');
  611. }
  612. saveButtonRef.status = "saving";
  613. if (_newSong)
  614. return socket.dispatch(`songs.create`, _song, res => {
  615. new Toast(res.message);
  616. if (res.status === "error") {
  617. saveButtonRef.handleFailedSave();
  618. emit("savedError", _song.youtubeId);
  619. return;
  620. }
  621. saveButtonRef.handleSuccessfulSave();
  622. emit("savedSuccess", _song.youtubeId);
  623. if (!closeOrNext) {
  624. loadSong(_song.youtubeId);
  625. return;
  626. }
  627. if (props.bulk) emit("nextSong");
  628. else closeCurrentModal();
  629. });
  630. return socket.dispatch(`songs.update`, _song._id, _song, res => {
  631. new Toast(res.message);
  632. if (res.status === "error") {
  633. saveButtonRef.handleFailedSave();
  634. emit("savedError", _song.youtubeId);
  635. return;
  636. }
  637. updateOriginalSong(_song);
  638. saveButtonRef.handleSuccessfulSave();
  639. emit("savedSuccess", _song.youtubeId);
  640. if (!closeOrNext) return;
  641. if (props.bulk) emit("nextSong");
  642. else closeCurrentModal();
  643. });
  644. };
  645. const editNextSong = () => {
  646. emit("nextSong");
  647. };
  648. const toggleFlag = () => {
  649. emit("toggleFlag");
  650. };
  651. const getAlbumData = type => {
  652. if (!song.value.discogs) return;
  653. if (type === "title")
  654. updateSongField({
  655. field: "title",
  656. value: song.value.discogs.track.title
  657. });
  658. if (type === "albumArt")
  659. updateSongField({
  660. field: "thumbnail",
  661. value: song.value.discogs.album.albumArt
  662. });
  663. if (type === "genres")
  664. updateSongField({
  665. field: "genres",
  666. value: JSON.parse(JSON.stringify(song.value.discogs.album.genres))
  667. });
  668. if (type === "artists")
  669. updateSongField({
  670. field: "artists",
  671. value: JSON.parse(JSON.stringify(song.value.discogs.album.artists))
  672. });
  673. };
  674. const getYouTubeData = type => {
  675. if (type === "title") {
  676. try {
  677. const { title } = video.value.player.getVideoData();
  678. if (title)
  679. updateSongField({
  680. field: "title",
  681. value: title
  682. });
  683. else throw new Error("No title found");
  684. } catch (e) {
  685. new Toast(
  686. "Unable to fetch YouTube video title. Try starting the video."
  687. );
  688. }
  689. }
  690. if (type === "thumbnail")
  691. updateSongField({
  692. field: "thumbnail",
  693. value: `https://img.youtube.com/vi/${song.value.youtubeId}/mqdefault.jpg`
  694. });
  695. if (type === "author") {
  696. try {
  697. const { author } = video.value.player.getVideoData();
  698. if (author) artistInputValue.value = author;
  699. else throw new Error("No video author found");
  700. } catch (e) {
  701. new Toast(
  702. "Unable to fetch YouTube video author. Try starting the video."
  703. );
  704. }
  705. }
  706. };
  707. const fillDuration = () => {
  708. song.value.duration = youtubeVideoDuration.value - song.value.skipDuration;
  709. };
  710. const settings = type => {
  711. switch (type) {
  712. case "stop":
  713. stopVideo();
  714. pauseVideo(true);
  715. break;
  716. case "hardStop":
  717. hardStopVideo();
  718. pauseVideo(true);
  719. break;
  720. case "pause":
  721. pauseVideo(true);
  722. break;
  723. case "play":
  724. pauseVideo(false);
  725. break;
  726. case "skipToLast10Secs":
  727. seekTo(song.value.duration - 10 + song.value.skipDuration);
  728. break;
  729. default:
  730. break;
  731. }
  732. };
  733. const play = () => {
  734. if (video.value.player.getVideoData().video_id !== song.value.youtubeId) {
  735. song.value.duration = -1;
  736. loadVideoById(song.value.youtubeId, song.value.skipDuration);
  737. }
  738. settings("play");
  739. };
  740. const changeVolume = () => {
  741. const volume = volumeSliderValue.value;
  742. localStorage.setItem("volume", volume);
  743. video.value.player.setVolume(volume);
  744. if (volume > 0) {
  745. video.value.player.unMute();
  746. muted.value = false;
  747. }
  748. };
  749. const toggleMute = () => {
  750. const previousVolume = parseFloat(localStorage.getItem("volume"));
  751. const volume = video.value.player.getVolume() <= 0 ? previousVolume : 0;
  752. muted.value = !muted.value;
  753. volumeSliderValue.value = volume;
  754. video.value.player.setVolume(volume);
  755. if (!muted.value) localStorage.setItem("volume", volume);
  756. };
  757. const addTag = (type, value) => {
  758. if (type === "genres") {
  759. const genre = value || genreInputValue.value.trim();
  760. if (
  761. song.value.genres
  762. .map(genre => genre.toLowerCase())
  763. .indexOf(genre.toLowerCase()) !== -1
  764. )
  765. return new Toast("Genre already exists");
  766. if (genre) {
  767. song.value.genres.push(genre);
  768. genreInputValue.value = "";
  769. return false;
  770. }
  771. return new Toast("Genre cannot be empty");
  772. }
  773. if (type === "artists") {
  774. const artist = value || artistInputValue.value;
  775. if (song.value.artists.indexOf(artist) !== -1)
  776. return new Toast("Artist already exists");
  777. if (artist !== "") {
  778. song.value.artists.push(artist);
  779. artistInputValue.value = "";
  780. return false;
  781. }
  782. return new Toast("Artist cannot be empty");
  783. }
  784. if (type === "tags") {
  785. const tag = value || tagInputValue.value;
  786. if (song.value.tags.indexOf(tag) !== -1)
  787. return new Toast("Tag already exists");
  788. if (tag !== "") {
  789. song.value.tags.push(tag);
  790. tagInputValue.value = "";
  791. return false;
  792. }
  793. return new Toast("Tag cannot be empty");
  794. }
  795. return false;
  796. };
  797. const removeTag = (type, value) => {
  798. if (type === "genres")
  799. song.value.genres.splice(song.value.genres.indexOf(value), 1);
  800. else if (type === "artists")
  801. song.value.artists.splice(song.value.artists.indexOf(value), 1);
  802. else if (type === "tags")
  803. song.value.tags.splice(song.value.tags.indexOf(value), 1);
  804. };
  805. const setTrackPosition = event => {
  806. seekTo(
  807. Number(
  808. Number(video.value.player.getDuration()) *
  809. ((event.pageX - event.target.getBoundingClientRect().left) /
  810. 530)
  811. )
  812. );
  813. };
  814. const toggleGenreHelper = () => {
  815. genreHelper.value.toggleBox();
  816. };
  817. const resetGenreHelper = () => {
  818. genreHelper.value.resetBox();
  819. };
  820. const sendActivityWatchVideoData = () => {
  821. if (!video.value.paused) {
  822. if (activityWatchVideoLastStatus.value !== "playing") {
  823. activityWatchVideoLastStatus.value = "playing";
  824. if (
  825. song.value.skipDuration > 0 &&
  826. parseFloat(youtubeVideoCurrentTime.value) === 0
  827. ) {
  828. activityWatchVideoLastStartDuration.value = Math.floor(
  829. song.value.skipDuration +
  830. parseFloat(youtubeVideoCurrentTime.value)
  831. );
  832. } else {
  833. activityWatchVideoLastStartDuration.value = Math.floor(
  834. parseFloat(youtubeVideoCurrentTime.value)
  835. );
  836. }
  837. }
  838. const videoData = {
  839. title: song.value.title,
  840. artists: song.value.artists ? song.value.artists.join(", ") : null,
  841. youtubeId: song.value.youtubeId,
  842. muted: muted.value,
  843. volume: volumeSliderValue.value,
  844. startedDuration:
  845. activityWatchVideoLastStartDuration.value <= 0
  846. ? 0
  847. : activityWatchVideoLastStartDuration.value,
  848. source: `editSong#${song.value.youtubeId}`,
  849. hostname: window.location.hostname
  850. };
  851. aw.sendVideoData(videoData);
  852. } else {
  853. activityWatchVideoLastStatus.value = "not_playing";
  854. }
  855. };
  856. const remove = id => {
  857. socket.dispatch("songs.remove", id, res => {
  858. new Toast(res.message);
  859. });
  860. };
  861. const handleConfirmed = ({ action, params }) => {
  862. if (typeof action === "function") {
  863. if (params) action(params);
  864. else action();
  865. }
  866. };
  867. const confirmAction = ({ message, action, params }) => {
  868. openModal({
  869. modal: "confirm",
  870. data: {
  871. message,
  872. action,
  873. params,
  874. onCompleted: handleConfirmed
  875. }
  876. });
  877. };
  878. const onCloseModal = () => {
  879. const songStringified = JSON.stringify({
  880. ...song.value,
  881. ...{
  882. duration: Number(song.value.duration).toFixed(3)
  883. }
  884. });
  885. const originalSongStringified = JSON.stringify({
  886. ...originalSong.value,
  887. ...{
  888. duration: Number(originalSong.value.duration).toFixed(3)
  889. }
  890. });
  891. const unsavedChanges = songStringified !== originalSongStringified;
  892. if (unsavedChanges) {
  893. return confirmAction({
  894. message:
  895. "You have unsaved changes. Are you sure you want to discard unsaved changes?",
  896. action: closeCurrentModal,
  897. params: null
  898. });
  899. }
  900. return closeCurrentModal();
  901. };
  902. watch(
  903. () => song.value.duration,
  904. () => drawCanvas()
  905. );
  906. watch(
  907. () => song.value.skipDuration,
  908. () => drawCanvas()
  909. );
  910. watch(youtubeId, (_youtubeId, _oldYoutubeId) => {
  911. console.log("NEW YOUTUBE ID", _youtubeId);
  912. unloadSong(_oldYoutubeId);
  913. loadSong(_youtubeId);
  914. });
  915. onMounted(async () => {
  916. activityWatchVideoDataInterval.value = setInterval(() => {
  917. sendActivityWatchVideoData();
  918. }, 1000);
  919. useHTTPS.value = await lofig.get("cookie.secure");
  920. ws.onConnect(init);
  921. let volume = parseFloat(localStorage.getItem("volume"));
  922. volume = typeof volume === "number" && !Number.isNaN(volume) ? volume : 20;
  923. localStorage.setItem("volume", volume);
  924. volumeSliderValue.value = volume;
  925. socket.on(
  926. "event:admin.song.removed",
  927. res => {
  928. if (res.data.songId === song.value._id) {
  929. songDeleted.value = true;
  930. }
  931. },
  932. { modalUuid: props.modalUuid }
  933. );
  934. keyboardShortcuts.registerShortcut("editSong.pauseResumeVideo", {
  935. keyCode: 101,
  936. preventDefault: true,
  937. handler: () => {
  938. if (video.value.paused) play();
  939. else settings("pause");
  940. }
  941. });
  942. keyboardShortcuts.registerShortcut("editSong.stopVideo", {
  943. keyCode: 101,
  944. ctrl: true,
  945. preventDefault: true,
  946. handler: () => {
  947. settings("stop");
  948. }
  949. });
  950. keyboardShortcuts.registerShortcut("editSong.hardStopVideo", {
  951. keyCode: 101,
  952. ctrl: true,
  953. shift: true,
  954. preventDefault: true,
  955. handler: () => {
  956. settings("hardStop");
  957. }
  958. });
  959. keyboardShortcuts.registerShortcut("editSong.skipToLast10Secs", {
  960. keyCode: 102,
  961. preventDefault: true,
  962. handler: () => {
  963. settings("skipToLast10Secs");
  964. }
  965. });
  966. keyboardShortcuts.registerShortcut("editSong.lowerVolumeLarge", {
  967. keyCode: 98,
  968. preventDefault: true,
  969. handler: () => {
  970. volumeSliderValue.value = Math.max(0, volumeSliderValue.value - 10);
  971. changeVolume();
  972. }
  973. });
  974. keyboardShortcuts.registerShortcut("editSong.lowerVolumeSmall", {
  975. keyCode: 98,
  976. ctrl: true,
  977. preventDefault: true,
  978. handler: () => {
  979. volumeSliderValue.value = Math.max(0, volumeSliderValue.value - 1);
  980. changeVolume();
  981. }
  982. });
  983. keyboardShortcuts.registerShortcut("editSong.increaseVolumeLarge", {
  984. keyCode: 104,
  985. preventDefault: true,
  986. handler: () => {
  987. volumeSliderValue.value = Math.min(
  988. 100,
  989. volumeSliderValue.value + 10
  990. );
  991. changeVolume();
  992. }
  993. });
  994. keyboardShortcuts.registerShortcut("editSong.increaseVolumeSmall", {
  995. keyCode: 104,
  996. ctrl: true,
  997. preventDefault: true,
  998. handler: () => {
  999. volumeSliderValue.value = Math.min(
  1000. 100,
  1001. volumeSliderValue.value + 1
  1002. );
  1003. changeVolume();
  1004. }
  1005. });
  1006. keyboardShortcuts.registerShortcut("editSong.save", {
  1007. keyCode: 83,
  1008. ctrl: true,
  1009. preventDefault: true,
  1010. handler: () => {
  1011. save(song.value, false, "saveButton");
  1012. }
  1013. });
  1014. keyboardShortcuts.registerShortcut("editSong.saveClose", {
  1015. keyCode: 83,
  1016. ctrl: true,
  1017. alt: true,
  1018. preventDefault: true,
  1019. handler: () => {
  1020. save(song.value, true, "saveAndCloseButton");
  1021. }
  1022. });
  1023. keyboardShortcuts.registerShortcut("editSong.focusTitle", {
  1024. keyCode: 36,
  1025. preventDefault: true,
  1026. handler: () => {
  1027. inputs.value["title-input"].focus();
  1028. }
  1029. });
  1030. keyboardShortcuts.registerShortcut("editSong.useAllDiscogs", {
  1031. keyCode: 68,
  1032. alt: true,
  1033. ctrl: true,
  1034. preventDefault: true,
  1035. handler: () => {
  1036. getAlbumData("title");
  1037. getAlbumData("albumArt");
  1038. getAlbumData("artists");
  1039. getAlbumData("genres");
  1040. }
  1041. });
  1042. keyboardShortcuts.registerShortcut("editSong.closeModal", {
  1043. keyCode: 27,
  1044. handler: () => {
  1045. if (
  1046. modals.value[
  1047. activeModals.value[activeModals.value.length - 1]
  1048. ] === "editSong" ||
  1049. modals.value[
  1050. activeModals.value[activeModals.value.length - 1]
  1051. ] === "editSongs"
  1052. ) {
  1053. onCloseModal();
  1054. }
  1055. }
  1056. });
  1057. /*
  1058. editSong.pauseResume - Num 5 - Pause/resume song
  1059. editSong.stopVideo - Ctrl - Num 5 - Stop
  1060. editSong.hardStopVideo - Shift - Ctrl - Num 5 - Stop
  1061. editSong.skipToLast10Secs - Num 6 - Skip to last 10 seconds
  1062. editSong.lowerVolumeLarge - Num 2 - Volume down by 10
  1063. editSong.lowerVolumeSmall - Ctrl - Num 2 - Volume down by 1
  1064. editSong.increaseVolumeLarge - Num 8 - Volume up by 10
  1065. editSong.increaseVolumeSmall - Ctrl - Num 8 - Volume up by 1
  1066. editSong.focusTitle - Home - Focus the title input
  1067. editSong.focusDicogs - End - Focus the discogs input
  1068. editSong.save - Ctrl - S - Saves song
  1069. editSong.save - Ctrl - Alt - S - Saves song and closes the modal
  1070. editSong.save - Ctrl - Alt - V - Saves song, verifies songs and then closes the modal
  1071. editSong.close - F4 - Closes modal without saving
  1072. editSong.useAllDiscogs - Ctrl - Alt - D - Sets all fields to the Discogs data
  1073. Inside Discogs inputs: Ctrl - D - Sets this field to the Discogs data
  1074. */
  1075. });
  1076. onBeforeUnmount(() => {
  1077. unloadSong(youtubeId.value, song.value._id);
  1078. playerReady.value = false;
  1079. clearInterval(interval.value);
  1080. clearInterval(activityWatchVideoDataInterval.value);
  1081. const shortcutNames = [
  1082. "editSong.pauseResume",
  1083. "editSong.stopVideo",
  1084. "editSong.hardStopVideo",
  1085. "editSong.skipToLast10Secs",
  1086. "editSong.lowerVolumeLarge",
  1087. "editSong.lowerVolumeSmall",
  1088. "editSong.increaseVolumeLarge",
  1089. "editSong.increaseVolumeSmall",
  1090. "editSong.focusTitle",
  1091. "editSong.focusDicogs",
  1092. "editSong.save",
  1093. "editSong.saveClose",
  1094. "editSong.useAllDiscogs",
  1095. "editSong.closeModal"
  1096. ];
  1097. shortcutNames.forEach(shortcutName => {
  1098. keyboardShortcuts.unregisterShortcut(shortcutName);
  1099. });
  1100. // Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
  1101. editSongStore.$dispose();
  1102. });
  1103. </script>
  1104. <template>
  1105. <div>
  1106. <modal
  1107. :title="`${newSong ? 'Create' : 'Edit'} Song`"
  1108. class="song-modal"
  1109. :size="'wide'"
  1110. :split="true"
  1111. :intercept-close="true"
  1112. @close="onCloseModal"
  1113. >
  1114. <template #toggleMobileSidebar>
  1115. <slot name="toggleMobileSidebar" />
  1116. </template>
  1117. <template #sidebar>
  1118. <slot name="sidebar" />
  1119. </template>
  1120. <template #body>
  1121. <div v-if="!youtubeId && !newSong" class="notice-container">
  1122. <h4>No song has been selected</h4>
  1123. </div>
  1124. <div v-if="songDeleted" class="notice-container">
  1125. <h4>The song you were editing has been deleted</h4>
  1126. </div>
  1127. <div
  1128. v-if="
  1129. youtubeId &&
  1130. !songDataLoaded &&
  1131. !songNotFound &&
  1132. !newSong
  1133. "
  1134. class="notice-container"
  1135. >
  1136. <h4>Song hasn't loaded yet</h4>
  1137. </div>
  1138. <div
  1139. v-if="youtubeId && songNotFound && !newSong"
  1140. class="notice-container"
  1141. >
  1142. <h4>Song was not found</h4>
  1143. </div>
  1144. <div
  1145. class="left-section"
  1146. v-show="songDataLoaded && !songDeleted"
  1147. >
  1148. <div class="top-section">
  1149. <div class="player-section">
  1150. <div :id="`editSongPlayer-${modalUuid}`" />
  1151. <div v-show="youtubeError" class="player-error">
  1152. <h2>{{ youtubeErrorMessage }}</h2>
  1153. </div>
  1154. <canvas
  1155. ref="canvasElement"
  1156. class="duration-canvas"
  1157. v-show="!youtubeError"
  1158. height="20"
  1159. width="530"
  1160. @click="setTrackPosition($event)"
  1161. />
  1162. <div class="player-footer">
  1163. <div class="player-footer-left">
  1164. <button
  1165. class="button is-primary"
  1166. @click="play()"
  1167. @keyup.enter="play()"
  1168. v-if="video.paused"
  1169. content="Resume Playback"
  1170. v-tippy
  1171. >
  1172. <i class="material-icons">play_arrow</i>
  1173. </button>
  1174. <button
  1175. class="button is-primary"
  1176. @click="settings('pause')"
  1177. @keyup.enter="settings('pause')"
  1178. v-else
  1179. content="Pause Playback"
  1180. v-tippy
  1181. >
  1182. <i class="material-icons">pause</i>
  1183. </button>
  1184. <button
  1185. class="button is-danger"
  1186. @click.exact="settings('stop')"
  1187. @click.shift="settings('hardStop')"
  1188. @keyup.enter.exact="settings('stop')"
  1189. @keyup.shift.enter="
  1190. settings('hardStop')
  1191. "
  1192. content="Stop Playback"
  1193. v-tippy
  1194. >
  1195. <i class="material-icons">stop</i>
  1196. </button>
  1197. <tippy
  1198. class="playerRateDropdown"
  1199. :touch="true"
  1200. :interactive="true"
  1201. placement="bottom"
  1202. theme="dropdown"
  1203. ref="dropdown"
  1204. trigger="click"
  1205. append-to="parent"
  1206. @show="
  1207. () => {
  1208. showRateDropdown = true;
  1209. }
  1210. "
  1211. @hide="
  1212. () => {
  1213. showRateDropdown = false;
  1214. }
  1215. "
  1216. >
  1217. <div
  1218. ref="trigger"
  1219. class="control has-addons"
  1220. content="Set Playback Rate"
  1221. v-tippy
  1222. >
  1223. <button class="button is-primary">
  1224. <i class="material-icons"
  1225. >fast_forward</i
  1226. >
  1227. </button>
  1228. <button
  1229. class="button dropdown-toggle"
  1230. >
  1231. <i class="material-icons">
  1232. {{
  1233. showRateDropdown
  1234. ? "expand_more"
  1235. : "expand_less"
  1236. }}
  1237. </i>
  1238. </button>
  1239. </div>
  1240. <template #content>
  1241. <div class="nav-dropdown-items">
  1242. <button
  1243. class="nav-item button"
  1244. :class="{
  1245. active:
  1246. video.playbackRate ===
  1247. 0.5
  1248. }"
  1249. title="0.5x"
  1250. @click="
  1251. setPlaybackRate(0.5)
  1252. "
  1253. >
  1254. <p>0.5x</p>
  1255. </button>
  1256. <button
  1257. class="nav-item button"
  1258. :class="{
  1259. active:
  1260. video.playbackRate ===
  1261. 1
  1262. }"
  1263. title="1x"
  1264. @click="setPlaybackRate(1)"
  1265. >
  1266. <p>1x</p>
  1267. </button>
  1268. <button
  1269. class="nav-item button"
  1270. :class="{
  1271. active:
  1272. video.playbackRate ===
  1273. 2
  1274. }"
  1275. title="2x"
  1276. @click="setPlaybackRate(2)"
  1277. >
  1278. <p>2x</p>
  1279. </button>
  1280. </div>
  1281. </template>
  1282. </tippy>
  1283. </div>
  1284. <div class="player-footer-center">
  1285. <span>
  1286. <span>
  1287. {{ youtubeVideoCurrentTime }}
  1288. </span>
  1289. /
  1290. <span>
  1291. {{ youtubeVideoDuration }}
  1292. {{ youtubeVideoNote }}
  1293. </span>
  1294. </span>
  1295. </div>
  1296. <div class="player-footer-right">
  1297. <p id="volume-control">
  1298. <i
  1299. class="material-icons"
  1300. @click="toggleMute()"
  1301. :content="`${
  1302. muted ? 'Unmute' : 'Mute'
  1303. }`"
  1304. v-tippy
  1305. >{{
  1306. muted
  1307. ? "volume_mute"
  1308. : volumeSliderValue >= 50
  1309. ? "volume_up"
  1310. : "volume_down"
  1311. }}</i
  1312. >
  1313. <input
  1314. v-model="volumeSliderValue"
  1315. type="range"
  1316. min="0"
  1317. max="100"
  1318. class="volume-slider active"
  1319. @change="changeVolume()"
  1320. @input="changeVolume()"
  1321. />
  1322. </p>
  1323. </div>
  1324. </div>
  1325. </div>
  1326. <song-thumbnail
  1327. v-if="songDataLoaded && !songDeleted"
  1328. :song="song"
  1329. :fallback="false"
  1330. class="thumbnail-preview"
  1331. @loadError="onThumbnailLoadError"
  1332. />
  1333. <img
  1334. v-if="
  1335. !isYoutubeThumbnail &&
  1336. songDataLoaded &&
  1337. !songDeleted
  1338. "
  1339. class="thumbnail-dummy"
  1340. :src="song.thumbnail"
  1341. ref="thumbnailElement"
  1342. @load="onThumbnailLoad"
  1343. />
  1344. </div>
  1345. <div
  1346. class="edit-section"
  1347. v-if="songDataLoaded && !songDeleted"
  1348. >
  1349. <div class="control is-grouped">
  1350. <div class="title-container">
  1351. <label class="label">Title</label>
  1352. <p class="control has-addons">
  1353. <input
  1354. class="input"
  1355. type="text"
  1356. :ref="
  1357. el => (inputs['title-input'] = el)
  1358. "
  1359. v-model="song.title"
  1360. placeholder="Enter song title..."
  1361. @keyup.shift.enter="
  1362. getAlbumData('title')
  1363. "
  1364. />
  1365. <button
  1366. class="button youtube-get-button"
  1367. @click="getYouTubeData('title')"
  1368. >
  1369. <div
  1370. class="youtube-icon"
  1371. v-tippy
  1372. content="Fill from YouTube"
  1373. ></div>
  1374. </button>
  1375. <button
  1376. class="button album-get-button"
  1377. @click="getAlbumData('title')"
  1378. >
  1379. <i
  1380. class="material-icons"
  1381. v-tippy
  1382. content="Fill from Discogs"
  1383. >album</i
  1384. >
  1385. </button>
  1386. </p>
  1387. </div>
  1388. <div class="duration-container">
  1389. <label class="label">Duration</label>
  1390. <p class="control has-addons">
  1391. <input
  1392. class="input"
  1393. type="text"
  1394. placeholder="Enter song duration..."
  1395. v-model.number="song.duration"
  1396. @keyup.shift.enter="fillDuration()"
  1397. />
  1398. <button
  1399. class="button duration-fill-button"
  1400. @click="fillDuration()"
  1401. >
  1402. <i
  1403. class="material-icons"
  1404. v-tippy
  1405. content="Sync duration with YouTube"
  1406. >sync</i
  1407. >
  1408. </button>
  1409. </p>
  1410. </div>
  1411. <div class="skip-duration-container">
  1412. <label class="label">Skip duration</label>
  1413. <p class="control">
  1414. <input
  1415. class="input"
  1416. type="text"
  1417. placeholder="Enter skip duration..."
  1418. v-model.number="song.skipDuration"
  1419. />
  1420. </p>
  1421. </div>
  1422. </div>
  1423. <div class="control is-grouped">
  1424. <div class="album-art-container">
  1425. <label class="label">
  1426. Thumbnail
  1427. <i
  1428. v-if="
  1429. thumbnailNotSquare &&
  1430. !isYoutubeThumbnail
  1431. "
  1432. class="material-icons thumbnail-warning"
  1433. content="Thumbnail not square, it will be stretched"
  1434. v-tippy="{ theme: 'info' }"
  1435. >
  1436. warning
  1437. </i>
  1438. <i
  1439. v-if="
  1440. thumbnailLoadError &&
  1441. !isYoutubeThumbnail
  1442. "
  1443. class="material-icons thumbnail-warning"
  1444. content="Error loading thumbnail"
  1445. v-tippy="{ theme: 'info' }"
  1446. >
  1447. warning
  1448. </i>
  1449. </label>
  1450. <p class="control has-addons">
  1451. <input
  1452. class="input"
  1453. type="text"
  1454. v-model="song.thumbnail"
  1455. placeholder="Enter link to thumbnail..."
  1456. @keyup.shift.enter="
  1457. getAlbumData('albumArt')
  1458. "
  1459. />
  1460. <button
  1461. class="button youtube-get-button"
  1462. @click="getYouTubeData('thumbnail')"
  1463. >
  1464. <div
  1465. class="youtube-icon"
  1466. v-tippy
  1467. content="Fill from YouTube"
  1468. ></div>
  1469. </button>
  1470. <button
  1471. class="button album-get-button"
  1472. @click="getAlbumData('albumArt')"
  1473. >
  1474. <i
  1475. class="material-icons"
  1476. v-tippy
  1477. content="Fill from Discogs"
  1478. >album</i
  1479. >
  1480. </button>
  1481. </p>
  1482. </div>
  1483. <div class="youtube-id-container">
  1484. <label class="label">YouTube ID</label>
  1485. <p class="control">
  1486. <input
  1487. class="input"
  1488. type="text"
  1489. placeholder="Enter YouTube ID..."
  1490. v-model="song.youtubeId"
  1491. />
  1492. </p>
  1493. </div>
  1494. <div class="verified-container">
  1495. <label class="label">Verified</label>
  1496. <p class="is-expanded checkbox-control">
  1497. <label class="switch">
  1498. <input
  1499. type="checkbox"
  1500. id="verified"
  1501. v-model="song.verified"
  1502. />
  1503. <span class="slider round"></span>
  1504. </label>
  1505. </p>
  1506. </div>
  1507. </div>
  1508. <div class="control is-grouped">
  1509. <div class="artists-container">
  1510. <label class="label">Artists</label>
  1511. <p class="control has-addons">
  1512. <auto-suggest
  1513. v-model="artistInputValue"
  1514. ref="new-artist"
  1515. placeholder="Add artist..."
  1516. :all-items="
  1517. autosuggest.allItems.artists
  1518. "
  1519. @submitted="addTag('artists')"
  1520. @keyup.shift.enter="
  1521. getAlbumData('artists')
  1522. "
  1523. />
  1524. <button
  1525. class="button youtube-get-button"
  1526. @click="getYouTubeData('author')"
  1527. >
  1528. <div
  1529. class="youtube-icon"
  1530. v-tippy
  1531. content="Fill from YouTube"
  1532. ></div>
  1533. </button>
  1534. <button
  1535. class="button album-get-button"
  1536. @click="getAlbumData('artists')"
  1537. >
  1538. <i
  1539. class="material-icons"
  1540. v-tippy
  1541. content="Fill from Discogs"
  1542. >album</i
  1543. >
  1544. </button>
  1545. <button
  1546. class="button is-info add-button"
  1547. @click="addTag('artists')"
  1548. >
  1549. <i class="material-icons">add</i>
  1550. </button>
  1551. </p>
  1552. <div class="list-container">
  1553. <div
  1554. class="list-item"
  1555. v-for="artist in song.artists"
  1556. :key="artist"
  1557. >
  1558. <div
  1559. class="list-item-circle"
  1560. @click="
  1561. removeTag('artists', artist)
  1562. "
  1563. >
  1564. <i class="material-icons">close</i>
  1565. </div>
  1566. <p>{{ artist }}</p>
  1567. </div>
  1568. </div>
  1569. </div>
  1570. <div class="genres-container">
  1571. <label class="label">
  1572. <span>Genres</span>
  1573. <i
  1574. class="material-icons"
  1575. @click="toggleGenreHelper"
  1576. @dblclick="resetGenreHelper"
  1577. v-tippy
  1578. content="View list of genres"
  1579. >info</i
  1580. >
  1581. </label>
  1582. <p class="control has-addons">
  1583. <auto-suggest
  1584. v-model="genreInputValue"
  1585. ref="new-genre"
  1586. placeholder="Add genre..."
  1587. :all-items="autosuggest.allItems.genres"
  1588. @submitted="addTag('genres')"
  1589. @keyup.shift.enter="
  1590. getAlbumData('genres')
  1591. "
  1592. />
  1593. <button
  1594. class="button album-get-button"
  1595. @click="getAlbumData('genres')"
  1596. >
  1597. <i
  1598. class="material-icons"
  1599. v-tippy
  1600. content="Fill from Discogs"
  1601. >album</i
  1602. >
  1603. </button>
  1604. <button
  1605. class="button is-info add-button"
  1606. @click="addTag('genres')"
  1607. >
  1608. <i class="material-icons">add</i>
  1609. </button>
  1610. </p>
  1611. <div class="list-container">
  1612. <div
  1613. class="list-item"
  1614. v-for="genre in song.genres"
  1615. :key="genre"
  1616. >
  1617. <div
  1618. class="list-item-circle"
  1619. @click="removeTag('genres', genre)"
  1620. >
  1621. <i class="material-icons">close</i>
  1622. </div>
  1623. <p>{{ genre }}</p>
  1624. </div>
  1625. </div>
  1626. </div>
  1627. <div class="tags-container">
  1628. <label class="label">Tags</label>
  1629. <p class="control has-addons">
  1630. <auto-suggest
  1631. v-model="tagInputValue"
  1632. ref="new-tag"
  1633. placeholder="Add tag..."
  1634. :all-items="autosuggest.allItems.tags"
  1635. @submitted="addTag('tags')"
  1636. />
  1637. <button
  1638. class="button is-info add-button"
  1639. @click="addTag('tags')"
  1640. >
  1641. <i class="material-icons">add</i>
  1642. </button>
  1643. </p>
  1644. <div class="list-container">
  1645. <div
  1646. class="list-item"
  1647. v-for="tag in song.tags"
  1648. :key="tag"
  1649. >
  1650. <div
  1651. class="list-item-circle"
  1652. @click="removeTag('tags', tag)"
  1653. >
  1654. <i class="material-icons">close</i>
  1655. </div>
  1656. <p>{{ tag }}</p>
  1657. </div>
  1658. </div>
  1659. </div>
  1660. </div>
  1661. </div>
  1662. </div>
  1663. <div
  1664. class="right-section"
  1665. v-if="songDataLoaded && !songDeleted"
  1666. >
  1667. <div id="tabs-container">
  1668. <div id="tab-selection">
  1669. <button
  1670. class="button is-default"
  1671. :class="{ selected: tab === 'discogs' }"
  1672. :ref="el => (tabs['discogs-tab'] = el)"
  1673. @click="showTab('discogs')"
  1674. >
  1675. Discogs
  1676. </button>
  1677. <button
  1678. v-if="!newSong"
  1679. class="button is-default"
  1680. :class="{ selected: tab === 'reports' }"
  1681. :ref="el => (tabs['reports-tab'] = el)"
  1682. @click="showTab('reports')"
  1683. >
  1684. Reports ({{ reports.length }})
  1685. </button>
  1686. <button
  1687. class="button is-default"
  1688. :class="{ selected: tab === 'youtube' }"
  1689. :ref="el => (tabs['youtube-tab'] = el)"
  1690. @click="showTab('youtube')"
  1691. >
  1692. YouTube
  1693. </button>
  1694. <button
  1695. class="button is-default"
  1696. :class="{ selected: tab === 'musare-songs' }"
  1697. :ref="el => (tabs['musare-songs-tab'] = el)"
  1698. @click="showTab('musare-songs')"
  1699. >
  1700. Songs
  1701. </button>
  1702. </div>
  1703. <discogs
  1704. class="tab"
  1705. v-show="tab === 'discogs'"
  1706. :bulk="bulk"
  1707. :modal-uuid="modalUuid"
  1708. :modal-module-path="modalModulePath"
  1709. />
  1710. <reports-tab
  1711. v-if="!newSong"
  1712. class="tab"
  1713. v-show="tab === 'reports'"
  1714. :modal-uuid="modalUuid"
  1715. :modal-module-path="modalModulePath"
  1716. />
  1717. <youtube
  1718. class="tab"
  1719. v-show="tab === 'youtube'"
  1720. :modal-uuid="modalUuid"
  1721. :modal-module-path="modalModulePath"
  1722. />
  1723. <musare-songs
  1724. class="tab"
  1725. v-show="tab === 'musare-songs'"
  1726. :modal-uuid="modalUuid"
  1727. :modal-module-path="modalModulePath"
  1728. />
  1729. </div>
  1730. </div>
  1731. </template>
  1732. <template #footer>
  1733. <div v-if="bulk">
  1734. <button class="button is-primary" @click="editNextSong()">
  1735. Next
  1736. </button>
  1737. <button
  1738. class="button is-primary"
  1739. @click="toggleFlag()"
  1740. v-if="youtubeId && !songDeleted"
  1741. >
  1742. {{ flagged ? "Unflag" : "Flag" }}
  1743. </button>
  1744. </div>
  1745. <div v-if="!newSong && !songDeleted">
  1746. <save-button
  1747. :ref="el => (saveButtonRefs['saveButton'] = el)"
  1748. @clicked="save(song, false, 'saveButton')"
  1749. />
  1750. <save-button
  1751. :ref="el => (saveButtonRefs['saveAndCloseButton'] = el)"
  1752. :default-message="
  1753. bulk ? `Save and next` : `Save and close`
  1754. "
  1755. @clicked="save(song, true, 'saveAndCloseButton')"
  1756. />
  1757. <div class="right">
  1758. <button
  1759. class="button is-danger icon-with-button material-icons"
  1760. @click.prevent="
  1761. confirmAction({
  1762. message:
  1763. 'Removing this song will remove it from all playlists and cause a ratings recalculation.',
  1764. action: remove,
  1765. params: song._id
  1766. })
  1767. "
  1768. content="Delete Song"
  1769. v-tippy
  1770. >
  1771. delete_forever
  1772. </button>
  1773. </div>
  1774. </div>
  1775. <div v-else-if="newSong">
  1776. <save-button
  1777. :ref="el => (saveButtonRefs['createButton'] = el)"
  1778. default-message="Create Song"
  1779. @clicked="save(song, false, 'createButton', true)"
  1780. />
  1781. <save-button
  1782. :ref="
  1783. el => (saveButtonRefs['createAndCloseButton'] = el)
  1784. "
  1785. :default-message="
  1786. bulk ? `Create and next` : `Create and close`
  1787. "
  1788. @clicked="
  1789. save(song, true, 'createAndCloseButton', true)
  1790. "
  1791. />
  1792. </div>
  1793. </template>
  1794. </modal>
  1795. <floating-box
  1796. id="genreHelper"
  1797. ref="genreHelper"
  1798. :column="false"
  1799. title="Song Genres List"
  1800. >
  1801. <template #body>
  1802. <span
  1803. v-for="item in autosuggest.allItems.genres"
  1804. :key="`genre-helper-${item}`"
  1805. >
  1806. {{ item }}
  1807. </span>
  1808. </template>
  1809. </floating-box>
  1810. </div>
  1811. </template>
  1812. <style lang="less" scoped>
  1813. .night-mode {
  1814. .edit-section,
  1815. .player-section,
  1816. #tabs-container {
  1817. background-color: var(--dark-grey-3) !important;
  1818. border: 0 !important;
  1819. .tab {
  1820. border: 0 !important;
  1821. }
  1822. }
  1823. #tabs-container #tab-selection .button {
  1824. background: var(--dark-grey) !important;
  1825. color: var(--white) !important;
  1826. }
  1827. .left-section {
  1828. .edit-section {
  1829. .album-get-button,
  1830. .duration-fill-button,
  1831. .youtube-get-button,
  1832. .add-button {
  1833. &:focus,
  1834. &:hover {
  1835. border: none !important;
  1836. }
  1837. }
  1838. }
  1839. }
  1840. .duration-canvas {
  1841. background-color: var(--dark-grey-2) !important;
  1842. }
  1843. }
  1844. .modal-card-body {
  1845. display: flex;
  1846. }
  1847. .notice-container {
  1848. display: flex;
  1849. flex: 1;
  1850. justify-content: center;
  1851. h4 {
  1852. margin: auto;
  1853. }
  1854. }
  1855. .left-section {
  1856. height: 100%;
  1857. display: flex;
  1858. flex-direction: column;
  1859. margin-right: 16px;
  1860. .top-section {
  1861. display: flex;
  1862. .player-section {
  1863. width: 530px;
  1864. display: flex;
  1865. flex-direction: column;
  1866. border: 1px solid var(--light-grey-3);
  1867. border-radius: @border-radius;
  1868. overflow: hidden;
  1869. .duration-canvas {
  1870. background-color: var(--light-grey-2);
  1871. }
  1872. .player-error {
  1873. display: flex;
  1874. height: 318px;
  1875. width: 530px;
  1876. align-items: center;
  1877. * {
  1878. margin: 0;
  1879. flex: 1;
  1880. font-size: 30px;
  1881. text-align: center;
  1882. }
  1883. }
  1884. .player-footer {
  1885. display: flex;
  1886. justify-content: space-between;
  1887. height: 54px;
  1888. padding-left: 10px;
  1889. padding-right: 10px;
  1890. > * {
  1891. width: 33.3%;
  1892. display: flex;
  1893. align-items: center;
  1894. }
  1895. .player-footer-left {
  1896. flex: 1;
  1897. & > .button:not(:first-child) {
  1898. margin-left: 5px;
  1899. }
  1900. :deep(& > .playerRateDropdown) {
  1901. margin-left: 5px;
  1902. margin-bottom: unset !important;
  1903. .control.has-addons {
  1904. margin-bottom: unset !important;
  1905. & > .button {
  1906. font-size: 24px;
  1907. }
  1908. }
  1909. }
  1910. :deep(.tippy-box[data-theme~="dropdown"]) {
  1911. max-width: 100px !important;
  1912. .nav-dropdown-items .nav-item {
  1913. justify-content: center !important;
  1914. border-radius: @border-radius !important;
  1915. &.active {
  1916. background-color: var(--primary-color);
  1917. color: var(--white);
  1918. }
  1919. }
  1920. }
  1921. }
  1922. .player-footer-center {
  1923. justify-content: center;
  1924. align-items: center;
  1925. flex: 2;
  1926. font-size: 18px;
  1927. font-weight: 400;
  1928. width: 200px;
  1929. margin: 0 5px;
  1930. img {
  1931. height: 21px;
  1932. margin-right: 12px;
  1933. filter: invert(26%) sepia(54%) saturate(6317%)
  1934. hue-rotate(2deg) brightness(92%) contrast(115%);
  1935. }
  1936. }
  1937. .player-footer-right {
  1938. justify-content: right;
  1939. flex: 1;
  1940. #volume-control {
  1941. margin: 3px;
  1942. margin-top: 0;
  1943. display: flex;
  1944. align-items: center;
  1945. cursor: pointer;
  1946. .volume-slider {
  1947. width: 100%;
  1948. padding: 0 15px;
  1949. background: transparent;
  1950. min-width: 100px;
  1951. }
  1952. input[type="range"] {
  1953. -webkit-appearance: none;
  1954. margin: 7.3px 0;
  1955. }
  1956. input[type="range"]:focus {
  1957. outline: none;
  1958. }
  1959. input[type="range"]::-webkit-slider-runnable-track {
  1960. width: 100%;
  1961. height: 5.2px;
  1962. cursor: pointer;
  1963. box-shadow: 0;
  1964. background: var(--light-grey-3);
  1965. border-radius: @border-radius;
  1966. border: 0;
  1967. }
  1968. input[type="range"]::-webkit-slider-thumb {
  1969. box-shadow: 0;
  1970. border: 0;
  1971. height: 19px;
  1972. width: 19px;
  1973. border-radius: 100%;
  1974. background: var(--primary-color);
  1975. cursor: pointer;
  1976. -webkit-appearance: none;
  1977. margin-top: -6.5px;
  1978. }
  1979. input[type="range"]::-moz-range-track {
  1980. width: 100%;
  1981. height: 5.2px;
  1982. cursor: pointer;
  1983. box-shadow: 0;
  1984. background: var(--light-grey-3);
  1985. border-radius: @border-radius;
  1986. border: 0;
  1987. }
  1988. input[type="range"]::-moz-range-thumb {
  1989. box-shadow: 0;
  1990. border: 0;
  1991. height: 19px;
  1992. width: 19px;
  1993. border-radius: 100%;
  1994. background: var(--primary-color);
  1995. cursor: pointer;
  1996. -webkit-appearance: none;
  1997. margin-top: -6.5px;
  1998. }
  1999. input[type="range"]::-ms-track {
  2000. width: 100%;
  2001. height: 5.2px;
  2002. cursor: pointer;
  2003. box-shadow: 0;
  2004. background: var(--light-grey-3);
  2005. border-radius: @border-radius;
  2006. }
  2007. input[type="range"]::-ms-fill-lower {
  2008. background: var(--light-grey-3);
  2009. border: 0;
  2010. border-radius: 0;
  2011. box-shadow: 0;
  2012. }
  2013. input[type="range"]::-ms-fill-upper {
  2014. background: var(--light-grey-3);
  2015. border: 0;
  2016. border-radius: 0;
  2017. box-shadow: 0;
  2018. }
  2019. input[type="range"]::-ms-thumb {
  2020. box-shadow: 0;
  2021. border: 0;
  2022. height: 15px;
  2023. width: 15px;
  2024. border-radius: 100%;
  2025. background: var(--primary-color);
  2026. cursor: pointer;
  2027. -webkit-appearance: none;
  2028. margin-top: 1.5px;
  2029. }
  2030. }
  2031. }
  2032. }
  2033. }
  2034. :deep(.thumbnail-preview) {
  2035. width: 189px;
  2036. height: 189px;
  2037. margin-left: 16px;
  2038. }
  2039. .thumbnail-dummy {
  2040. opacity: 0;
  2041. height: 10px;
  2042. width: 10px;
  2043. }
  2044. }
  2045. .edit-section {
  2046. display: flex;
  2047. flex-wrap: wrap;
  2048. flex-grow: 1;
  2049. border: 1px solid var(--light-grey-3);
  2050. margin-top: 16px;
  2051. border-radius: @border-radius;
  2052. .album-get-button {
  2053. background-color: var(--purple);
  2054. color: var(--white);
  2055. width: 32px;
  2056. text-align: center;
  2057. border-width: 0;
  2058. }
  2059. .duration-fill-button,
  2060. .youtube-get-button {
  2061. background-color: var(--dark-red);
  2062. color: var(--white);
  2063. width: 32px;
  2064. text-align: center;
  2065. border-width: 0;
  2066. }
  2067. .add-button {
  2068. background-color: var(--primary-color) !important;
  2069. width: 32px;
  2070. i {
  2071. font-size: 32px;
  2072. }
  2073. }
  2074. .album-get-button,
  2075. .duration-fill-button,
  2076. .youtube-get-button,
  2077. .add-button {
  2078. &:focus,
  2079. &:hover {
  2080. filter: contrast(0.75);
  2081. border: 1px solid var(--black) !important;
  2082. }
  2083. }
  2084. .youtube-get-button {
  2085. padding-left: 4px;
  2086. padding-right: 4px;
  2087. .youtube-icon {
  2088. background: var(--white);
  2089. }
  2090. }
  2091. > div {
  2092. margin: 16px !important;
  2093. width: 100%;
  2094. }
  2095. input {
  2096. width: 100%;
  2097. }
  2098. .title-container {
  2099. width: calc((100% - 32px) / 2);
  2100. }
  2101. .duration-container {
  2102. margin-right: 16px;
  2103. margin-left: 16px;
  2104. width: calc((100% - 32px) / 4);
  2105. }
  2106. .skip-duration-container {
  2107. width: calc((100% - 32px) / 4);
  2108. }
  2109. .album-art-container {
  2110. margin-right: 16px;
  2111. width: 100%;
  2112. }
  2113. .youtube-id-container {
  2114. margin-right: 16px;
  2115. width: calc((100% - 16px) / 8 * 3);
  2116. }
  2117. .verified-container {
  2118. width: calc((100% - 16px) / 8);
  2119. .checkbox-control {
  2120. margin-top: 10px;
  2121. }
  2122. }
  2123. .artists-container {
  2124. width: calc((100% - 32px) / 3);
  2125. position: relative;
  2126. }
  2127. .genres-container {
  2128. width: calc((100% - 32px) / 3);
  2129. margin-left: 16px;
  2130. margin-right: 16px;
  2131. position: relative;
  2132. label {
  2133. display: flex;
  2134. i {
  2135. font-size: 15px;
  2136. align-self: center;
  2137. margin-left: 5px;
  2138. color: var(--primary-color);
  2139. cursor: pointer;
  2140. -webkit-user-select: none;
  2141. -moz-user-select: none;
  2142. -ms-user-select: none;
  2143. user-select: none;
  2144. }
  2145. }
  2146. }
  2147. .tags-container {
  2148. width: calc((100% - 32px) / 3);
  2149. position: relative;
  2150. }
  2151. .list-item-circle {
  2152. background-color: var(--primary-color);
  2153. width: 16px;
  2154. height: 16px;
  2155. border-radius: 8px;
  2156. cursor: pointer;
  2157. margin-right: 8px;
  2158. float: left;
  2159. -webkit-touch-callout: none;
  2160. -webkit-user-select: none;
  2161. -khtml-user-select: none;
  2162. -moz-user-select: none;
  2163. -ms-user-select: none;
  2164. user-select: none;
  2165. i {
  2166. color: var(--primary-color);
  2167. font-size: 14px;
  2168. margin-left: 1px;
  2169. position: relative;
  2170. top: -1px;
  2171. }
  2172. }
  2173. .list-item-circle:hover,
  2174. .list-item-circle:focus {
  2175. i {
  2176. color: var(--white);
  2177. }
  2178. }
  2179. .list-item > p {
  2180. line-height: 16px;
  2181. word-wrap: break-word;
  2182. width: calc(100% - 24px);
  2183. left: 24px;
  2184. float: left;
  2185. margin-bottom: 8px;
  2186. }
  2187. .list-item:last-child > p {
  2188. margin-bottom: 0;
  2189. }
  2190. .thumbnail-warning {
  2191. color: var(--red);
  2192. font-size: 18px;
  2193. margin: auto 0 auto 5px;
  2194. }
  2195. }
  2196. }
  2197. .right-section {
  2198. flex-basis: unset !important;
  2199. flex-grow: 0 !important;
  2200. display: flex;
  2201. height: 100%;
  2202. #tabs-container {
  2203. width: 376px;
  2204. #tab-selection {
  2205. display: flex;
  2206. overflow-x: auto;
  2207. .button {
  2208. border-radius: @border-radius @border-radius 0 0;
  2209. border: 0;
  2210. text-transform: uppercase;
  2211. font-size: 14px;
  2212. color: var(--dark-grey-3);
  2213. background-color: var(--light-grey-2);
  2214. flex-grow: 1;
  2215. height: 32px;
  2216. &:not(:first-of-type) {
  2217. margin-left: 5px;
  2218. }
  2219. }
  2220. .selected {
  2221. background-color: var(--primary-color) !important;
  2222. color: var(--white) !important;
  2223. font-weight: 600;
  2224. }
  2225. }
  2226. .tab {
  2227. border: 1px solid var(--light-grey-3);
  2228. border-radius: 0 0 @border-radius @border-radius;
  2229. padding: 15px;
  2230. height: calc(100% - 32px);
  2231. overflow: auto;
  2232. }
  2233. }
  2234. }
  2235. @media screen and (max-width: 1100px) {
  2236. .left-section,
  2237. .right-section {
  2238. height: unset;
  2239. max-height: unset;
  2240. }
  2241. .left-section {
  2242. margin-right: 0;
  2243. }
  2244. .right-section {
  2245. flex-basis: 100% !important;
  2246. #tabs-container {
  2247. width: 100%;
  2248. }
  2249. }
  2250. }
  2251. .modal-card-foot .is-primary {
  2252. width: 200px;
  2253. }
  2254. :deep(.autosuggest-container) {
  2255. top: unset;
  2256. }
  2257. </style>