orchard/src/renderer/views/pages/oobe.ejs

<script type="text/x-template" id="cider-oobe">
    <div class="content-inner oobe">
        <!--        before_we_start-->
        <!-- <transition name=""> -->
        <div class="oobe-view" v-if="screen == 'before_we_start'">
            <div class="oobe-header">
                {{ getLz("oobe.amupsell.title") }}
            </div>
            <div class="oobe-body text">{{ getLz("oobe.amupsell.text") }}

              <div class="md-option-line">
                <div class="md-option-segment">
                    {{$root.getLz('term.language')}}
                </div>
                <div class="md-option-segment md-option-segment_auto">
                    <label>
                        <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
                                v-model="$root.cfg.general.language">
                            <optgroup :label="index" v-for="(categories, index) in getLanguages()">
                                <option v-for="lang in categories" :value="lang.code">
                                    {{lang.nameNative}}
                                    ({{
                                    lang.nameEnglish }})
                                </option>
                            </optgroup>
                        </select>
                    </label>
                </div>
              </div>

            </div>
            <div class="oobe-footer">
                <div class="btn-group">
                    <div class="md-btn md-btn-primary" @click="screen = 'welcome'">{{ getLz("oobe.next") }}</div>
                </div>
            </div>
        </div>
        <!-- </transition> -->

        <!--     Welcome   -->
        <!-- <transition name=""> -->
        <div class="oobe-view" v-if="screen == 'welcome'">
            <div class="oobe-header">
                {{ getLz("oobe.intro.title") }}
            </div>
            <div class="oobe-body text">{{ getLz("oobe.intro.text") }}</div>
            <div class="oobe-footer">
                <div class="btn-group">
                    <div class="md-btn" @click="screen = 'before_we_start'">{{ getLz("oobe.previous") }}</div>
                    <div class="md-btn md-btn-primary" @click="screen = 'visual'">{{ getLz("oobe.next") }}</div>
                </div>
            </div>
        </div>
        <!-- </transition> -->

        <!--     General   -->
        <!-- <transition name=""> -->
        <div class="oobe-view" v-if="screen == 'general'">
            <div class="oobe-header">
                {{ getLz("oobe.general.title") }}
            </div>
            <div class="oobe-body text"></div>
            <div class="oobe-footer">
                <div class="btn-group">
                    <div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.previous") }}</div>
                    <div class="md-btn md-btn-primary" @click="screen = 'visual'">{{ getLz("oobe.next") }}</div>
                </div>
            </div>
        </div>
        <!-- </transition> -->

        <!--     Visual   -->
        <!-- <transition name=""> -->
        <div class="oobe-view" v-if="screen == 'visual'">
            <div class="oobe-header">
                {{ getLz("oobe.visual.title") }}
            </div>
            <div class="oobe-body visual">
                <b-row>
                    <b-col>
                        <div class="card bg-dark text-white stylePicker"
                             @click="$root.cfg.visual.directives.windowLayout = 'twopanel'"
                             :class="{'style-active': ($root.cfg.visual.directives.windowLayout == 'twopanel')}">
                            <div class="card-body">
                                <img class="visualPreview" src="./assets/oobe/mojave.png" alt="TEMP">
                            </div>
                            <div class="card-footer">
                                Mojave
                            </div>
                        </div>
                    </b-col>
                    <b-col>
                        <div class="card bg-dark text-white stylePicker"
                             @click="$root.cfg.visual.directives.windowLayout = 'default'"
                             :class="{'style-active': ($root.cfg.visual.directives.windowLayout == 'default')}">
                            <div class="card-body">
                                <img class="visualPreview" src="./assets/oobe/maverick.png" alt="TEMP">
                            </div>
                            <div class="card-footer">
                                Maverick
                            </div>
                        </div>
                    </b-col>
                </b-row>
                <div class="blurb">{{getLz("oobe.visual.layout.text")}}</div>
            </div>
            <div class="oobe-footer">
                <div class="btn-group">
                    <div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.previous") }}</div>
                    <div class="md-btn md-btn-primary" @click="screen = 'audio'">{{ getLz("oobe.next") }}</div>
                </div>
            </div>
        </div>
        <!-- </transition> -->

        <!--     Audio   -->
        <!-- <transition name=""> -->
        <div class="oobe-view" v-if="screen == 'audio'">
            <div class="oobe-header">
                {{ getLz("oobe.audio.title") }}
            </div>
            <div class="oobe-body">
                <div class="blurb">{{ getLz("oobe.audio.text") }}</div>
                <div class="md-option-container">
                    <div class="settings-option-body">
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE')}}
                                <br>
                                <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPE.description')}}</small>
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="$root.cfg.audio.maikiwiAudio.ciderPPE"
                                       switch />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="oobe-footer">
                <div class="btn-group">
                    <div class="md-btn" @click="screen = 'visual'">{{ getLz("oobe.previous") }}</div>
                    <div class="md-btn md-btn-primary" @click="signIn()">{{ getLz("oobe.next") }}</div>
                </div>
            </div>
        </div>
        <!-- </transition> -->
        <div class="oobe-view" v-if="screen == 'signin'">
            <div class="oobe-header">
                Sign in with Apple Music
            </div>
            <div class="oobe-body">
                <div class="blurb"></div>
            </div>
            <div class="oobe-footer">

            </div>
        </div>
        <div class="oobe-titlebar">
            <div class="button-group" v-if="$root.platform !== 'darwin'">
                <button class="min" @click="$root.ipcRenderer.send('minimize')"></button>
                <button class="close" @click="$root.ipcRenderer.send('close')"></button>
            </div>
        </div>
    </div>
</script>
<script>
  Vue.component('cider-oobe', {
    template: '#cider-oobe',
    data: function() {
      return {
        screen: "before_we_start"
      }
    },
    async mounted() {

    },
    methods: {
      signIn() {
        if (localStorage.getItem("music.ampwebplay.media-user-token")) {
          localStorage.setItem("seenOOBE", 1)
          window.location.reload()
        }
        this.screen = "signin"
        capiInit()
      },
      getLz() {
        return this.$root.getLz.apply(this.$root, arguments);
      },
      getLanguages: function() {
        let langs = this.$root.lzListing
        let categories = {
          "main": [],
          "fun": [],
          "unsorted": []
        }
        // sort by category if category is undefined or empty put it in "unsorted"
        for (let i = 0; i < langs.length; i++) {
          if (langs[i].category === undefined || langs[i].category === "") {
            categories.unsorted.push(langs[i])
          } else {
            categories[langs[i].category].push(langs[i])
          }
        }
        // return
        return categories
      }
    }
  });
</script>