App.vue 9.35 KB
Newer Older
1
2
<template>
  <div id="app">
3
4
    <!-- here, we display custom stylesheets, if any -->
    <link v-for="url in customStylesheets" rel="stylesheet" property="stylesheet" :href="url" :key="url">
5
6
    <div class="ui main text container instance-chooser" v-if="!$store.state.instance.instanceUrl">
      <div class="ui padded segment">
7
        <h1 class="ui header"><translate>Choose your instance</translate></h1>
8
        <form class="ui form" @submit.prevent="$store.dispatch('instance/setUrl', instanceUrl)">
9
          <p><translate>You need to select an instance in order to continue</translate></p>
10
11
          <div class="ui action input">
            <input type="text" v-model="instanceUrl">
12
            <button type="submit" class="ui button"><translate>Submit</translate></button>
13
          </div>
14
          <p><translate>Suggested choices</translate></p>
15
16
17
          <div class="ui bulleted list">
            <div class="ui item" v-for="url in suggestedInstances">
              <a @click="instanceUrl = url">{{ url }}</a>
18
19
            </div>
          </div>
20
21
22
23
24
25
26
27
28
29
30
31
        </form>
      </div>
    </div>
    <template v-else>
      <sidebar></sidebar>
      <service-messages v-if="messages.length > 0" />
      <router-view :key="$route.fullPath"></router-view>
      <div class="ui fitted divider"></div>
      <div id="footer" class="ui vertical footer segment">
        <div class="ui container">
          <div class="ui stackable equal height stackable grid">
            <div class="three wide column">
32
              <h4 v-translate class="ui header">Links</h4>
33
34
              <div class="ui link list">
                <router-link class="item" to="/about">
35
                  <translate>About this instance</translate>
36
                </router-link>
37
38
39
                <router-link class="item" :to="{name: 'library.request'}">
                  <translate>Request music</translate>
                </router-link>
40
41
                <a href="https://funkwhale.audio" class="item" target="_blank"><translate>Official website</translate></a>
                <a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate>Documentation</translate></a>
42
                <a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank">
43
44
                  <translate :translate-params="{version: version}" v-if="version">Source code (%{version})</translate>
                  <translate v-else>Source code</translate>
45
                </a>
46
                <a href="https://code.eliotberriot.com/funkwhale/funkwhale/issues" class="item" target="_blank"><translate>Issue tracker</translate></a>
47
                <a @click="switchInstance" class="item" >
48
                  <translate>Use another instance</translate>
49
50
51
52
53
                  <template v-if="$store.state.instance.instanceUrl !== '/'">
                    <br>
                    ({{ $store.state.instance.instanceUrl }})
                  </template>
                </a>
54
55
56
              </div>
            </div>
            <div class="ten wide column">
57
              <h4 v-translate class="ui header">About Funkwhale</h4>
58
              <p>
59
                <translate>Funkwhale is a free and open-source project run by volunteers. You can help us improve the platform by reporting bugs, suggesting features and share the project with your friends!</translate>
60
61
              </p>
              <p>
62
                <translate>The funkwhale logo was kindly designed and provided by Francis Gading.</translate>
63
64
              </p>
            </div>
65
66
67
68
            <div class="three wide column">
              <h4 v-translate class="ui header">Options</h4>
              <div class="ui form">
                <div class="ui field">
69
                  <label><translate>Change language</translate></label>
70
71
72
73
74
                  <select class="ui dropdown" v-model="$language.current">
                    <option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
                  </select>
                </div>
              </div>
75
76
77
78
              <br>
              <a target="_blank" href="https://translate.funkwhale.audio/engage/funkwhale/">
                <translate>Help us translate Funkwhale</translate>
              </a>
79
80
            </div>

81
82
83
          </div>
        </div>
      </div>
84
85
86
87
88
89
      <raven
        v-if="$store.state.instance.settings.raven.front_enabled.value"
        :dsn="$store.state.instance.settings.raven.front_dsn.value">
      </raven>
      <playlist-modal v-if="$store.state.auth.authenticated"></playlist-modal>
    </template>
90
91
92
93
  </div>
</template>

<script>
94
95
import axios from 'axios'
import _ from 'lodash'
96
import {mapState} from 'vuex'
97

98
99
import translations from '@/translations'

100
import Sidebar from '@/components/Sidebar'
Eliot Berriot's avatar
Eliot Berriot committed
101
import Raven from '@/components/Raven'
102
import ServiceMessages from '@/components/ServiceMessages'
103

Eliot Berriot's avatar
Eliot Berriot committed
104
105
import PlaylistModal from '@/components/playlists/PlaylistModal'

