🐛 new solution for frontend environment variables

client/components/SearchAutoComplete.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="visible && searchValue"
-    class="search-autocomplete"
-  >
+  <div v-if="visible && searchValue" class="search-autocomplete">
     <div
       v-for="(value, key) in autocompleteValues"
       :key="key"
@@ -35,15 +32,13 @@ export default {
   }),
   watch: {
     searchValue() {
-      Axios.get(`${Commons.getOwnApiUrl()}autocomplete`, {
+      Axios.get(`${this.$store.getters['environment/apiUrl']}autocomplete`, {
         params: {
           q: this.searchValue
         }
       })
         .then(response => {
-          this.autocompleteValues = [
-            this.searchValue
-          ].concat(response.data);
+          this.autocompleteValues = [this.searchValue].concat(response.data);
         })
         .catch(error => {
           console.error(error);
@@ -52,16 +47,11 @@ export default {
   },
   methods: {
     onAutocompleteMouseDown(e) {
-      this.$emit(
-        'searchValueUpdate',
-        e.target.getAttribute('value')
-      );
+      this.$emit('searchValueUpdate', e.target.getAttribute('value'));
       this.$emit('autocompleteEnter');
     },
     onMouseOver(e) {
-      this.selectedValue = parseInt(
-        e.target.getAttribute('number')
-      );
+      this.selectedValue = parseInt(e.target.getAttribute('number'));
     }
   }
 };
@@ -74,12 +64,7 @@ export default {
 }
 .clip-enter-to,
 .clip-leave {
-  clip-path: polygon(
-    -50% -50%,
-    150% -50%,
-    150% 150%,
-    -50% 150%
-  );
+  clip-path: polygon(-50% -50%, 150% -50%, 150% 150%, -50% 150%);
 }
 .clip-enter,
 .clip-leave-to {

client/components/buttons/SubscribeButton.vue

@@ -1,20 +1,9 @@
 <template>
-  <div
-    class="subscribe-button-container"
-    :class="{ disabled: disabled }"
-  >
-    <div
-      class="mini-btn"
-      v-if="small"
-      :class="{ expanded }"
-      @click="expanded = !expanded"
-    >
+  <div class="subscribe-button-container" :class="{ disabled: disabled }">
+    <div class="mini-btn" v-if="small" :class="{ expanded }" @click="expanded = !expanded">
       <span class="minus" />
     </div>
-    <div
-      class="clip-container"
-      :class="{ expanded, small }"
-    >
+    <div class="clip-container" :class="{ expanded, small }">
       <div
         v-tippy="'Unsubscribe from this channel'"
         class="unsubscribe-button"
@@ -65,14 +54,9 @@ export default {
       if (this.channelId) {
         const me = this;
         this.$axios
-          .get(
-            `${Commons.getOwnApiUrl()}user/subscriptions/${
-              this.channelId
-            }`,
-            {
-              withCredentials: true
-            }
-          )
+          .get(`${this.$store.getters['environment/apiUrl']}user/subscriptions/${this.channelId}`, {
+            withCredentials: true
+          })
           .then(response => {
             if (response.data.isSubscribed) {
               me.isSubscribed = true;
@@ -93,9 +77,7 @@ export default {
         this.disabled = true;
         this.$axios
           .put(
-            `${Commons.getOwnApiUrl()}user/subscriptions/${
-              this.channelId
-            }`,
+            `${this.$store.getters['environment/apiUrl']}user/subscriptions/${this.channelId}`,
             {},
             {
               withCredentials: true
@@ -121,9 +103,7 @@ export default {
         this.disabled = true;
         this.$axios
           .delete(
-            `${Commons.getOwnApiUrl()}user/subscriptions/${
-              this.channelId
-            }`,
+            `${this.$store.getters['environment/apiUrl']}user/subscriptions/${this.channelId}`,
             {
               withCredentials: true
             }
@@ -168,8 +148,7 @@ export default {
     cursor: pointer;
     user-select: none;
     opacity: 0.8;
-    transition: transform 300ms $overshoot-easing,
-      background-color 300ms $intro-easing;
+    transition: transform 300ms $overshoot-easing, background-color 300ms $intro-easing;
     border: solid 2px transparent;
     box-sizing: border-box;
 
@@ -226,8 +205,7 @@ export default {
       cursor: pointer;
       line-height: 12px;
       opacity: 1;
-      transition: opacity 300ms $intro-easing,
-        transform 300ms $intro-easing;
+      transition: opacity 300ms $intro-easing, transform 300ms $intro-easing;
 
       &:focus {
         transform: scale(0.9);

client/components/message/MessageBox.vue

@@ -1,32 +1,34 @@
 <template>
   <div
-    class="message-box"
     ref="interactElement"
-    @click="onMessageClick"
+    class="message-box"
     :class="{
       'dismissed-right': dismissedRight,
       'dismissed-left': dismissedLeft,
       'is-animating': isInteractAnimating
     }"
     :style="{
       transform: transformString,
-      opacity: swipeOpacity
+      opacity: swipeOpacity,
+      cursor: message.clickAction ? 'pointer' : 'auto'
     }"
+    @click="onMessageClick"
   >
+    <span class="progress-line" />
     <div
-      class="close"
-      @click="dismissMessage"
       v-ripple
+      class="close"
       :style="{
         transition: `transform ${dismissTimeout}ms linear`
       }"
+      @click="dismissMessage"
     >
       <CloseIcon />
     </div>
     <h3 class="title" :class="message.type">
       {{ message.title }}
     </h3>
-    <p class="message" v-html="message.message"></p>
+    <p class="message" v-html="message.message" />
   </div>
 </template>
 
@@ -35,7 +37,15 @@ import CloseIcon from 'vue-material-design-icons/Close';
 // import Interact from 'interactjs'
 
 export default {
-  name: 'message-box',
+  name: 'MessageBox',
+  components: {
+    CloseIcon
+  },
+  props: {
+    message: {
+      type: Object
+    }
+  },
   data: () => ({
     dismissedRight: false,
     dismissedLeft: false,
@@ -48,17 +58,18 @@ export default {
     interactXThreshold: 100,
     swipeOpacity: 1
   }),
-  props: {
-    message: {
-      type: Object
+  computed: {
+    transformString() {
+      if (!this.isInteractAnimating) {
+        const { x, y } = this.interactPosition;
+        return `translate3D(${x}px, ${y}px, 0)`;
+      }
+      return null;
     }
   },
   mounted() {
     if (this.message.dismissDelay > 0) {
-      this.dismissTimeout = setTimeout(
-        this.dismissMessage,
-        this.message.dismissDelay
-      );
+      this.dismissTimeout = setTimeout(this.dismissMessage, this.message.dismissDelay);
     }
     // const element = this.$refs.interactElement
     // Interact(element).draggable({
@@ -85,18 +96,6 @@ export default {
     //   }
     // })
   },
-  components: {
-    CloseIcon
-  },
-  computed: {
-    transformString() {
-      if (!this.isInteractAnimating) {
-        const { x, y } = this.interactPosition;
-        return `translate3D(${x}px, ${y}px, 0)`;
-      }
-      return null;
-    }
-  },
   methods: {
     dismissMessage() {
       this.dismissedRight = true;
@@ -112,6 +111,10 @@ export default {
       if (this.dismissTimeout) {
         clearTimeout(this.dismissTimeout);
       }
+      if (this.message.clickAction) {
+        this.message.clickAction();
+        this.dismissMessage();
+      }
     },
     interactSetPosition(coordinates, distance) {
       const { x = 0, y = 0 } = coordinates;
@@ -136,15 +139,15 @@ export default {
   border-radius: 3px;
   box-shadow: $max-shadow;
   animation: blob-in-notif 300ms $intro-easing;
-  user-select: none;
+  overflow: hidden;
 
   &.is-animating {
     transition: transform 300ms, opacity 600ms;
   }
 
   &.dismissed-right {
-    transition: transform 300ms, font-size 300ms 300ms,
-      margin 300ms 300ms, padding 300ms 300ms, opacity 300ms !important;
+    transition: transform 300ms, font-size 300ms 300ms, margin 300ms 300ms, padding 300ms 300ms,
+      opacity 300ms !important;
     transition-timing-function: $dynamic-easing;
     transform: translateX(140%);
     margin: 0;
@@ -153,8 +156,8 @@ export default {
   }
 
   &.dismissed-left {
-    transition: transform 300ms, font-size 300ms 300ms,
-      margin 300ms 300ms, padding 300ms 300ms, opacity 300ms !important;
+    transition: transform 300ms, font-size 300ms 300ms, margin 300ms 300ms, padding 300ms 300ms,
+      opacity 300ms !important;
     transition-timing-function: $dynamic-easing;
     transform: translateX(-140%);
     margin: 0;
@@ -176,6 +179,15 @@ export default {
     }
   }
 
+  .progress-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--theme-color);
+  }
+
   .close {
     height: 22px;
     width: 22px;

client/components/popup/SubscriptionImport.vue

@@ -154,7 +154,7 @@ export default {
       const subscriptionIds = subscriptions.map(e => e.authorId);
       this.$axios
         .post(
-          `${Commons.getOwnApiUrl()}user/subscriptions/multiple`,
+          `${this.$store.getters['environment/apiUrl']}user/subscriptions/multiple`,
           {
             channels: subscriptionIds
           },

client/components/videoplayer/VideoEndscreen.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="video-endscreen"
-    v-if="videoElement"
-    :class="{ 'card-hover': hover }"
-  >
+  <div class="video-endscreen" v-if="videoElement" :class="{ 'card-hover': hover }">
     <EndscreenCard
       v-for="(card, index) in endscreenData"
       :key="index"
@@ -37,9 +33,7 @@ export default {
   }),
   mounted() {
     fetch(
-      `${Commons.getOwnApiUrl()}video/getEndscreen.php?videoId=${
-        this.videoId
-      }`,
+      `${this.$store.getters['environment/apiUrl']}video/getEndscreen.php?videoId=${this.videoId}`,
       {
         cache: 'force-cache',
         method: 'GET'

client/layouts/default.vue

@@ -13,7 +13,7 @@
       :style="{
         transform: `translate3d(0,${reloadElDistance}px,0)`
       }"
-    ></span>
+    />
     <ThemeStyling />
     <Header v-if="!headless" class="main-header" />
     <Miniplayer v-if="$store.getters.miniplayer" />

client/layouts/error.vue

@@ -24,26 +24,28 @@
 
 <script>
 export default {
-  name: 'error-page',
+  name: 'ErrorPage',
   props: {
     error: Object
   },
-  methods: {
-    retry() {
-      window.location.reload();
-    }
+  data() {
+    return {
+      possibleSearch: null,
+      apiUrl: this.$store.getters['environment/apiUrl']
+    };
   },
-  data: () => ({
-    possibleSearch: null,
-    apiUrl: process.env.apiUrl
-  }),
   mounted() {
     if (this.error.statusCode === 404) {
       const path = this.$route.path;
       this.possibleSearch = path.replace('/', '');
     }
   },
-  beforeCreate() {}
+  beforeCreate() {},
+  methods: {
+    retry() {
+      window.location.reload();
+    }
+  }
 };
 </script>