Revamp About Page. Add new links and information

package-lock.json

@@ -1486,6 +1486,21 @@
         "@fortawesome/fontawesome-common-types": "^0.2.32"
       }
     },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+          "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+        }
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "@silvermine/videojs-quality-selector": "^1.2.4",

src/renderer/main.js

@@ -6,6 +6,7 @@ import store from './store/index'
 // import 'material-design-icons/iconfont/material-icons.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import VueI18n from 'vue-i18n'
 import yaml from 'js-yaml'
@@ -18,6 +19,7 @@ Vue.config.performance = isDev
 Vue.config.productionTip = isDev
 
 library.add(fas)
+library.add(fab)
 
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 Vue.use(VueI18n)

src/renderer/views/About/About.css

@@ -1,7 +1,8 @@
 .card {
   width: 85%;
   margin: 0 auto;
-  margin-bottom: 60px;
+  margin-bottom: 10px;
+  word-wrap: break-word;
 }
 
 .logo {

src/renderer/views/About/About.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+import FtButton from '../../components/ft-button/ft-button.vue'
 
 const { version } = require('../../../../package.json')
 
@@ -8,13 +9,25 @@ export default Vue.extend({
   name: 'About',
   components: {
     'ft-card': FtCard,
-    'ft-element-list': FtElementList
+    'ft-element-list': FtElementList,
+    'ft-button': FtButton
   },
   data: function () {
     return {
       versionNumber: `v${version}`
     }
   },
-  mounted: function () {
+  computed: {
+    usingElectron: function () {
+      return this.$store.getters.getUsingElectron
+    }
+  },
+  methods: {
+    openUrl: function (url) {
+      if (this.usingElectron) {
+        const shell = require('electron').shell
+        shell.openExternal(url)
+      }
+    }
   }
 })

src/renderer/views/About/About.vue

@@ -2,60 +2,114 @@
   <div>
     <ft-card class="card center">
       <h3 class="leftAlign">
-        About
+        {{ $t("About.About") }}
       </h3>
       <img
         src="_icons/logoColor.png"
         class="logo"
       >
       <h1>
-        {{ versionNumber }} Beta
+        {{ versionNumber }} {{ $t("About.Beta") }}
       </h1>
+      <h3>
+        {{ $t("About.License") }}:
+        <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a>
+      </h3>
+    </ft-card>
+    <ft-card class="card center">
+      <h3 class="leftAlign">
+        {{ $t("About.Contact") }}
+      </h3>
       <h3>
         <font-awesome-icon
           icon="envelope"
+          :title="$t('About.Email')"
         />
         &nbsp;&nbsp;FreeTubeApp@protonmail.com
       </h3>
-      <h2>
+      <h3>
-        This software is FOSS and released under the
+        <font-awesome-icon
-        <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU Affero General Public License v3.0</a>.
+          :icon="['fab', 'mastodon']"
-      </h2>
+          title="Mastodon"
-      <p>
+        />
-        Found a bug? Want to suggest a feature? Want to help out? Check out our
+        &nbsp;&nbsp;<a href="https://mastodon.technology/@FreeTube">@FreeTube@mastodon.technology</a>
-        <a href="https://github.com/FreeTubeApp/FreeTube">GitHub</a>
+      </h3>
-        page. Pull requests are welcome.
+      <h3>
-      </p>
+        <font-awesome-icon
-      <p>
+          icon="comments"
-        Thank you very much to the
+          title="Matrix"
-        <a href="https://github.com/FreeTubeApp/FreeTube/wiki/Credits">People and Projects</a>
+        />
-        that make FreeTube possible!
+        &nbsp;&nbsp;<a href="https://matrix.to/#/+freetube:matrix.org">#freetube:matrix.org</a> <a href="https://github.com/FreeTubeApp/FreeTube/wiki/Matrix-Channel-Info-&-Rules">({{ $t("About.Channel Rules") }})</a>
-      </p>
+      </h3>
-      <p>
+    </ft-card>
-        Want to chat? Join our
+    <ft-card class="card center">
-        <a href="https://app.element.io/#/group/+freetube:matrix.org">Element / Matrix Server</a>
+      <h3 class="leftAlign">
-        . Please check the
+        {{ $t("About.Help") }}
-        <a href="https://github.com/FreeTubeApp/FreeTube/wiki/Matrix-Server-Info-&-Rules">rules</a>
+      </h3>
-        before joining.
+      <ft-button
-      </p>
+        :label="$t('About.Report an Issue')"
-      <p>
+        @click="openUrl('https://github.com/FreeTubeApp/FreeTube/issues')"
-        Looking for help? Check out our
+      />
-        <a href="https://github.com/FreeTubeApp/FreeTube/wiki">Wiki</a>
+      <ft-button
-        page.
+        :label="$t('About.Wiki')"
-      </p>
+        @click="openUrl('https://github.com/FreeTubeApp/FreeTube/wiki')"
-      <p>
+      />
-        Check out our
+      <ft-button
-        <a href="https://addons.mozilla.org/en-US/firefox/addon/freetube-redirect/">Firefox</a>
+        :label="$t('About.FAQ')"
-        extension!
+        @click="openUrl('https://github.com/FreeTubeApp/FreeTube/wiki/F.A.Q.')"
-      </p>
+      />
-      <p>
+    </ft-card>
-        If you enjoy using FreeTube, consider donating via
+    <ft-card class="card center">
-        <a href="https://liberapay.com/FreeTube">Liberapay</a>
+      <h3 class="leftAlign">
-        or through our Bitcoin address.
+        {{ $t("About.Useful Links") }}
-      </p>
+      </h3>
-      <p>
+      <ft-button
-        BTC: 1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS
+        :label="$t('About.Credits')"
-      </p>
+        @click="openUrl('https://github.com/FreeTubeApp/FreeTube/wiki/Credits')"
+      />
+      <ft-button
+        :label="$t('About.Blog')"
+        @click="openUrl('https://freetube.writeas.com/')"
+      />
+      <ft-button
+        :label="$t('About.Release Notes')"
+        @click="openUrl('https://github.com/FreeTubeApp/FreeTube/releases')"
+      />
+      <ft-button
+        :label="$t('About.Source Code')"
+        @click="openUrl('https://github.com/FreeTubeApp/FreeTube')"
+      />
+      <ft-button
+        :label="$t('About.Website')"
+        @click="openUrl('https://freetubeapp.io/')"
+      />
+      <ft-button
+        :label="$t('About.Translate via Weblate')"
+        @click="openUrl('https://hosted.weblate.org/engage/free-tube/')"
+      />
+    </ft-card>
+    <ft-card class="card center">
+      <h3 class="leftAlign">
+        {{ $t("About.Donate") }}
+      </h3>
+      <h4>
+        <font-awesome-icon
+          icon="donate"
+        />
+        &nbsp;&nbsp;<a href="https://liberapay.com/FreeTube">Liberapay</a>
+      </h4>
+      <h4>
+        <font-awesome-icon
+          :icon="['fab', 'bitcoin']"
+        />
+        &nbsp;&nbsp;BTC: 1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS
+      </h4>
+      <h4>
+        <font-awesome-icon
+          :icon="['fab', 'monero']"
+        />
+        &nbsp;&nbsp;XMR: 48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB
+      </h4>
     </ft-card>
   </div>
 </template>

static/locales/en-US.yaml

@@ -282,32 +282,23 @@ Settings:
 About:
   #On About page
   About: About
-  #& About
+  Contact: Contact
-  'This software is FOSS and released under the GNU Affero General Public License v3.0.': This
+  Help: Help
-    copylefted software is freely licensed AGPL-3.0.
+  Useful Links: Useful Links
-
+  Donate: Donate
-  'Found a bug? Want to suggest a feature? Want to help out? Check out our GitHub page. Pull requests are welcome.': >-
+  Beta: Beta
-    Found a bug? Want to suggest a feature? Want to help out? Check out our GitHub
+  License: License
-    page. Pull requests welcome.
+  Email: Email
-
+  Channel Rules: Channel Rules
-  Thank you very much to the People and Projects that make FreeTube possible!: Thank
+  Report an Issue: Report an Issue
-    you very much to the People and Projects that make FreeTube possible!
+  Wiki: Wiki
-
+  FAQ: FAQ
-  'Want to chat? Join our Element / Matrix Server . Please check the rules before joining.': Want
+  Credits: Credits
-    to chat? Join our Element / Matrix Server . Please check the rules before joining.
+  Blog: Blog
-
+  Release Notes: Release Notes
-  'Looking for help? Check out our Wiki page.': Looking for help? Check out our Wiki
+  Source Code: Source Code
-    page.
+  Website: Website
-
+  Translate via Weblate: Translate via Weblate
-  Check out our Firefox extension!: Check out our Firefox extension!
-
-  'If you enjoy using FreeTube, consider donating via Liberapay or through our Bitcoin address.': If
-    you enjoy using FreeTube, consider donating via Liberapay or through our Bitcoin
-    address.
-
-  #~ 'BTC: 1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS'
-
-  Latest FreeTube News: Latest FreeTube News
 
 Profile:
   Profile Select: Profile Select

static/locales/en_GB.yaml

@@ -282,33 +282,24 @@ Settings:
     the changes?
 About:
   #On About page
-  About: 'About'
+  About: About
-  #& About
+  Contact: Contact
-  'This software is FOSS and released under the GNU Affero General Public License v3.0.': 'This
+  Help: Help
-    copylefted software is freely licenced AGPL-3.0.'
+  Useful Links: Useful Links
-
+  Donate: Donate
-  'Found a bug? Want to suggest a feature? Want to help out? Check out our GitHub page. Pull requests are welcome.': >-
+  Beta: Beta
-    Found a bug? Want to suggest a feature? Want to help out? Check out our GitHub
+  License: License
-    page. Pull requests welcome.
+  Email: Email
-
+  Channel Rules: Channel Rules
-  Thank you very much to the People and Projects that make FreeTube possible!: 'Thank
+  Report an Issue: Report an Issue
-    you very much to the People and Projects that make FreeTube possible!'
+  Wiki: Wiki
-
+  FAQ: FAQ
-  'Want to chat? Join our Element / Matrix Server . Please check the rules before joining.': 'Want
+  Credits: Credits
-    to chat? Join our Element / Matrix Server . Please check the rules before joining.'
+  Blog: Blog
-
+  Release Notes: Release Notes
-  'Looking for help? Check out our Wiki page.': 'Looking for help? Check out our Wiki
+  Source Code: Source Code
-    page.'
+  Website: Website
-
+  Translate via Weblate: Translate via Weblate
-  Check out our Firefox extension!: 'Check out our Firefox extension!'
-
-  'If you enjoy using FreeTube, consider donating via Liberapay or through our Bitcoin address.': 'If
-    you enjoy using FreeTube, consider donating via Liberapay or through our Bitcoin
-    address.'
-
-  #~ 'BTC: 1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS'
-
-  Latest FreeTube News: 'Latest FreeTube News'
 
 Profile:
   Profile Select: 'Profile Select'