106
107
export default {
  name: 'app',
Eliot Berriot's avatar
Eliot Berriot committed
108
109
  components: {
    Sidebar,
Eliot Berriot's avatar
Eliot Berriot committed
110
    Raven,
111
112
    PlaylistModal,
    ServiceMessages
Eliot Berriot's avatar
Eliot Berriot committed
113
  },
114
115
  data () {
    return {
116
117
      nodeinfo: null,
      instanceUrl: null
118
119
    }
  },
120
  created () {
Eliot Berriot's avatar
Eliot Berriot committed
121
    let self = this
122
    this.autodetectLanguage()
123
124
125
126
    setInterval(() => {
      // used to redraw ago dates every minute
      self.$store.commit('ui/computeLastDate')
    }, 1000 * 60)
127
128
129
    if (!this.$store.state.instance.instanceUrl) {
      let defaultInstanceUrl = process.env.VUE_APP_INSTANCE_URL || this.$store.getters['instance/defaultUrl']()
      this.$store.commit('instance/instanceUrl', defaultInstanceUrl)
130
    }
131
132
133
    this.$store.dispatch('auth/check')
    this.$store.dispatch('instance/fetchSettings')
    this.fetchNodeInfo()
134
135
136
137
138
139
140
  },
  methods: {
    fetchNodeInfo () {
      let self = this
      axios.get('instance/nodeinfo/2.0/').then(response => {
        self.nodeinfo = response.data
      })
141
142
    },
    switchInstance () {
143
      let confirm = window.confirm(this.$gettext('This will erase your local data and disconnect you, do you want to continue?'))
144
145
146
      if (confirm) {
        this.$store.commit('instance/instanceUrl', null)
      }
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
    },
    autodetectLanguage () {
      let userLanguage = navigator.language || navigator.userLanguage
      let available = _.keys(translations)
      let matching = available.filter((a) => {
        return userLanguage.replace('-', '_') === a
      })
      let almostMatching = available.filter((a) => {
        return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
      })
      if (matching.length > 0) {
        this.$language.current = matching[0]
      } else if (almostMatching.length > 0) {
        this.$language.current = almostMatching[0]
      }
162
163
164
    }
  },
  computed: {
165
166
167
    ...mapState({
      messages: state => state.ui.messages
    }),
168
    suggestedInstances () {
169
      let instances = [this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio']
170
171
      return instances
    },
172
173
174
175
176
    version () {
      if (!this.nodeinfo) {
        return null
      }
      return _.get(this.nodeinfo, 'software.version')
177
178
179
180
181
    },
    customStylesheets () {
      if (this.$store.state.instance.frontSettings) {
        return this.$store.state.instance.frontSettings.additionalStylesheets || []
      }
182
    }
183
184
185
186
187
  },
  watch: {
    '$store.state.instance.instanceUrl' () {
      this.$store.dispatch('instance/fetchSettings')
      this.fetchNodeInfo()
188
189
190
    },
    '$language.current' (newValue) {
      this.$store.commit('ui/currentLanguage', newValue)
191
    }
192
  }
193
194
195
196
197
198
199
200
201
}
</script>

<style lang="scss">
// we do the import here instead in main.js
// as resolve order is not deterministric in webpack
// and we end up with CSS rules not applied,
// see https://github.com/webpack/webpack/issues/215
@import 'semantic/semantic.css';
202
@import 'style/vendor/media';
203
204


205
206
html, body {
  @include media("<desktop") {
207
    font-size: 90%;
208
209
  }
}
210
211
212
213
214
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
215
216
217
218
219

.instance-chooser {
  margin-top: 2em;
}

220
.main.pusher, .footer {
221
222
  @include media(">desktop") {
    margin-left: 350px !important;
223
    margin-top: 50px;
224
  }
225
  transform: none !important;
226
}
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249


.main.pusher > .ui.secondary.menu {
  margin-left: 0;
  margin-right: 0;
  border: none;
  box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
  .ui.item {
    border: none;
    border-bottom-style: none;
    margin-bottom: 0px;
    &.active {
      box-shadow: inset 0px -2px 0px 0px #000;
    }
  }
  @include media(">tablet") {
    padding: 0 2.5rem;
  }
  @include media(">desktop") {
    position: fixed;
    left: 350px;
    right: 0px;
    top: 0px;
Renon's avatar
Renon committed
250
    z-index: 2000;
251
252
253
254
255
256
257
258
  }
  background-color: white;
  .item {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
}

259
260
261
262
263
264
265
266
.service-messages {
  position: fixed;
  bottom: 1em;
  left: 1em;
  @include media(">desktop") {
    left: 350px;
  }
}
267
.main-pusher {
268
269
  padding: 1.5rem 0;
}
270
271
272
273
274
.ui.stripe.segment, #footer {
  padding: 2em;
  @include media(">tablet") {
    padding: 4em;
  }
275
276
}

277
278
279
280
281
282
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
.ui.small.text.container {
  max-width: 500px !important;
}

.button.icon.tiny {
    padding: 0.5em !important;
}

.sidebar {
  .logo {
    path {
      fill: white;
    }
  }
}

.discrete.link {
    color: rgba(0, 0, 0, 0.87);
301
    cursor: pointer;
302
303
304
305
306
}

.floated.buttons .button ~ .dropdown {
  border-left: none;
}
307
308
309
310

.ui.icon.header .circular.icon {
  display: flex;
  justify-content: center;
311

312
313
314
315
316
317
}

.segment-content .button{
  margin:  0.5em;
}

318
</style>