display repo full_name if description is not provided

src/main/base/browserwindow.ts

@@ -47,6 +47,7 @@ export class BrowserWindow {
                 "pages/library-videos",
                 "pages/remote-pair",
                 "pages/themes-github",
+                "pages/plugins-github",
                 "pages/replay",
                 "pages/audiolabs",
                 "components/mediaitem-artwork",
@@ -162,6 +163,10 @@ export class BrowserWindow {
                     page: "themes-github",
                     component: `<themes-github></themes-github>`,
                     condition: `page == 'themes-github'`
+                },{
+                    page: "plugins-github",
+                    component: `<plugins-github></plugins-github>`,
+                    condition: `page == 'plugins-github'`
                 }, {
                     page: "podcasts",
                     component: `<apple-podcasts></apple-podcasts>`,

src/renderer/views/pages/plugins-github.ejs

@@ -0,0 +1,176 @@
+<script type="text/x-template" id="plugins-github">
+    <div class="content-inner github-themes-page">
+        <div class="gh-header">
+            <div class="row">
+                <div class="col nopadding">
+                    <h1 class="header-text">Plugins from GitHub</h1>
+                </div>
+                <div class="col-auto nopadding flex-center">
+                    <button class="md-btn md-btn-small md-btn-block" @click="installThemeURL()">
+                        {{$root.getLz('settings.option.visual.theme.github.download')}}
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="gh-content">
+            <div class="repos-list">
+                <ul class="list-group list-group-flush">
+                    <li @click="showRepo(repo)" class="list-group-item list-group-item-dark"
+                        :style="{'background': (repo.id == openRepo.id) ? 'var(--keyColor)' : ''}"
+                        v-for="repo in repos">
+                        <div class="row">
+                            <div class="col flex-center">
+                                <div>
+                                    <h4 class="repo-name">{{ repo.description }}</h4>
+                                    <div>⭐ {{ repo.stargazers_count }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="github-preview" v-if="openRepo.full_name">
+                <div class="gh-preview-header">
+                    <div class="row nopadding">
+                        <div class="col nopadding flex-center">
+                            <div>
+                                <h3 class="repo-preview-name">{{ openRepo.description }}</h3>
+                                <div>
+                                    <div class="svg-icon inline" :style="{'--url': 'url(\'./assets/github.svg\')'}"></div>
+                                    <a class="repo-url" target="_blank" :href="openRepo.html_url">{{ openRepo.full_name
+                                        }}</a></div>
+                                <div>⭐ {{ openRepo.stargazers_count }}</div>
+                            </div>
+                        </div>
+                        <div class="col-auto nopadding flex-center">
+                            <button class="md-btn md-btn-primary" @click="installThemeRepo(openRepo)">
+                                <span v-if="!themesInstalled.includes(openRepo.full_name)">{{$root.getLz('action.install')}}</span>
+                                <span v-else>{{$root.getLz('action.update')}}</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <hr>
+                <div v-html="openRepo.readme" class="github-content"></div>
+            </div>
+            <div class="github-preview" v-else>
+
+            </div>
+            </transition>
+        </div>
+    </div>
+</script>
+<script>
+    Vue.component('plugins-github', {
+        template: "#plugins-github",
+        props: [],
+        data: function () {
+            return {
+                repos: [],
+                openRepo: {
+                    id: -1,
+                    name: '',
+                    description: '',
+                    html_url: '',
+                    stargazers_count: 0,
+                    owner: {
+                        avatar_url: ''
+                    },
+                    readme: ""
+                },
+                themesInstalled: []
+            }
+        },
+        mounted() {
+            this.getRepos();
+            this.getInstalledThemes();
+        },
+        methods: {
+            getInstalledThemes() {
+                let self = this
+                const themes = ipcRenderer.sendSync("get-themes")
+                // for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
+                themes.forEach(theme => {
+                    if (theme.github_repo !== "") {
+                        self.themesInstalled.push(theme.github_repo)
+                    }
+                })
+            },
+            showRepo(repo) {
+                const self = this
+                const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch(readmeUrl, requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.openRepo = repo
+                        self.openRepo.readme = self.convertReadMe(result);
+                    })
+                    .catch(error => {
+                        self.openRepo = repo
+                        self.openRepo.readme = `This repository doesn't have a README.md file.`;
+                        console.log('error', error)
+                    });
+            },
+            convertReadMe(text) {
+                var converter = new showdown.Converter(),
+                    html = converter.makeHtml(text);
+                return html
+            },
+            installThemeRepo(repo) {
+                let self = this
+                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
+                    repo: repo.full_name
+                });
+                bootbox.confirm(msg, (res) => {
+                    if (res) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", repo.html_url)
+                    }
+                })
+            },
+            installThemeURL() {
+                let self = this
+                bootbox.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
+                    if (result) {
+                        ipcRenderer.once("theme-installed", (event, arg) => {
+                            if (arg.success) {
+                                self.themes = ipcRenderer.sendSync("get-themes")
+                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
+                            } else {
+                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
+                            }
+                        });
+                        ipcRenderer.invoke("get-github-theme", result)
+                    }
+                });
+            },
+            getRepos() {
+                let self = this
+                var requestOptions = {
+                    method: 'GET',
+                    redirect: 'follow'
+                };
+
+                fetch("https://api.github.com/search/repositories?q=topic:cidermusicplugin fork:true", requestOptions)
+                    .then(response => response.text())
+                    .then(result => {
+                        self.repos = JSON.parse(result).items
+                    })
+                    .catch(error => console.log('error', error));
+            }
+        }
+    })
+</script>

src/renderer/views/pages/themes-github.ejs

@@ -21,7 +21,7 @@
                         <div class="row">
                             <div class="col flex-center">
                                 <div>
-                                    <h4 class="repo-name">{{ repo.description }}</h4>
+                                    <h4 class="repo-name">{{ (repo.description != null) ? repo.description : repo.full_name }}</h4>
                                     <div>⭐ {{ repo.stargazers_count }}</div>
                                 </div>
                             </div>