stylelint

client/.prettierrc.cjs

@@ -1,3 +1,11 @@
 module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  tabs: false,
+  semi: true,
   singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  endOfLine: 'auto',
 };

client/.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
+  "rules": {
+    "selector-class-pattern": null
+  }
+}

client/package.json

@@ -8,6 +8,8 @@
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
     "lint:fix": "eslint --ext .js,.vue --fix ./",
+    "lint:css": "stylelint '**/*.scss'",
+    "lint:css:fix": "npm run lint:css -- --fix",
     "test": "echo \"No test specified\" && exit 0",
     "serve": "npx cross-env NODE_ENV=development quasar dev",
     "serve:ssr": "quasar dev -m ssr",
@@ -64,6 +66,10 @@
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.3.2",
     "sass-loader": "^13.3.2",
+    "stylelint": "^16.7.0",
+    "stylelint-config-clean-order": "^6.1.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "vue-loader": "^17.3.0"
   },
   "browserslist": [

client/quasar.config.js

@@ -80,9 +80,7 @@ module.exports = configure(function (ctx) {
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
       chainWebpack(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js', 'vue'] }]);
         //   chain.plugin('normal-module-replacement').use(
         // new webpack.NormalModuleReplacementPlugin(/settings$/, function(resource) {
         //     resource.request = resource.request.replace(/settings$/, `settings/${process.env.NODE_ENV}`);
@@ -193,9 +191,7 @@ module.exports = configure(function (ctx) {
       // Tell browser when a file from the server should expire from cache (in ms)
 
       chainWebpackWebserver(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
 
       middlewares: [
@@ -213,9 +209,7 @@ module.exports = configure(function (ctx) {
       // if using workbox in InjectManifest mode
 
       chainWebpackCustomSW(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
 
       manifest: {
@@ -290,15 +284,11 @@ module.exports = configure(function (ctx) {
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
 
       chainWebpackMain(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
 
       chainWebpackPreload(chain) {
-        chain
-          .plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{ extensions: ['js'] }]);
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [{ extensions: ['js'] }]);
       },
     },
   };

client/src/App.vue

@@ -23,15 +23,7 @@ import Player from '@/components/player.vue';
 import ChangingUser from '@/components/modal/сhanging-user.vue';
 
 export default {
-  async preFetch({
-    store,
-    currentRoute,
-    previousRoute,
-    redirect,
-    ssrContext,
-    urlPath,
-    publicPath,
-  }) {},
+  async preFetch({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {},
   components: {
     ChangingUser,
     Player,

client/src/assets/css/common.scss

@@ -16,7 +16,8 @@ h1{
   @mixin h1;
 }
 
-.h2, h2 {
+.h2,
+h2 {
   @mixin h2;
 }
 

client/src/assets/css/module/about.scss

@@ -13,10 +13,10 @@
     }
 
     &-right {
-            flex: 1 1 auto;
-            background: url("./assets/img/bg/about-banner.svg") no-repeat 50% 60%;
       position: relative;
       z-index: 2;
+      flex: 1 1 auto;
+      background: url('./assets/img/bg/about-banner.svg') no-repeat 50% 60%;
     }
 
     &-description {
@@ -60,24 +60,25 @@
     margin-bottom: var(--space-between-sections);
 
     &-item {
-            width: calc(100% / 3 - 20px / 3);
-            min-height: 725px;
       position: relative;
       z-index: 2;
-            background-size: cover;
+
+      width: calc(100% / 3 - 20px / 3);
+      min-height: 725px;
+
       background-repeat: no-repeat;
+      background-size: cover;
 
       &.m--gallery-item-one {
-                background-image: url("./assets/img/bg/gallery-item-one.svg");
+        background-image: url('./assets/img/bg/gallery-item-one.svg');
       }
 
       &.m--gallery-item-two {
-                background-image: url("./assets/img/bg/gallery-item-two.svg");
-
+        background-image: url('./assets/img/bg/gallery-item-two.svg');
       }
 
       &.m--gallery-item-three {
-                background-image: url("./assets/img/bg/gallery-item-three.svg");
+        background-image: url('./assets/img/bg/gallery-item-three.svg');
       }
     }
   }
@@ -101,16 +102,18 @@
     }
 
     &-list {
-
     }
 
     &-item {
-            display: flex;
-            align-items: center;
-            padding-bottom: 1.5rem;
-            margin-bottom: 1.5rem;
       position: relative;
       z-index: 2;
+
+      display: flex;
+      align-items: center;
+
+      margin-bottom: 1.5rem;
+      padding-bottom: 1.5rem;
+
       border-bottom: 1px solid var(--color-white-opacity);
     }
   }

client/src/assets/css/setting.scss

@@ -20,18 +20,8 @@ $color-white-opacity: #bbb9ca;
   --base-fz: 18px;
   --base-lh: 1.3;
   --font-family-base: 'Manrope', 'Tahoma', sans-serif;
-  --linear-gradient-highlight: linear-gradient(
-    259.3deg,
-    #5e5bfc 0.44%,
-    #871df0 97.88%
-  );
-  --linear-gradient: linear-gradient(
-    91.17deg,
-    #c6f1f7 -4.01%,
-    #f983e9 36.14%,
-    #b877ff 77.44%,
-    #c2e9cd 106.11%
-  );
+  --linear-gradient-highlight: linear-gradient(259.3deg, #5e5bfc 0.44%, #871df0 97.88%);
+  --linear-gradient: linear-gradient(91.17deg, #c6f1f7 -4.01%, #f983e9 36.14%, #b877ff 77.44%, #c2e9cd 106.11%);
   --container: $document-width-xl;
   --space-between-block: calc(var(--base-fz) * 2.25);
   --space-between-sections: calc(var(--base-fz) * 7);

client/src/components/app-breadcrumbs.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="app__breadcrumbs breadcrumbs">
-    <router-link
-      v-for="(item, key) in breadcrumbs"
-      :key="key"
-      v-slot="{ href, navigate }"
-      :to="item.route"
-      custom
-    >
+    <router-link v-for="(item, key) in breadcrumbs" :key="key" v-slot="{ href, navigate }" :to="item.route" custom>
       <div v-if="item.name" class="breadcrumbs__item">
         <a :href="href" class="breadcrumbs__item-link" @click="navigate">
           {{ item.name }}

client/src/components/app-footer.vue

@@ -4,33 +4,20 @@
       <h2 class="h2 m--white">Напишите нам</h2>
       <div class="footer__question">
         <div class="text">Остались вопросы? Мы с радостью вам ответим!</div>
-        <button class="button m--white m--arrow footer__question-button">
-          Написать
-        </button>
+        <button class="button m--white m--arrow footer__question-button">Написать</button>
       </div>
     </div>
     <div class="footer__bottom">
       <ul class="footer__menu">
-        <li
-          v-for="(item, key) in menu"
-          :key="key"
-          :class="['footer__menu-item', item.class]"
-        >
-          <router-link
-            :to="{ name: item.name, params: item.params }"
-            class="footer__menu-link"
-          >
+        <li v-for="(item, key) in menu" :key="key" :class="['footer__menu-item', item.class]">
+          <router-link :to="{ name: item.name, params: item.params }" class="footer__menu-link">
             {{ item.title }}
           </router-link>
         </li>
       </ul>
       <div class="footer__connection">
         <ul class="footer__social">
-          <li
-            v-for="(item, key) in socialMenu"
-            :key="key"
-            :class="['footer__menu-item', item.class]"
-          >
+          <li v-for="(item, key) in socialMenu" :key="key" :class="['footer__menu-item', item.class]">
             <router-link :to="item.link" class="footer__menu-link">
               {{ item.title }}
             </router-link>
@@ -38,14 +25,10 @@
         </ul>
         <ul class="footer__connection">
           <li class="footer__menu-item">
-            <router-link to="#" class="m--underline">
-              it@radio.org
-            </router-link>
+            <router-link to="#" class="m--underline"> it@radio.org </router-link>
           </li>
           <li class="footer__menu-item">
-            <router-link to="#" class="m--underline">
-              +7 (900) 000-01-12
-            </router-link>
+            <router-link to="#" class="m--underline"> +7 (900) 000-01-12 </router-link>
           </li>
         </ul>
       </div>

client/src/components/app-header.vue

@@ -11,16 +11,8 @@
         <li class="header__logo m--menu" @click="next('home')">
           <img src="@/assets/img/icon/logo.svg" alt="logo" />
         </li>
-        <li
-          v-for="(item, key) in menu"
-          :key="key"
-          :class="['header__menu-item', item.class]"
-        >
-          <router-link
-            v-if="!item.action"
-            :to="{ name: item.name, params: item.params }"
-            class="header__menu-link"
-          >
+        <li v-for="(item, key) in menu" :key="key" :class="['header__menu-item', item.class]">
+          <router-link v-if="!item.action" :to="{ name: item.name, params: item.params }" class="header__menu-link">
             {{ item.title }}
           </router-link>
           <button
@@ -31,12 +23,7 @@
           >
             {{ item.title }}
           </button>
-          <button
-            v-else
-            class="header__menu-icon"
-            :class="[item.icon]"
-            @click="handlerClick(item.action)"
-          ></button>
+          <button v-else class="header__menu-icon" :class="[item.icon]" @click="handlerClick(item.action)"></button>
         </li>
       </ul>
       <div class="header__burger" @click="handlerShowMenu">

client/src/components/blog.vue

@@ -36,15 +36,13 @@ export default {
         },
         {
           id: 2,
-          title:
-            'Искусственный интеллект меняет мир технологий: возможности и вызовы',
+          title: 'Искусственный интеллект меняет мир технологий: возможности и вызовы',
           time: '2',
           data: '21 октября',
         },
         {
           id: 3,
-          title:
-            'Как кибербезопасность становится ключевым фактором успеха в IT',
+          title: 'Как кибербезопасность становится ключевым фактором успеха в IT',
           time: '2',
           data: '21 октября',
         },

client/src/components/modal/authentication.vue

@@ -161,10 +161,7 @@ export default {
             node.setErrors([err.detail], err.error);
           });
       } else {
-        if (
-          this.formRegistration.password ===
-          this.formRegistration.repeatPassword
-        ) {
+        if (this.formRegistration.password === this.formRegistration.repeatPassword) {
           app
             .createUser(this.formRegistration)
             .then((res) => {

client/src/components/modal/rubric-modal.vue

@@ -19,10 +19,7 @@
         <div class="title m--white rubric-modal__title">
           {{ rubrik.name }}
         </div>
-        <button
-          class="button modal__close rubric-modal__close"
-          @click="$emit('hideModal')"
-        ></button>
+        <button class="button modal__close rubric-modal__close" @click="$emit('hideModal')"></button>
       </div>
       <div class="rubric-modal__cover">
         <img :src="`${selfUrl}${rubrik.img}`" alt="" />
@@ -30,9 +27,7 @@
       <div class="rubric-modal__description">
         {{ rubrik.description }}
       </div>
-      <button class="button m--fit-content m--white m--arrow" v-if="user?.id">
-        Написать
-      </button>
+      <button class="button m--fit-content m--white m--arrow" v-if="user?.id">Написать</button>
     </template>
   </vue-final-modal>
 </template>

client/src/components/pagination.vue

@@ -97,28 +97,16 @@ export default {
           if (count <= 4) {
             items.push({ text: item, value: item });
           } else {
-            if (
-              item === 1 &&
-              this.currentPage !== item &&
-              this.currentPage - 1 !== 1 &&
-              this.currentPage - 2 !== 1
-            ) {
+            if (item === 1 && this.currentPage !== item && this.currentPage - 1 !== 1 && this.currentPage - 2 !== 1) {
               items.push({ text: '1', value: 1 });
               items.push({ text: '...', value: null });
-            } else if (
-              item === count &&
-              this.currentPage + 1 !== count &&
-              this.currentPage + 2 !== count
-            ) {
+            } else if (item === count && this.currentPage + 1 !== count && this.currentPage + 2 !== count) {
               items.push({ text: '...', value: null });
               items.push({ text: count, value: count });
             } else {
               let deltaPrev = count - this.currentPage <= 3 ? 3 : 2;
               let deltaAfter = this.currentPage <= 3 ? 4 - this.currentPage : 2;
-              if (
-                item > this.currentPage - deltaPrev &&
-                item < this.currentPage + deltaAfter
-              ) {
+              if (item > this.currentPage - deltaPrev && item < this.currentPage + deltaAfter) {
                 console.log(item);
                 items.push({ text: item, value: item });
               }

client/src/components/player.vue

@@ -4,31 +4,15 @@
       <q-skeleton v-if="loaderPlay" height="100%" />
       <template v-else>
         <img v-if="currentPlay.art" :src="currentPlay.art" alt="player" />
-        <img
-          v-else
-          :src="require('@/assets/img/mock/template-artist.png')"
-          alt="player"
-        />
+        <img v-else :src="require('@/assets/img/mock/template-artist.png')" alt="player" />
       </template>
     </div>
     <div class="player__content">
       <div class="player__top">
-        <q-skeleton
-          v-if="loaderPlay"
-          type="circle"
-          class="player__btn m--skeleton"
-        />
+        <q-skeleton v-if="loaderPlay" type="circle" class="player__btn m--skeleton" />
         <template v-else>
-          <button
-            v-if="currentPlay.isPlay"
-            @click="handlerPause"
-            class="button player__btn m--pause"
-          ></button>
-          <button
-            v-else
-            @click="handlerPlay"
-            class="button player__btn m--play"
-          ></button>
+          <button v-if="currentPlay.isPlay" @click="handlerPause" class="button player__btn m--pause"></button>
+          <button v-else @click="handlerPlay" class="button player__btn m--play"></button>
         </template>
         <div class="player__executor">
           <q-skeleton v-if="loaderPlay" class="player__executor m--skeleton" />
@@ -44,12 +28,7 @@
         </div>
         <div @click="handleAuthRequired">
           <q-skeleton v-if="loaderPlay" class="player__favorites m--skeleton" />
-          <div
-            v-else
-            class="player__favorites"
-            :class="[isFavorites && 'm--active']"
-            @click="handlerFavorites"
-          ></div>
+          <div v-else class="player__favorites" :class="[isFavorites && 'm--active']" @click="handlerFavorites"></div>
         </div>
         <div class="player__tools">
           <q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
@@ -67,26 +46,14 @@
             <span
               ref="volumeIcon"
               @click="toggleVolume"
-              :class="
-                songVolume == 0 ? 'player__volume-off' : 'player__volume-on'
-              "
-            />
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              v-model="songVolume"
-              @input="changeVolume"
+              :class="songVolume == 0 ? 'player__volume-off' : 'player__volume-on'"
             />
+            <input type="range" min="0" max="1" step="0.01" v-model="songVolume" @input="changeVolume" />
           </div>
         </div>
       </div>
       <div class="player__bottom">
-        <div
-          class="player__time"
-          :class="!loaderPlay && !isUserMusic && 'm--ether'"
-        >
+        <div class="player__time" :class="!loaderPlay && !isUserMusic && 'm--ether'">
           <q-skeleton v-if="loaderPlay" />
           <template v-else-if="isUserMusic">
             {{ getTime(playerInfo.currentTime) }} /
@@ -96,12 +63,7 @@
         </div>
         <div class="player__progress">
           <q-skeleton v-if="loaderPlay" height="5px" />
-          <input
-            v-else
-            :disabled="!isUserMusic"
-            type="range"
-            v-model="playerInfo.progress"
-          />
+          <input v-else :disabled="!isUserMusic" type="range" v-model="playerInfo.progress" />
         </div>
       </div>
     </div>
@@ -196,9 +158,7 @@ export default {
         ...this.userSongList[this.currentPlay.currentIndex || 0],
         live: false,
       });
-      this.getAudio(
-        this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id,
-      );
+      this.getAudio(this.userSongList[this.currentPlay.currentIndex || 0]?.azura_id);
       if (this.player.target) {
         this.player.target.addEventListener('timeupdate', this.updateProgress);
       }
@@ -284,16 +244,12 @@ export default {
     updateProgress(e) {
       this.playerInfo = {
         ...this.playerInfo,
-        progress:
-          (this.player.target.currentTime / this.player.target.duration) * 100,
+        progress: (this.player.target.currentTime / this.player.target.duration) * 100,
         currentTime: this.player.target.currentTime,
       };
       if (this.player.target.currentTime === this.player.target.duration) {
         let currentIndex = this.currentPlay.currentIndex + 1;
-        if (
-          !this.userSongList[currentIndex]?.azura_id ||
-          currentIndex === null
-        ) {
+        if (!this.userSongList[currentIndex]?.azura_id || currentIndex === null) {
           currentIndex = 0;
         }
         this.$store.dispatch('setCurrentPlay', {
@@ -333,9 +289,7 @@ export default {
       if (this.user?.id) {
         const params = {
           ...this.currentPlay,
-          azura_id: Number(this.currentPlay.id)
-            ? this.currentPlay.azura_id
-            : this.currentPlay.id,
+          azura_id: Number(this.currentPlay.id) ? this.currentPlay.azura_id : this.currentPlay.id,
         };
         if (!this.isFavorites) {
           delete params.id;
@@ -395,8 +349,7 @@ export default {
         this.player.target.addEventListener('timeupdate', this.updateProgress);
 
         blob.arrayBuffer().then((buffer) => {
-          var audioContext = new (window.AudioContext ||
-            window.webkitAudioContext)();
+          var audioContext = new (window.AudioContext || window.webkitAudioContext)();
           audioContext.decodeAudioData(buffer, (decodedData) => {
             this.playerInfo.duration = decodedData.duration;
           });

client/src/components/rubric-block.vue

@@ -2,18 +2,13 @@
   <div class="rubric-block">
     <div class="rubric-block__header">
       <h2 class="h2 rubric-block__header-title">Рубрики</h2>
-      <button
-        class="button m--arrow rubric-block__link"
-        v-if="$route.name !== 'rubric'"
-        @click="next('rubric')"
-      >
+      <button class="button m--arrow rubric-block__link" v-if="$route.name !== 'rubric'" @click="next('rubric')">
         Смотреть все
       </button>
       <div class="p rubric-block__description">
-        IT-радио - это уникальная платформа для обмена опытом, знаниями и
-        обсуждения актуальных вопросов, связанных с разработкой программного
-        обеспечения, искусственного интеллекта, интернета вещей и других
-        направлений IT-индустрии
+        IT-радио - это уникальная платформа для обмена опытом, знаниями и обсуждения актуальных вопросов, связанных с
+        разработкой программного обеспечения, искусственного интеллекта, интернета вещей и других направлений
+        IT-индустрии
       </div>
     </div>
     <template v-if="showLoader">
@@ -23,27 +18,14 @@
       </div>
     </template>
     <div v-else class="rubric-block__list">
-      <div
-        class="rubric-block__item"
-        v-for="rubrik in rubriks"
-        :key="`rubrik_${rubrik.id}`"
-      >
+      <div class="rubric-block__item" v-for="rubrik in rubriks" :key="`rubrik_${rubrik.id}`">
         <div class="title rubric-block__title">{{ rubrik.name }}</div>
         <div class="p rubric-block__description m--50">{{ rubrik.title }}</div>
-        <button
-          class="button m--arrow rubric-block__btn"
-          @click="showModalRubric(rubrik.id)"
-        >
-          Узнать больше
-        </button>
+        <button class="button m--arrow rubric-block__btn" @click="showModalRubric(rubrik.id)">Узнать больше</button>
       </div>
     </div>
   </div>
-  <RubricModal
-    :showModal="isShowModalRubric"
-    @hideModal="hiddenModalRubric"
-    :selectRubric="ModalTemplate"
-  />
+  <RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :selectRubric="ModalTemplate" />
 </template>
 
 <script>

client/src/components/song-item.vue

@@ -1,67 +1,32 @@
 <template>
-  <div
-    class="song-item"
-    :class="[selectSong && 'm--select']"
-    @click="handlerSelectSong"
-  >
+  <div class="song-item" :class="[selectSong && 'm--select']" @click="handlerSelectSong">
     <div class="song-item__selected" :class="[!isPlay && 'm--stop']">
-      <svg
-        width="33"
-        height="28"
-        viewBox="0 0 33 28"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           class=""
           d="M0 15C0 13.6193 1.11929 12.5 2.5 12.5C3.88071 12.5 5 13.6193 5 15V27.5H0V15Z"
           fill="#7138F4"
         />
-        <path
-          d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z"
-          fill="#7138F4"
-        />
-        <path
-          d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z"
-          fill="#7138F4"
-        />
-        <path
-          d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z"
-          fill="#7138F4"
-        />
-        <path
-          d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z"
-          fill="#7138F4"
-        />
+        <path d="M7 9C7 7.61929 8.11929 6.5 9.5 6.5C10.8807 6.5 12 7.61929 12 9V27.5H7V9Z" fill="#7138F4" />
+        <path d="M14 12C14 10.6193 15.1193 9.5 16.5 9.5C17.8807 9.5 19 10.6193 19 12V27.5H14V12Z" fill="#7138F4" />
+        <path d="M21 3C21 1.61929 22.1193 0.5 23.5 0.5C24.8807 0.5 26 1.61929 26 3V27.5H21V3Z" fill="#7138F4" />
+        <path d="M28 20C28 18.6193 29.1193 17.5 30.5 17.5C31.8807 17.5 33 18.6193 33 20V27.5H28V20Z" fill="#7138F4" />
       </svg>
     </div>
     <div>
-      <button
-        v-if="isPlay"
-        @click.stop="handlerPause"
-        class="button song-item__btn m--pause"
-      ></button>
-      <button
-        v-else
-        @click.stop="handlerPlay"
-        class="button song-item__btn m--play"
-      ></button>
+      <button v-if="isPlay" @click.stop="handlerPause" class="button song-item__btn m--pause"></button>
+      <button v-else @click.stop="handlerPlay" class="button song-item__btn m--play"></button>
     </div>
     <div class="song-item__info">
       <span>{{ song.title }}</span>
       {{ song.artist }}
     </div>
     <div class="song-item__tools">
-      <button
-        class="button song-item__btn m--small m--favorites"
-        @click.stop="removeSong"
-      ></button>
+      <button class="button song-item__btn m--small m--favorites" @click.stop="removeSong"></button>
       <button
         class="button song-item__btn m--small m--add"
         :class="songAlreadyAddPlaylist && 'm--already'"
-        @click.stop="
-          songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()
-        "
+        @click.stop="songAlreadyAddPlaylist ? removeToPlaylist() : addPlaylist()"
       ></button>
     </div>
   </div>

client/src/components/song-list.vue

@@ -4,9 +4,7 @@
       v-for="song in songList"
       :key="song"
       :song="song"
-      :playSong="
-        song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false
-      "
+      :playSong="song.azura_id === currentPlay.azura_id ? currentPlay.isPlay : false"
       :selectSong="song.azura_id === currentPlay.azura_id"
       :songAlreadyAddPlaylist="songAlreadyAdd"
       @selectSong="handlerSelectSong"
@@ -46,9 +44,7 @@ export default {
   methods: {
     handlerSelectSong(params) {
       const data = { ...this.currentPlay, ...params, isLoader: true };
-      data.currentIndex = this.songList.findIndex(
-        (el) => el.azura_id === params.azura_id,
-      );
+      data.currentIndex = this.songList.findIndex((el) => el.azura_id === params.azura_id);
       this.$store.dispatch('setCurrentPlay', data);
       console.log('handlerSelectSong');
     },

client/src/components/support-block.vue

@@ -4,19 +4,17 @@
     <div class="support-block__list">
       <div class="support-block__item m--one-circle">
         <div class="title">Донат</div>
-        Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут
-        на дальнейшее развитие проекта
+        Мы будем рады, если вы поддержите нас любой суммой! Все средства пойдут на дальнейшее развитие проекта
       </div>
       <div class="support-block__item m--two-circle">
         <div class="title">Дело</div>
-        Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь
-        продвижением или делаете еще что-нибудь классное и думаете, что можете
-        быть нам полезны на волонтерских началах — свяжитесь с нами через форму
+        Если вы фотографируете, монтируете, пишете, корректируете, занимаетесь продвижением или делаете еще что-нибудь
+        классное и думаете, что можете быть нам полезны на волонтерских началах — свяжитесь с нами через форму
       </div>
       <div class="support-block__item m--three-circle">
         <div class="title">Развитие</div>
-        Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим
-        постом, видео в ютубе или рассказать о нас в своей аудитории
+        Расскажите о нашем проекте в соцсетях! Можно поделиться любым нашим постом, видео в ютубе или рассказать о нас в
+        своей аудитории
       </div>
     </div>
   </div>

client/src/components/team.vue

@@ -3,9 +3,8 @@
     <div class="team__header">
       <h2 class="h2 team__title">Наша команда</h2>
       <div class="team__description">
-        На IT волне команда профессионалов неутомимо трудится, чтобы дарить
-        слушателям самые свежие и актуальные новости из мира технологий,
-        отвечать на их вопросы и обсуждать горячие темы на IT радио.
+        На IT волне команда профессионалов неутомимо трудится, чтобы дарить слушателям самые свежие и актуальные новости
+        из мира технологий, отвечать на их вопросы и обсуждать горячие темы на IT радио.
       </div>
     </div>
     <template v-if="showLoader">
@@ -43,11 +42,7 @@
       }"
       class="team__slider"
     >
-      <SwiperSlide
-        class="team__item"
-        v-for="employee in team"
-        :key="employee.id"
-      >
+      <SwiperSlide class="team__item" v-for="employee in team" :key="employee.id">
         <div class="team__cover">
           <img :src="`${selfUrl + employee.img_person}`" alt="user" />
         </div>
@@ -61,9 +56,7 @@
       <div class="team__progress" ref="progressBar">
         <span></span>
       </div>
-      <router-link :to="{ name: 'about' }" class="m--link">
-        Больше о нас
-      </router-link>
+      <router-link :to="{ name: 'about' }" class="m--link"> Больше о нас </router-link>
     </div>
   </div>
 </template>

client/src/router/index.js

@@ -1,11 +1,6 @@
 import { route } from 'quasar/wrappers';
 import store from '@/store';
-import {
-  createRouter,
-  createMemoryHistory,
-  createWebHistory,
-  createWebHashHistory,
-} from 'vue-router';
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
 import routes from './routes';
 
 /*
@@ -43,9 +38,7 @@ export default route(function (/* { store, ssrContext } */) {
     // Leave this as is and make changes in quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode
     // quasar.conf.js -> build -> publicPath
-    history: createHistory(
-      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE,
-    ),
+    history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
   });
 
   Router.beforeEach((to, from, next) => {

client/src/services/app.js

@@ -1,12 +1,9 @@
 import { urlPath as settings } from '@/settings';
 import { REST, RESTError } from './rest';
 
-// запросы на сервер Django
 // console.log(settings);
 
 export default class extends REST {
-  // export default class Django extends REST {
-
   static get settings() {
     return settings;
   }
@@ -233,10 +230,7 @@ export default class extends REST {
         return data;
       })
       .catch((error) => {
-        throw new RESTError(
-          error,
-          'Ошибка при получении информации о текущем треке',
-        );
+        throw new RESTError(error, 'Ошибка при получении информации о текущем треке');
       });
   }
 

client/src/services/audio.js

@@ -21,9 +21,7 @@ export default class extends REST {
       }),
     });
     // console.log('sseUriParams', sseUriParams.toString());
-    this.connection = new EventSource(
-      sseBaseUri + '?' + sseUriParams.toString(),
-    );
+    this.connection = new EventSource(sseBaseUri + '?' + sseUriParams.toString());
     // window.connection = this.connection;
     // this.connection.onopen = (e) => console.log('connected', e);
   }

client/src/services/rest.js

@@ -8,8 +8,7 @@ class RESTError extends Error {
     let detail =
       error.response &&
       error.response.data &&
-      (error.response.data.detail ||
-        (error.response.data.error && error.response.data.error.detail));
+      (error.response.data.detail || (error.response.data.error && error.response.data.error.detail));
     let header = (message || error.message) + (detail ? ': ' + detail : '');
     super(header);
 
@@ -39,23 +38,8 @@ class REST {
   static get settings() {
     throw new Error('settings must be overridden');
   }
-  static _get(
-    url,
-    params = {},
-    extraParams,
-    use_cache = false,
-    isBlob = false,
-  ) {
-    return this._request(
-      'get',
-      url,
-      params,
-      {},
-      {},
-      extraParams,
-      use_cache,
-      isBlob,
-    );
+  static _get(url, params = {}, extraParams, use_cache = false, isBlob = false) {
+    return this._request('get', url, params, {}, {}, extraParams, use_cache, isBlob);
   }
   static _post(url, params, data) {
     return this._request('post', url, params, data);

client/src/utils/ajax.js

@@ -24,10 +24,7 @@ export default class {
       delete params.extraData;
     }
     if (params.extraParams) {
-      params.params = this.__append_extra_params(
-        params.params,
-        params.extraParams,
-      );
+      params.params = this.__append_extra_params(params.params, params.extraParams);
       delete params.extraParams;
     }
     /*

client/src/views/Page404.vue

@@ -5,23 +5,16 @@
         <div class="page404__block">
           <div class="page404__info">
             <div class="page404__info-title">404</div>
-            <div class="page404__info-subtitle">
-              Мы не можем найти то, что вы ищете
-            </div>
+            <div class="page404__info-subtitle">Мы не можем найти то, что вы ищете</div>
             <div class="page404__info-content">
-              Возможно, запрашиваемая вами страница была перенесена или удалена.
-              Также возможно, что вы допустили небольшую опечатку при вводе
-              адреса — такое случается даже с нами, поэтому еще раз внимательно
-              проверьте.
+              Возможно, запрашиваемая вами страница была перенесена или удалена. Также возможно, что вы допустили
+              небольшую опечатку при вводе адреса — такое случается даже с нами, поэтому еще раз внимательно проверьте.
             </div>
             <div class="page404__info-bottom">
-              Переходите на главную страницу, там вы сможете найти много
-              полезной информации!
+              Переходите на главную страницу, там вы сможете найти много полезной информации!
             </div>
             <div class="page404__info-button">
-              <button class="button button-blue" @click="next()">
-                На главную
-              </button>
+              <button class="button button-blue" @click="next()">На главную</button>
             </div>
           </div>
         </div>

client/src/views/Page500.vue

@@ -6,17 +6,12 @@
           <div class="page500__info">
             <div class="page500__info-title">Упс!</div>
             <div class="page500__info-subtitle">Что то пошло не так!</div>
-            <div class="page500__info-content">
-              Мы уже знаем об этом и делаем все возможное!
-            </div>
+            <div class="page500__info-content">Мы уже знаем об этом и делаем все возможное!</div>
             <div class="page500__info-bottom">
-              Переходите на главную страницу, там вы сможете найти много
-              полезной информации!
+              Переходите на главную страницу, там вы сможете найти много полезной информации!
             </div>
             <div class="page500__info-button">
-              <button class="button button-blue" @click="next()">
-                На главную
-              </button>
+              <button class="button button-blue" @click="next()">На главную</button>
             </div>
           </div>
         </div>

client/src/views/about.vue

@@ -13,26 +13,22 @@
           <div class="about__header-left">
             <h1 class="h2">О нас</h1>
             <div class="text about__header-description">
-              IT-радио — это не просто обычная радиостанция, мы ваши партнеры в
-              творчестве и современных технологиях.
+              IT-радио — это не просто обычная радиостанция, мы ваши партнеры в творчестве и современных технологиях.
             </div>
           </div>
           <div class="about__header-right"></div>
         </div>
         <div class="text about__header-bottom">
-          Наша миссия — воплотить ваши мечты в реальность, шаг за шагом.
-          Благодаря разнообразной команде ведущих, журналистов, разработчиков и
-          новаторов, мы постоянно расширяем границы возможного в цифровом мире.
+          Наша миссия — воплотить ваши мечты в реальность, шаг за шагом. Благодаря разнообразной команде ведущих,
+          журналистов, разработчиков и новаторов, мы постоянно расширяем границы возможного в цифровом мире.
         </div>
       </div>
       <div class="about__description">
         <h2 class="h2">Мы здесь, чтобы открыть глаза на мир IT</h2>
         <div class="about__description-info">
           <div class="text about__description-item m--left">
-            IT-радио — это уникальный проект, который объединяет в себе самых
-            ярких представителей IT-индустрии, а также экспертов из различных
-            областей, чтобы поделиться своими знаниями и опытом с широкой
-            аудиторией.
+            IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а также
+            экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой аудиторией.
           </div>
           <div class="text about__description-item">
             Мы — команда, которая верит в силу теплой улыбки и дружеской беседы.
@@ -45,14 +41,13 @@
       <div class="about__description">
         <div class="about__description-info">
           <div class="text about__description-item m--left">
-            Основанное с целью переосмыслить радио через призму современного и
-            инновационного подхода, мы стали больше, чем просто радиостанцией,
-            мы сообщество родственных душ, которые разделяют страсть к
-            артистизму, развитию и инновациям.
+            Основанное с целью переосмыслить радио через призму современного и инновационного подхода, мы стали больше,
+            чем просто радиостанцией, мы сообщество родственных душ, которые разделяют страсть к артистизму, развитию и
+            инновациям.
           </div>
           <div class="text about__description-item">
-            Каждое шоу на IT-радио включает в себя актуальные темы, новости,
-            обзоры, интервью с экспертами и многое другое.
+            Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое
+            другое.
           </div>
         </div>
       </div>
@@ -71,27 +66,19 @@
         </div>
         <div class="about__history-list">
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 1
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 1</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 2
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 2</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 3
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 3</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
           <div class="about__history-item">
-            <div class="title m--white about__history-title">
-              Событие кратко 4
-            </div>
+            <div class="title m--white about__history-title">Событие кратко 4</div>
             <div class="about__history-date">Ноябрь 2023</div>
           </div>
         </div>

client/src/views/contacts.vue

@@ -10,30 +10,20 @@
     <div class="contacts__content">
       <div v-if="contacts" class="contacts__info">
         <div v-for="(item, index) in contactsField" :key="index">
-          <div
-            v-if="item.title !== dictionaryFields.socials"
-            class="text contacts__item"
-          >
+          <div v-if="item.title !== dictionaryFields.socials" class="text contacts__item">
             <span class="title">{{ item.title }}</span>
             {{ item.data }}
           </div>
           <div v-else class="contacts__socials">
             <span class="title">{{ item.title }}</span>
-            <div
-              v-for="(href, social) in item.data"
-              :key="social"
-              class="contacts__social"
-            >
+            <div v-for="(href, social) in item.data" :key="social" class="contacts__social">
               <a :href="href" :class="['contacts__social', social]"></a>
             </div>
           </div>
         </div>
       </div>
       <div class="contacts__map">
-        <div
-          class="contacts__map-frame"
-          style="position: relative; overflow: hidden"
-        >
+        <div class="contacts__map-frame" style="position: relative; overflow: hidden">
           <a
             href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
             style="color: #eee; font-size: 12px; position: absolute; top: 0px"

client/src/views/home.vue

@@ -5,8 +5,7 @@
         <p class="text home__subtitle">
           Мы цифровое <span>онлайн радио.</span><br />
           Помогаем разобраться в том, что такое <span>IT.</span><br />
-          Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span
-          ><br />
+          Находимся в <span>Челябинске</span>, но вещаем на весь <span>Мир</span><br />
         </p>
         <h1 class="home__title" ref="targetTitle">
           IT-Радио —
@@ -30,31 +29,27 @@
             <div class="text home__info--item">
               IT-RADIO. 2023
               <span>
-                Сегодня IT-сфера развивается настолько быстро, что следить за
-                всеми новинками и изменениями в ней становится все сложнее.<br /><br />
-                Но есть способ всегда быть в курсе последних новостей и событий
-                — это IT-радио.
+                Сегодня IT-сфера развивается настолько быстро, что следить за всеми новинками и изменениями в ней
+                становится все сложнее.<br /><br />
+                Но есть способ всегда быть в курсе последних новостей и событий — это IT-радио.
               </span>
             </div>
-            <h2 class="h2 m--border">
-              Открывая новые горизонты в мире технологий
-            </h2>
+            <h2 class="h2 m--border">Открывая новые горизонты в мире технологий</h2>
             <div class="text home__info--item m--circle">
               <span>
-                IT-радио — это уникальный проект, который объединяет в себе
-                самых ярких представителей IT-индустрии, а также экспертов из
-                различных областей, чтобы поделиться своими знаниями и опытом с
-                широкой аудиторией.<br /><br />
-                Каждое шоу на IT-радио включает в себя актуальные темы, новости,
-                обзоры, интервью с экспертами и многое другое.
+                IT-радио — это уникальный проект, который объединяет в себе самых ярких представителей IT-индустрии, а
+                также экспертов из различных областей, чтобы поделиться своими знаниями и опытом с широкой
+                аудиторией.<br /><br />
+                Каждое шоу на IT-радио включает в себя актуальные темы, новости, обзоры, интервью с экспертами и многое
+                другое.
               </span>
             </div>
           </div>
           <div class="home__content">
             <div class="home__content--item m--one-circle">
               <span class="title">Музыка</span>
-              Нам важно создать комфортную атмосферу, которая поможет
-              сосредоточиться на задачах и улучшит продуктивность.
+              Нам важно создать комфортную атмосферу, которая поможет сосредоточиться на задачах и улучшит
+              продуктивность.
             </div>
             <div class="home__content--item m--two-circle">
               <span class="title">Подкасты</span>
@@ -76,9 +71,8 @@
           <div class="home__social--description">
             <h2 class="h2 m--white">Соц сети</h2>
             <div class="text">
-              Следите за обновлениями и новыми постами на IT Radio, чтобы быть в
-              курсе последних новостей и событий в мире IT, а также следить за
-              анонсами и обновлениями!
+              Следите за обновлениями и новыми постами на IT Radio, чтобы быть в курсе последних новостей и событий в
+              мире IT, а также следить за анонсами и обновлениями!
             </div>
           </div>
           <div class="home__social--btns">
@@ -125,8 +119,7 @@ export default {
       });
       gsap.to(this.$refs.targetTitle, {
         color: 'transparent',
-        backgroundImage:
-          'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
+        backgroundImage: 'linear-gradient(91.17deg, #C6F1F7 -4.01%, #F983E9 36.14%, #B877FF 77.44%, #C2E9CD 106.11%)',
         scrollTrigger: {
           trigger: this.$refs.targetWrapper,
           scrub: true,

client/src/views/playlist-edit.vue

@@ -15,18 +15,9 @@
     <h1 class="h2 playlist__title m--margin">
       {{ $route.name === 'playlist-create' ? 'Новый плейлист' : playlist.name }}
     </h1>
-    <button class="playlist-edit__upload" @click="handlerUploadCover">
-      Добавить обложку
-    </button>
+    <button class="playlist-edit__upload" @click="handlerUploadCover">Добавить обложку</button>
     <div class="field__input m--hidden">
-      <input
-        id="cover"
-        ref="coverInput"
-        accept=".jpg,.png,.svg"
-        class="input"
-        type="file"
-        name="logo"
-      />
+      <input id="cover" ref="coverInput" accept=".jpg,.png,.svg" class="input" type="file" name="logo" />
     </div>
     <FormKit
       v-model="playlist.name"
@@ -96,9 +87,7 @@ export default {
   computed: {
     songsFiltered() {
       return this.songs.filter((song) => {
-        const alreadyAdd = this.playlist.song.find(
-          (item) => item.azura_id === song.azura_id,
-        );
+        const alreadyAdd = this.playlist.song.find((item) => item.azura_id === song.azura_id);
         return !alreadyAdd;
       });
     },

client/src/views/playlist.vue

@@ -10,12 +10,7 @@
       <div class="playlist__header">
         <div class="playlist__back" @click="handlerBack"></div>
         <div class="h2 playlist__title">{{ playlist.name }}</div>
-        <div
-          class="playlist__edit"
-          @click="
-            next({ name: 'playlist-edit', params: { id: this.playlist.id } })
-          "
-        ></div>
+        <div class="playlist__edit" @click="next({ name: 'playlist-edit', params: { id: this.playlist.id } })"></div>
       </div>
       <SongList :songList="playlist.song" :songAlreadyAdd="true" />
     </template>

client/src/views/profile.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="app__content profile">
-    <template
-      v-if="
-        $route.name !== 'playlist-edit' && $route.name !== 'playlist-create'
-      "
-    >
+    <template v-if="$route.name !== 'playlist-edit' && $route.name !== 'playlist-create'">
       <AppBreadcrumbs
         :breadcrumbs="[
           { name: 'Главная', route: { name: 'home' } },
@@ -12,9 +8,7 @@
         ]"
       />
       <h1 class="h2 profile__title">{{ user.email }}</h1>
-      <button class="button m--text-link" @click="showRecovery">
-        Редактировать профиль
-      </button>
+      <button class="button m--text-link" @click="showRecovery">Редактировать профиль</button>
       <div class="profile__tabs tabs m--btns">
         <button
           v-for="item in tabsItems"
@@ -35,11 +29,7 @@
             Загрузка данных
           </div>
         </template>
-        <SongList
-          v-else
-          :songList="userFavorite.songs"
-          @removeSong="removeFavorites"
-        />
+        <SongList v-else :songList="userFavorite.songs" @removeSong="removeFavorites" />
       </template>
       <template v-if="currentTabsItem === 'playlists'">
         <template v-if="showLoaderPlaylist">
@@ -48,11 +38,7 @@
             Загрузка данных
           </div>
         </template>
-        <PlaylistRoster
-          v-else
-          :list="userFavorite.playlist"
-          @createPlaylist="createPlayList"
-        />
+        <PlaylistRoster v-else :list="userFavorite.playlist" @createPlaylist="createPlayList" />
       </template>
     </template>
     <routerView v-else />
@@ -106,10 +92,7 @@ export default {
           console.log('1');
           this.currentTabsItem = to?.hash.replace('#', '') || 'music';
         }
-        if (
-          (to?.hash !== from?.hash && to?.name === from?.name) ||
-          (!from?.name && !from?.hash)
-        ) {
+        if ((to?.hash !== from?.hash && to?.name === from?.name) || (!from?.name && !from?.hash)) {
           console.log('2');
           if (to.hash) {
             this.currentTabsItem = to?.hash.replace('#', '') || 'music';