Add radio

README.md

@@ -9,6 +9,7 @@
 You can:
 
 - listen to tracks/artists/whole albums
+- listen to tag/artist radio
 - scrobble tracks
 - watch videos
 - view tracks' lyrics

src/assets/styles/Main.sass

@@ -107,11 +107,6 @@ a
     &:hover
       color: $colorBase
 
-.ui.scrolling.dropdown
-  &.main-dropdown
-    .menu
-      width: 101% !important
-
 .main-button
   @extend .no-padding, .no-shadow, .no-border-radius, .d-flex, .align-items-center, .justify-content-center
 
@@ -128,6 +123,7 @@ a
 .main-segment
   &.loading
     min-height: 150px
+    z-index: 1
   &.inverted
     &:not(:first-child)
       border-top: $borderInverted
@@ -441,6 +437,10 @@ a
   width: 200px
   margin-right: 1em !important
 
+.main-source-select-track-select
+  width: 250px
+  margin-right: 1em !important
+
 .main-form
   &.inverted
     &.loading
@@ -573,3 +573,6 @@ a
 .main-simple-button
   &.white
     background: white !important
+
+.main-search-input-container
+  width: 220px

src/assets/styles/Shared.sass

@@ -24,7 +24,6 @@ $trackContentMarginWidth: 0.5em
 $mainCheckboxThumbHeight: 1.2em
 $mainCheckboxWidth: 3em
 $trackPagePlayerPanelHeight: 40px
-$trackPageDropdownWidth: 250px
 
 .text-color-initial
   color: initial !important

src/components/BaseButton.vue

@@ -9,14 +9,20 @@
     @click="handleClick"
   >
     <i
-      v-if="icon"
+      v-if="icon && !isReverse"
       class="icon"
       :class="icon"
     />
 
     <span v-if="text">
       {{ text }}
     </span>
+
+    <i
+      v-if="icon && isReverse"
+      class="icon"
+      :class="icon"
+    />
   </div>
 </template>
 
