1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027 |
- <script setup lang="ts">
- import { defineAsyncComponent, onMounted, onBeforeUnmount, ref } from "vue";
- import Toast from "toasters";
- import { storeToRefs } from "pinia";
- import aw from "@/aw";
- import { useWebsocketsStore } from "@/stores/websockets";
- import { useModalsStore } from "@/stores/modals";
- import { useViewYoutubeVideoStore } from "@/stores/viewYoutubeVideo";
- import { useStationStore } from "@/stores/station";
- import { useUserAuthStore } from "@/stores/userAuth";
- import utils from "@/utils";
- import Modal from "@/components/Modal.vue";
- const SongThumbnail = defineAsyncComponent(
- () => import("@/components/SongThumbnail.vue")
- );
- const props = defineProps({
- modalUuid: { type: String, required: true },
- videoId: { type: String, default: null },
- youtubeId: { type: String, default: null }
- });
- const interval = ref(null);
- const loaded = ref(false);
- const canvasWidth = ref(760);
- const volumeSliderValue = ref(20);
- const durationCanvas = ref(null);
- const activityWatchVideoDataInterval = ref(null);
- const activityWatchVideoLastStatus = ref("");
- const activityWatchVideoLastStartDuration = ref(0);
- const viewYoutubeVideoStore = useViewYoutubeVideoStore({
- modalUuid: props.modalUuid
- });
- const stationStore = useStationStore();
- const { video, player } = storeToRefs(viewYoutubeVideoStore);
- const {
- updatePlayer,
- stopVideo,
- loadVideoById,
- pauseVideo,
- setPlaybackRate,
- viewYoutubeVideo
- } = viewYoutubeVideoStore;
- const { updateMediaModalPlayingAudio } = stationStore;
- const { openModal, closeCurrentModal } = useModalsStore();
- const { socket } = useWebsocketsStore();
- const userAuthStore = useUserAuthStore();
- const { hasPermission } = userAuthStore;
- const remove = () => {
- socket.dispatch("youtube.removeVideos", video.value._id, res => {
- if (res.status === "success") {
- new Toast("YouTube video successfully removed.");
- closeCurrentModal();
- } else {
- new Toast("Youtube video with that ID not found.");
- }
- });
- };
- const seekTo = position => {
- pauseVideo(false);
- player.value.player.seekTo(position);
- };
- const settings = type => {
- switch (type) {
- case "stop":
- stopVideo();
- pauseVideo(true);
- break;
- case "pause":
- pauseVideo(true);
- break;
- case "play":
- pauseVideo(false);
- break;
- case "skipToLast10Secs":
- seekTo(Number(player.value.duration) - 10);
- break;
- default:
- break;
- }
- };
- const play = () => {
- if (player.value.player.getVideoData().video_id !== video.value.youtubeId) {
- video.value.duration = -1;
- loadVideoById(video.value.youtubeId);
- }
- settings("play");
- };
- const changeVolume = () => {
- const { volume } = player.value;
- localStorage.setItem("volume", `${volume}`);
- player.value.player.setVolume(volume);
- if (volume > 0) {
- player.value.player.unMute();
- player.value.muted = false;
- }
- };
- const toggleMute = () => {
- const previousVolume = parseFloat(localStorage.getItem("volume"));
- const volume = player.value.player.getVolume() <= 0 ? previousVolume : 0;
- player.value.muted = !player.value.muted;
- volumeSliderValue.value = volume;
- player.value.player.setVolume(volume);
- if (!player.value.muted) localStorage.setItem("volume", volume.toString());
- };
- // const increaseVolume = () => {
- // const previousVolume = parseFloat(localStorage.getItem("volume"));
- // let volume = previousVolume + 5;
- // player.value.muted = false;
- // if (volume > 100) volume = 100;
- // player.value.volume = volume;
- // player.value.player.setVolume(volume);
- // localStorage.setItem("volume", volume.toString());
- // };
- const drawCanvas = () => {
- if (!loaded.value) return;
- const canvasElement = durationCanvas.value;
- if (!canvasElement) return;
- const ctx = canvasElement.getContext("2d");
- const videoDuration = Number(player.value.duration);
- const duration = Number(video.value.duration);
- const afterDuration = videoDuration - duration;
- canvasWidth.value = Math.min(document.body.clientWidth - 40, 760);
- const width = canvasWidth.value;
- const currentTime =
- player.value.player && player.value.player.getCurrentTime
- ? player.value.player.getCurrentTime()
- : 0;
- const widthDuration = (duration / videoDuration) * width;
- const widthAfterDuration = (afterDuration / videoDuration) * width;
- const widthCurrentTime = (currentTime / videoDuration) * width;
- const durationColor = "#03A9F4";
- const afterDurationColor = "#41E841";
- const currentDurationColor = "#3b25e8";
- ctx.fillStyle = durationColor;
- ctx.fillRect(0, 0, widthDuration, 20);
- ctx.fillStyle = afterDurationColor;
- ctx.fillRect(widthDuration, 0, widthAfterDuration, 20);
- ctx.fillStyle = currentDurationColor;
- ctx.fillRect(widthCurrentTime, 0, 1, 20);
- };
- const setTrackPosition = event => {
- seekTo(
- Number(
- Number(player.value.player.getDuration()) *
- ((event.pageX - event.target.getBoundingClientRect().left) /
- canvasWidth.value)
- )
- );
- };
- const sendActivityWatchVideoData = () => {
- if (!player.value.paused) {
- if (activityWatchVideoLastStatus.value !== "playing") {
- activityWatchVideoLastStatus.value = "playing";
- activityWatchVideoLastStartDuration.value = Math.floor(
- Number(player.value.currentTime)
- );
- }
- const videoData = {
- title: video.value.title,
- artists: video.value.author,
- youtubeId: video.value.youtubeId,
- muted: player.value.muted,
- volume: player.value.volume,
- startedDuration:
- activityWatchVideoLastStartDuration.value <= 0
- ? 0
- : activityWatchVideoLastStartDuration.value,
- source: `viewYoutubeVideo#${video.value.youtubeId}`,
- hostname: window.location.hostname
- };
- aw.sendVideoData(videoData);
- } else {
- activityWatchVideoLastStatus.value = "not_playing";
- }
- };
- onMounted(() => {
- socket.onConnect(() => {
- loaded.value = false;
- socket.dispatch(
- "youtube.getVideo",
- props.videoId || props.youtubeId,
- true,
- res => {
- if (res.status === "success") {
- const youtubeVideo = res.data;
- viewYoutubeVideo(youtubeVideo);
- loaded.value = true;
- interval.value = setInterval(() => {
- if (
- video.value.duration !== -1 &&
- player.value.paused === false &&
- player.value.playerReady &&
- (player.value.player.getCurrentTime() >
- video.value.duration ||
- (player.value.player.getCurrentTime() > 0 &&
- player.value.player.getCurrentTime() >=
- player.value.player.getDuration()))
- ) {
- stopVideo();
- pauseVideo(true);
- drawCanvas();
- }
- if (
- player.value.playerReady &&
- player.value.player.getVideoData &&
- player.value.player.getVideoData() &&
- player.value.player.getVideoData().video_id ===
- video.value.youtubeId
- ) {
- const currentTime =
- player.value.player.getCurrentTime();
- if (currentTime !== undefined)
- player.value.currentTime =
- currentTime.toFixed(3);
- if (player.value.duration.indexOf(".000") !== -1) {
- const duration =
- player.value.player.getDuration();
- if (duration !== undefined) {
- if (
- `${player.value.duration}` ===
- `${Number(video.value.duration).toFixed(
- 3
- )}`
- )
- video.value.duration =
- duration.toFixed(3);
- player.value.duration = duration.toFixed(3);
- if (
- player.value.duration.indexOf(
- ".000"
- ) !== -1
- )
- player.value.videoNote = "(~)";
- else player.value.videoNote = "";
- drawCanvas();
- }
- }
- }
- if (player.value.paused === false) drawCanvas();
- }, 200);
- activityWatchVideoDataInterval.value = setInterval(() => {
- sendActivityWatchVideoData();
- }, 1000);
- if (window.YT && window.YT.Player) {
- player.value.player = new window.YT.Player(
- `viewYoutubeVideoPlayer-${props.modalUuid}`,
- {
- height: 298,
- width: 530,
- videoId: null,
- host: "https://www.youtube-nocookie.com",
- playerVars: {
- controls: 0,
- iv_load_policy: 3,
- rel: 0,
- showinfo: 0,
- autoplay: 0
- },
- events: {
- onReady: () => {
- let volume = parseFloat(
- localStorage.getItem("volume")
- );
- volume =
- typeof volume === "number"
- ? volume
- : 20;
- player.value.player.setVolume(volume);
- if (volume > 0)
- player.value.player.unMute();
- player.value.playerReady = true;
- if (video.value && video.value._id)
- player.value.player.cueVideoById(
- video.value.youtubeId
- );
- setPlaybackRate();
- drawCanvas();
- },
- onStateChange: event => {
- drawCanvas();
- if (event.data === 1) {
- player.value.paused = false;
- updateMediaModalPlayingAudio(true);
- const youtubeDuration =
- player.value.player.getDuration();
- const newYoutubeVideoDuration =
- youtubeDuration.toFixed(3);
- if (
- player.value.duration.indexOf(
- ".000"
- ) !== -1 &&
- `${player.value.duration}` !==
- `${newYoutubeVideoDuration}`
- ) {
- const songDurationNumber =
- Number(
- video.value.duration
- );
- const songDurationNumber2 =
- Number(
- video.value.duration
- ) + 1;
- const songDurationNumber3 =
- Number(
- video.value.duration
- ) - 1;
- const fixedSongDuration =
- songDurationNumber.toFixed(
- 3
- );
- const fixedSongDuration2 =
- songDurationNumber2.toFixed(
- 3
- );
- const fixedSongDuration3 =
- songDurationNumber3.toFixed(
- 3
- );
- if (
- `${player.value.duration}` ===
- `${Number(
- video.value.duration
- ).toFixed(3)}` &&
- (fixedSongDuration ===
- player.value.duration ||
- fixedSongDuration2 ===
- player.value
- .duration ||
- fixedSongDuration3 ===
- player.value
- .duration)
- )
- video.value.duration =
- newYoutubeVideoDuration;
- player.value.duration =
- newYoutubeVideoDuration;
- if (
- player.value.duration.indexOf(
- ".000"
- ) !== -1
- )
- player.value.videoNote =
- "(~)";
- else
- player.value.videoNote = "";
- }
- if (video.value.duration === -1)
- video.value.duration = Number(
- player.value.duration
- );
- if (
- video.value.duration >
- youtubeDuration + 1
- ) {
- stopVideo();
- pauseVideo(true);
- return new Toast(
- "Video can't play. Specified duration is bigger than the YouTube song duration."
- );
- }
- if (video.value.duration <= 0) {
- stopVideo();
- pauseVideo(true);
- return new Toast(
- "Video can't play. Specified duration has to be more than 0 seconds."
- );
- }
- setPlaybackRate();
- } else if (event.data === 2) {
- player.value.paused = true;
- updateMediaModalPlayingAudio(false);
- }
- return false;
- }
- }
- }
- );
- } else {
- updatePlayer({
- error: true,
- errorMessage: "Player could not be loaded."
- });
- }
- let volume = parseFloat(localStorage.getItem("volume"));
- volume =
- typeof volume === "number" && !Number.isNaN(volume)
- ? volume
- : 20;
- localStorage.setItem("volume", volume.toString());
- updatePlayer({ volume });
- socket.dispatch(
- "apis.joinRoom",
- `view-youtube-video.${video.value._id}`
- );
- } else {
- new Toast("YouTube video with that ID not found");
- closeCurrentModal();
- }
- }
- );
- });
- socket.on(
- "event:youtubeVideo.removed",
- () => {
- new Toast("This YouTube video was removed.");
- closeCurrentModal();
- },
- { modalUuid: props.modalUuid }
- );
- });
- onBeforeUnmount(() => {
- stopVideo();
- pauseVideo(true);
- updateMediaModalPlayingAudio(false);
- player.value.duration = "0.000";
- player.value.currentTime = 0;
- player.value.playerReady = false;
- player.value.videoNote = "";
- clearInterval(interval.value);
- clearInterval(activityWatchVideoDataInterval.value);
- loaded.value = false;
- socket.dispatch(
- "apis.leaveRoom",
- `view-youtube-video.${video.value._id}`,
- () => {}
- );
- // Delete the Pinia store that was created for this modal, after all other cleanup tasks are performed
- viewYoutubeVideoStore.$dispose();
- });
- </script>
- <template>
- <modal title="View YouTube Video">
- <template #body>
- <div v-if="loaded" class="top-section">
- <div class="left-section">
- <p>
- <strong>ID:</strong>
- <span :title="video._id">{{ video._id }}</span>
- </p>
- <p>
- <strong>YouTube ID:</strong>
- <a
- :href="
- 'https://www.youtube.com/watch?v=' +
- `${video.youtubeId}`
- "
- target="_blank"
- >
- {{ video.youtubeId }}
- </a>
- </p>
- <p>
- <strong>Title:</strong>
- <span :title="video.title">{{ video.title }}</span>
- </p>
- <p>
- <strong>Author:</strong>
- <span :title="video.author">{{ video.author }}</span>
- </p>
- <p>
- <strong>Duration:</strong>
- <span :title="`${video.duration}`">{{
- video.duration
- }}</span>
- </p>
- <p>
- <strong>Upload Date:</strong>
- <span
- :title="
- video.uploadedAt
- ? new Date(video.uploadedAt).toString()
- : 'Unknown'
- "
- >{{
- video.uploadedAt
- ? utils.getDateFormatted(video.uploadedAt)
- : "Unknown"
- }}</span
- >
- </p>
- </div>
- <div class="right-section">
- <song-thumbnail :song="video" class="thumbnail-preview" />
- </div>
- </div>
- <div v-show="loaded" class="player-section">
- <div class="player-container">
- <div :id="`viewYoutubeVideoPlayer-${modalUuid}`" />
- </div>
- <div v-show="player.error" class="player-error">
- <h2>{{ player.errorMessage }}</h2>
- </div>
- <canvas
- ref="durationCanvas"
- class="duration-canvas"
- v-show="!player.error"
- height="20"
- :width="canvasWidth"
- @click="setTrackPosition($event)"
- />
- <div class="player-footer">
- <div class="player-footer-left">
- <button
- class="button is-primary"
- @click="play()"
- @keyup.enter="play()"
- v-if="player.paused"
- content="Resume Playback"
- v-tippy
- >
- <i class="material-icons">play_arrow</i>
- </button>
- <button
- class="button is-primary"
- @click="settings('pause')"
- @keyup.enter="settings('pause')"
- v-else
- content="Pause Playback"
- v-tippy
- >
- <i class="material-icons">pause</i>
- </button>
- <button
- class="button is-danger"
- @click.exact="settings('stop')"
- @click.shift="settings('hardStop')"
- @keyup.enter.exact="settings('stop')"
- @keyup.shift.enter="settings('hardStop')"
- content="Stop Playback"
- v-tippy
- >
- <i class="material-icons">stop</i>
- </button>
- <tippy
- class="playerRateDropdown"
- :touch="true"
- :interactive="true"
- placement="bottom"
- theme="dropdown"
- ref="dropdown"
- trigger="click"
- append-to="parent"
- @show="
- () => {
- player.showRateDropdown = true;
- }
- "
- @hide="
- () => {
- player.showRateDropdown = false;
- }
- "
- >
- <div
- ref="trigger"
- class="control has-addons"
- content="Set Playback Rate"
- v-tippy
- >
- <button class="button is-primary">
- <i class="material-icons">fast_forward</i>
- </button>
- <button class="button dropdown-toggle">
- <i class="material-icons">
- {{
- player.showRateDropdown
- ? "expand_more"
- : "expand_less"
- }}
- </i>
- </button>
- </div>
- <template #content>
- <div class="nav-dropdown-items">
- <button
- class="nav-item button"
- :class="{
- active: player.playbackRate === 0.5
- }"
- title="0.5x"
- @click="setPlaybackRate(0.5)"
- >
- <p>0.5x</p>
- </button>
- <button
- class="nav-item button"
- :class="{
- active: player.playbackRate === 1
- }"
- title="1x"
- @click="setPlaybackRate(1)"
- >
- <p>1x</p>
- </button>
- <button
- class="nav-item button"
- :class="{
- active: player.playbackRate === 2
- }"
- title="2x"
- @click="setPlaybackRate(2)"
- >
- <p>2x</p>
- </button>
- </div>
- </template>
- </tippy>
- </div>
- <div class="player-footer-center">
- <span>
- <span>
- {{ player.currentTime }}
- </span>
- /
- <span>
- {{ player.duration }}
- {{ player.videoNote }}
- </span>
- </span>
- </div>
- <div class="player-footer-right">
- <p id="volume-control">
- <i
- class="material-icons"
- @click="toggleMute()"
- :content="`${player.muted ? 'Unmute' : 'Mute'}`"
- v-tippy
- >{{
- player.muted
- ? "volume_mute"
- : player.volume >= 50
- ? "volume_up"
- : "volume_down"
- }}</i
- >
- <input
- v-model="player.volume"
- type="range"
- min="0"
- max="100"
- class="volume-slider active"
- @change="changeVolume()"
- @input="changeVolume()"
- />
- </p>
- </div>
- </div>
- </div>
- <div v-if="!loaded" class="vertical-padding">
- <p>Video hasn't loaded yet</p>
- </div>
- </template>
- <template #footer>
- <button
- v-if="
- hasPermission('songs.create') ||
- hasPermission('songs.update')
- "
- class="button is-primary icon-with-button material-icons"
- @click.prevent="
- openModal({ modal: 'editSong', props: { song: video } })
- "
- content="Create/edit song from video"
- v-tippy
- >
- music_note
- </button>
- <div class="right">
- <button
- v-if="hasPermission('youtube.removeVideos')"
- class="button is-danger icon-with-button material-icons"
- @click.prevent="
- openModal({
- modal: 'confirm',
- props: {
- message:
- 'Removing this video will remove it from all playlists and cause a ratings recalculation.',
- onCompleted: remove
- }
- })
- "
- content="Delete Video"
- v-tippy
- >
- delete_forever
- </button>
- </div>
- </template>
- </modal>
- </template>
- <style lang="less" scoped>
- .night-mode {
- .player-section,
- .top-section {
- background-color: var(--dark-grey-3) !important;
- border: 0 !important;
- .duration-canvas {
- background-color: var(--dark-grey-2) !important;
- }
- }
- }
- .top-section {
- display: flex;
- margin: 0 auto;
- padding: 10px;
- border: 1px solid var(--light-grey-3);
- border-radius: @border-radius;
- .left-section {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- p {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- &:first-child {
- margin-top: auto;
- }
- &:last-child {
- margin-bottom: auto;
- }
- & > span,
- & > a {
- margin-left: 5px;
- }
- }
- }
- :deep(.right-section .thumbnail-preview) {
- width: 120px;
- height: 120px;
- margin: 0;
- }
- @media (max-width: 600px) {
- flex-direction: column-reverse;
- .left-section {
- margin-top: 10px;
- }
- }
- }
- .player-section {
- display: flex;
- flex-direction: column;
- margin: 10px auto 0 auto;
- border: 1px solid var(--light-grey-3);
- border-radius: @border-radius;
- overflow: hidden;
- .player-container {
- position: relative;
- padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
- height: 0;
- overflow: hidden;
- :deep([id^="viewYoutubeVideoPlayer"]) {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- min-height: 200px;
- }
- }
- .duration-canvas {
- background-color: var(--light-grey-2);
- }
- .player-error {
- display: flex;
- height: 428px;
- align-items: center;
- * {
- margin: 0;
- flex: 1;
- font-size: 30px;
- text-align: center;
- }
- }
- .player-footer {
- display: flex;
- justify-content: space-between;
- height: 54px;
- padding-left: 10px;
- padding-right: 10px;
- > * {
- width: 33.3%;
- display: flex;
- align-items: center;
- }
- .player-footer-left {
- flex: 1;
- & > .button:not(:first-child) {
- margin-left: 5px;
- }
- :deep(& > .playerRateDropdown) {
- margin-left: 5px;
- margin-bottom: unset !important;
- .control.has-addons {
- margin-bottom: unset !important;
- & > .button {
- font-size: 24px;
- }
- }
- }
- :deep(.tippy-box[data-theme~="dropdown"]) {
- max-width: 100px !important;
- .nav-dropdown-items .nav-item {
- justify-content: center !important;
- border-radius: @border-radius !important;
- &.active {
- background-color: var(--primary-color);
- color: var(--white);
- }
- }
- }
- }
- .player-footer-center {
- justify-content: center;
- align-items: center;
- flex: 2;
- font-size: 18px;
- font-weight: 400;
- width: 200px;
- margin: 0 5px;
- img {
- height: 21px;
- margin-right: 12px;
- filter: invert(26%) sepia(54%) saturate(6317%) hue-rotate(2deg)
- brightness(92%) contrast(115%);
- }
- }
- .player-footer-right {
- justify-content: right;
- flex: 1;
- #volume-control {
- margin: 3px;
- margin-top: 0;
- display: flex;
- align-items: center;
- cursor: pointer;
- .volume-slider {
- width: 100%;
- padding: 0 15px;
- background: transparent;
- min-width: 100px;
- }
- input[type="range"] {
- -webkit-appearance: none;
- margin: 7.3px 0;
- }
- input[type="range"]:focus {
- outline: none;
- }
- input[type="range"]::-webkit-slider-runnable-track {
- width: 100%;
- height: 5.2px;
- cursor: pointer;
- box-shadow: 0;
- background: var(--light-grey-3);
- border-radius: @border-radius;
- border: 0;
- }
- input[type="range"]::-webkit-slider-thumb {
- box-shadow: 0;
- border: 0;
- height: 19px;
- width: 19px;
- border-radius: 100%;
- background: var(--primary-color);
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: -6.5px;
- }
- input[type="range"]::-moz-range-track {
- width: 100%;
- height: 5.2px;
- cursor: pointer;
- box-shadow: 0;
- background: var(--light-grey-3);
- border-radius: @border-radius;
- border: 0;
- }
- input[type="range"]::-moz-range-thumb {
- box-shadow: 0;
- border: 0;
- height: 19px;
- width: 19px;
- border-radius: 100%;
- background: var(--primary-color);
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: -6.5px;
- }
- input[type="range"]::-ms-track {
- width: 100%;
- height: 5.2px;
- cursor: pointer;
- box-shadow: 0;
- background: var(--light-grey-3);
- border-radius: @border-radius;
- }
- input[type="range"]::-ms-fill-lower {
- background: var(--light-grey-3);
- border: 0;
- border-radius: 0;
- box-shadow: 0;
- }
- input[type="range"]::-ms-fill-upper {
- background: var(--light-grey-3);
- border: 0;
- border-radius: 0;
- box-shadow: 0;
- }
- input[type="range"]::-ms-thumb {
- box-shadow: 0;
- border: 0;
- height: 15px;
- width: 15px;
- border-radius: 100%;
- background: var(--primary-color);
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: 1.5px;
- }
- }
- }
- }
- }
- </style>
|