@@ -27,7 +33,8 @@ export default {
   name: 'BaseButton',
   props: {
     icon: String,
-    text: String
+    text: String,
+    isReverse: Boolean
   },
   emits: [
     'init',

src/components/BaseDropdown.vue

@@ -0,0 +1,58 @@
+<template>
+  <BaseDropdownContainer
+    ref="dropdown"
+    @change="handleChange"
+  >
+    <div
+      v-for="optionData in optionsFormatted"
+      class="item"
+      :key="optionData.uuid"
+      :data-value="optionData.id"
+    >
+      {{ optionData.name }}
+    </div>
+  </BaseDropdownContainer>
+</template>
+
+<script>
+import BaseDropdownContainer from '@/containers/BaseDropdownContainer.vue'
+import { collection as formatCollection } from '#/formatters'
+
+export default {
+  name: 'BaseDropdown',
+  components: {
+    BaseDropdownContainer
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    selected: String
+  },
+  computed: {
+    optionsFormatted () {
+      return formatCollection(
+        this.options
+      )
+    }
+  },
+  mounted () {
+    if (this.selected) {
+      this.$refs.dropdown.setValue(
+        this.selected
+      )
+    }
+  },
+  methods: {
+    handleChange (value) {
+      this.$emit(
+        'change',
+        value
+      )
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/BasePlaylistsModal.vue

@@ -97,8 +97,6 @@ export default {
       value && this.fetchData()
     },
     handleRefresh (page) {
-      this.error = null
-
       this.fetchData(page)
     },
     handleFocus () {

src/components/BaseScopesDropdown.vue

@@ -0,0 +1,50 @@
+<template>
+  <BaseDropdown
+    :options="options"
+    :selected="selected"
+    @change="handleChange"
+  />
+</template>
+
+<script>
+import BaseDropdown from '@/BaseDropdown.vue'
+
+export default {
+  name: 'BaseScopesDropdown',
+  components: {
+    BaseDropdown
+  },
+  props: {
+    scopes: {
+      type: Array,
+      required: true
+    },
+    selected: String
+  },
+  computed: {
+    options () {
+      return this.scopes.map(
+        this.formatOption
+      )
+    }
+  },
+  methods: {
+    handleChange (value) {
+      this.$emit(
+        'change',
+        value
+      )
+    },
+    formatOption (scope) {
+      return {
+        id: scope,
+        name: this.$t(
+          `layout.navigation.${scope}`
+        )
+      }
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped></style>

src/components/containers/BaseBookmarksTabContainer.vue

@@ -102,8 +102,6 @@ export default {
       this.$emit('focus')
     },
     handleRefresh (page) {
-      this.error = null
-
       this.fetchData(page)
     },
     fetchBookmarksData,

src/components/containers/BaseDropdownContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="ui dropdown main-dropdown"
     ref="dropdown"
+    class="ui selection dropdown main-dropdown"
     :class="{
       inverted: isDarkMode,
       disabled: isDisabled
@@ -11,26 +11,22 @@
       class="text main-dropdown-item"
       :class="{ inverted: isDarkMode }"
     >
-      <div
+      <BaseHeader
         v-if="header"
-        class="content"
-      >
-        <BaseHeader
-          tag="h5"
-          :text="header"
-        />
-      </div>
+        tag="h5"
+        :text="header"
+      />
     </div>
 
     <BaseIcon
-      v-if="icon"
-      class="main-dropdown-icon main-dropdown-right-icon"
-      :icon="icon"
+      icon="dropdown"
       :isLoading="isLoading"
       :isError="isError"
     />
 
-    <slot></slot>
+    <div class="menu">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -53,25 +49,38 @@ export default {
   },
   props: {
     header: String,
-    icon: String,
     isDisabled: Boolean,
     isLoading: Boolean,
     isError: Boolean
   },
+  emits: [
+    'change'
+  ],
   computed: {
     ...mapState('layout', [
       'isDarkMode'
-    ])
+    ]),
+    dropdownOptions () {
+      return mainDropdownOptions({
+        onChange: this.handleChange
+      })
+    }
   },
   mounted () {
     this.$nextTick(() => {
       setDropdown(
         this.$refs.dropdown,
-        mainDropdownOptions()
+        this.dropdownOptions
       )
     })
   },
   methods: {
+    handleChange (value) {
+      this.$emit(
+        'change',
+        value
+      )
+    },
     setValue (value) {
       this.$nextTick(() => {
         setDropdownValue(

src/components/containers/BaseHeaderContainer.vue

@@ -10,9 +10,7 @@
       :class="icon"
     />
 
-    <div class="content">
-      <slot></slot>
-    </div>
+    <slot></slot>
   </Component >
 </template>
 

src/components/containers/BaseSearchTabContainer.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="tab"
-    class="search-tab-container"
     :class="{
       loading: isActive && isLoading,
       inverted: isDarkMode
@@ -157,8 +156,6 @@ export default {
       this.$refs.tab.scrollTo(0, 0)
     },
     handleRefresh (page) {
-      this.error = null
-
       this.fetchData(page)
     },
     handleLinkClick () {
@@ -176,9 +173,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.search-tab-container
-  z-index: 1
-
 .videos-list-container-wrapper
   @extend .w-100
 

src/components/containers/album/BaseAlbumModalContainer.vue

@@ -59,8 +59,6 @@ export default {
       this.fetchData()
     },
     handleModalRefresh () {
-      this.error = null
-
       this.fetchData()
     },
     handleRequestAlbumDataChange () {

src/components/containers/artist/BaseArtistContainer.vue

@@ -31,8 +31,6 @@ export default {
   },
   methods: {
     handleRefresh () {
-      this.error = null
-
       this.fetchData()
     },
     fetchArtistData,

src/components/containers/artist/BaseArtistModalContainer.vue

@@ -53,8 +53,6 @@ export default {
       this.fetchData()
     },
     handleModalRefresh () {
-      this.error = null
-
       this.fetchData()
     },
     fetchArtistData,

src/components/containers/pages/album/BaseAlbumPageContainer.vue

@@ -112,8 +112,6 @@ export default {
       'setNavigationSections'
     ]),
     handleRefresh (page) {
-      this.error = null
-
       this.fetchData(page)
     },
     handleAlbumDataChange () {

src/components/containers/pages/artist/BaseArtistPageContainer.vue

@@ -126,8 +126,6 @@ export default {
       this.$emit('init', el)
     },
     handleRefresh (page) {
-      this.error = null
-
       this.fetchData(page)
     },
     handleArtistDataChange () {

src/components/containers/pages/artist/BaseArtistSegmentContainer.vue

@@ -68,8 +68,6 @@ export default {
   },
   methods: {
     handleRefresh (page) {
-      this.error = null
-
       this.fetchData(page)
     },
     fetchArtistData,