Merge pull request #48 from riffcc/info-pages-and-minor-fixes

Info pages and minor fixes

packages/renderer/src/components/home/contentSection.vue

@@ -111,7 +111,7 @@
                   size="small"
                   class="mt-3 mb-1 text-none"
                   text="Play now"
-                  @click="item.category && item.contentCID && $router.push(`/release/${item.category}/${item.contentCID}`)"
+                  @click="item.category && item.contentCID && router.push(`/release/${item.category}/${item.contentCID}`)"
                 ></v-btn>
               </v-card-actions>
             </v-img>
@@ -131,7 +131,7 @@
           class="mx-auto"
           width="170px"
           color="transparent"
-          @click="item.category === 'video' && item.contentCID && $router.push(`/release/${item.category}/${item.contentCID}`)"
+          @click="item.category === 'video' && item.contentCID && router.push(`/release/${item.category}/${item.contentCID}`)"
         >
           <v-img
             :src="item.thumbnail"
@@ -195,6 +195,8 @@
 
 <script setup lang="ts">
 import type { ItemContent } from '/@/views/homePage.vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 
 interface Props {

packages/renderer/src/components/home/featuredSlider.vue

@@ -65,7 +65,7 @@
                   prepend-icon="fas fa-play"
                   class="text-none mr-4"
                   text="Play now"
-                  @click="featured.category && featured.contentCID && $router.push(`/release/${featured.category}/${featured.contentCID}`)"
+                  @click="featured.category && featured.contentCID && router.push(`/release/${featured.category}/${featured.contentCID}`)"
                 ></v-btn>
               </div>
             </v-sheet>
@@ -99,6 +99,8 @@
 
 <script setup lang="ts">
 import type { FeaturedItem } from '/@/views/homePage.vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 interface Props {
   featuredList: Array<FeaturedItem>

packages/renderer/src/components/layout/appBar.vue

@@ -14,25 +14,29 @@
       </router-link>
     </v-app-bar-title>
 
-    <div class="d-none d-md-flex flex-1-0">
-      <v-btn
+    <div class="d-none d-md-flex flex-1-0 align-center">
+      <router-link
         v-for="item in navigationMap.appBar.normal"
         :key="item.label"
-        :text="item.label"
-        :class="$router.currentRoute.value.path === item.path ? 'text-primary-lighten-1 text-none' : 'text-none'"
-        @click="() => $router.push(`${item.path}`)"
-      ></v-btn>
+        :to="item.path"
+        class="text-decoration-none mx-2 text-subtitle-1 text-white"
+        active-class="text-primary-lighten-1"
+      >
+        {{ item.label }}
+      </router-link>
       <v-divider
         vertical
         class="mx-4"
       ></v-divider>
-      <v-btn
+      <router-link
         v-for="item in navigationMap.appBar.authenticated"
         :key="item.label"
-        :text="item.label"
-        :class="$router.currentRoute.value.path === item.path ? 'text-primary-lighten-1 text-none' : 'text-none'"
-        @click="() => $router.push(`${item.path}`)"
-      ></v-btn>
+        :to="item.path"
+        class="text-decoration-none mx-2 text-subtitle-1 text-white"
+        active-class="text-primary-lighten-1"
+      >
+        {{ item.label }}
+      </router-link>
     </div>
   </v-app-bar>
 </template>

packages/renderer/src/components/layout/appFooter.vue

@@ -21,12 +21,12 @@
             ></v-img>
             <v-list-item
               subtitle="Riff.CC is a dynamic platform for music, videos, and creative content. Discover, share, and enjoy a wide variety of multimedia in one place."
-              class="pa-0 mb-2"
+              class="pa-0"
             ></v-list-item>
             <br />
             <v-list-item
               subtitle="This is an early tech demo, work in progress. It is intended only as a proof of concept but may be interesting and enjoyable. No warranties are given, here be dragons, but enjoy."
-              class="pa-0 mb-2"
+              class="pa-0"
             ></v-list-item>
             <br />
             <v-list-item
@@ -56,7 +56,7 @@
                   class="mb-2 pl-1"
                   min-height="12px"
                   height="24px"
-                  @click="() => $router.push(item.path)"
+                  @click="item.path === '/contact' ? openEmailClient() : router.push(item.path)"
                 ></v-list-item>
               </v-list>
             </div>
@@ -93,12 +93,19 @@
 </template>
 
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
 import { navigationMap } from '/@/constants/navigation';
 
+const router = useRouter();
+
 const scrollToTop = () => {
   window.scrollTo({
     top: 0,
     behavior: 'smooth',
   });
 };
+
+const openEmailClient = () => {
+  window.location.href = 'mailto:wings@riff.cc';
+};
 </script>

packages/renderer/src/components/releases/videoPlayer.vue

@@ -18,7 +18,7 @@
             icon="fa:fas fa-arrow-left"
             class="position-absolute top-0 left-0 mt-2 ml-2"
             :style="{ zIndex: 1000 }"
-            @click="$router.back()"
+            @click="router.back()"
           ></v-btn>
 
           <video
@@ -106,6 +106,8 @@
 <script setup lang="ts">
 import type { Ref } from 'vue';
 import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
 const propsComponent = defineProps<{
   videoSource: string;

packages/renderer/src/components/settings/trustedSites/TrustedSiteItem.vue

@@ -5,9 +5,9 @@
     </v-list-item-title>
     <template #append>
       <TrustSiteDialog :site="site">
-        <template #activator="{props}">
+        <template #activator="{props: templateProps}">
           <v-btn
-            v-bind="props"
+            v-bind="templateProps"
             icon
             @click.stop
           >

packages/renderer/src/constants/about.ts

@@ -0,0 +1,25 @@
+export const aboutRiffCC = {
+  about: {
+    motto: 'e cinere surgemus (out of ash, rise)',
+    description: "The Riff.CC project focuses on improving free and open access to information. We're building collections of Creative Commons and similarly-licensed free media, such as movies, music, and more, and making open source tools and software to manage and publish those collections. We'll be using technology such as IPFS, Codex, and BitTorrent to achieve this at low cost and hopefully at scale.",
+  },
+  team: [
+    { name: 'Michaela Andrus', role: 'Solutions Engineer', affiliation: 'Riff Labs' },
+    { name: 'Lucas Jovanovich', role: 'Core Engineer', affiliation: 'Orbiter + Defederation' },
+    { name: 'Julien Malard-Adam', role: 'Core Engineer', affiliation: 'Orbiter + Defederation' },
+    { name: 'Evelyn Collins', role: 'Product Manager', affiliation: 'Orbiter' },
+    { name: 'Benjamin Arntzen', role: 'Founder, Engineer', affiliation: 'Riff + Riff Labs' },
+    { name: 'Gabriel Cruz', role: 'Distributed Systems Engineer', affiliation: 'Lis' },
+  ],
+  acknowledgement: 'We have a lot of community members and former contributors without whom this project would not be possible - thanks go out to them!',
+  structure: {
+    riffLabs: {
+      description: 'Riff Labs is a decentralisation focused R&D firm based out of London which provides consulting and engineering services specifically in projects that will improve decentralisation and free and open access to information.',
+      mission: 'We work with people, projects, and teams that are compatible with our wider goals, and through that work we are able to fund the development of Riff and work on things we care about in the process.',
+    },
+    riffCC: {
+      description: 'Riff.CC is run as independently as possible from that funding, and has no requirement, incentive, or need to raise capital or have any real outside influence.',
+      funding: 'It is partly funded by user donations which are held separately and never used for any purpose other than Riff.CC development or expanding capabilities of the physical Riff Labs deployments.',
+    },
+  },
+};

packages/renderer/src/constants/navigation.ts

@@ -38,12 +38,10 @@ export const navigationMap: NavigationMap = {
     ],
     company: [
       { label: 'Terms of Use', path: '/terms' },
-      { label: 'Contact Us', path: '/contact' },
-      { label: 'Our Team', path: '/team' },
+      { label: 'About the Riff.CC Project', path: '/about' },
     ],
     help: [
-      { label: 'Privacy Policy', path: '/privacy' },
-      { label: 'About the Riff.CC Project', path: '/about' },
+      { label: 'Privacy Policy', path: '/privacy-policy' },
       { label: 'Contact Us', path: '/contact' },
     ],
   },

packages/renderer/src/constants/privacy-policty.ts

@@ -0,0 +1,11 @@
+export const privacyPolicy = {
+  subtitle: 'tl;dr "we like privacy as much as you do"',
+  image: '/boat-on-dark-ocean.png',
+  policy: [
+    "We use Ghost for this landing page, which is a privacy respecting open source publishing platform. We use Ghost(Pro) to make hosting easy for now, although one day we'll self-host Ghost when Riff.CC launches to the public again.",
+    'Riff.CC itself does not collect any logs or private data or personal information at this stage beyond basic logs that web servers naturally collect. Those logs are used solely for the purposes of investigating issues and keeping Riff.CC secure and safe and do not aim to or wittingly collect any PII or sensitive information.',
+    "If you sign up on the Riff.CC blog, we'll email you when cool things happen or we post new content. We will never sell your email or personal information to anyone, nor sneakily hand it to them in a way that ultimately leads to you essentially having your information sold. And you can unsubscribe any time and we'll go away, unless someone human accidentally emails you by hand outside of any form of automated mailing system.",
+    "If you contribute to our project on OpenCollective, the details you share with us privately will be handled with care and discretion. Minimal details are provided to us when you donate - essentially name and amount, unless you consciously add more details. Please keep in mind that OpenCollective maintains a public record of all Riff.CC funding and development, and if you donate to us you'll be credited publicly unless you choose not to be. Look at the OpenCollective privacy policy for more details on how they handle your information if you choose to donate via OpenCollective - we do not do anything with that other than use it to fund projects. Your information is not shared with any third party in this case other than OpenCollective.",
+    'If you have any concerns about our privacy policy, please contact team@riff.cc or contact Benjamin.',
+  ],
+};

packages/renderer/src/plugins/router.ts

@@ -6,7 +6,9 @@ import BuildingPage from '/@/views/buildingPage.vue';
 import HomePage from '/@/views/homePage.vue';
 import InitPage from '/@/views/initPage.vue';
 import UploadPage from '/@/views/uploadPage.vue';
+import PrivacyPolicyPage from '/@/views/privacyPolicyPage.vue';
 import ReleasePage from '/@/views/releasePage.vue';
+import TermsPage from '/@/views/termsPage.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -49,6 +51,14 @@ const routes: Array<RouteRecordRaw> = [
     path: '/about',
     component: AboutPage,
   },
+  {
+    path: '/privacy-policy',
+    component: PrivacyPolicyPage,
+  },
+  {
+    path: '/terms',
+    component: TermsPage,
+  },
   {
     path: '/release/:category/:contentCID',
     name: 'Release',
@@ -61,8 +71,8 @@ const routeur = createRouter({
   history: createWebHashHistory(),
   routes,
   scrollBehavior() {
-    return { top: 0 }
-  }
+    return { top: 0 };
+  },
 });
 
 export default routeur;

packages/renderer/src/views/aboutPage.vue

@@ -1,9 +1,38 @@
 <template>
-  <v-container fill-height>
+  <v-container
+    fill-height
+    class="d-flex flex-column ga-4 my-10"
+  >
     <h1>About</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae libero inventore assumenda saepe quae? Ipsam optio, nihil commodi saepe inventore molestias quas praesentium tenetur fugit? A quaerat rem nobis accusamus.</p>
+    <p>{{ aboutRiffCC.about.motto }}</p>
+    <p>{{ aboutRiffCC.about.description }}</p>
+
+    <v-list bg-color="transparent">
+      <v-list-title>
+        <h2>Team</h2>
+      </v-list-title>
+      <v-list-item
+        v-for="(member, index) in aboutRiffCC.team"
+        :key="index"
+        :title="member.name"
+        :subtitle="`${member.role} (${member.affiliation})`"
+      >
+      </v-list-item>
+    </v-list>
+
+    <p>{{ aboutRiffCC.acknowledgement }}</p>
+
+    <h2>Structure</h2>
+    <h3>Riff Labs</h3>
+    <p>{{ aboutRiffCC.structure.riffLabs.description }}</p>
+    <p>{{ aboutRiffCC.structure.riffLabs.mission }}</p>
+
+    <h3>Riff.CC</h3>
+    <p>{{ aboutRiffCC.structure.riffCC.description }}</p>
+    <p>{{ aboutRiffCC.structure.riffCC.funding }}</p>
   </v-container>
 </template>
 
 <script setup lang="ts">
+import { aboutRiffCC } from '../constants/about';
 </script>

packages/renderer/src/views/collectionPage.vue

@@ -1,4 +1,6 @@
-<template></template>
+<template>
+  <h1>Collection Page</h1>
+</template>
 <script setup lang="ts">
 defineProps<{collectionId: string}>();
 </script>

packages/renderer/src/views/privacyPolicyPage.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-container
+    fill-height
+    class="d-flex flex-column ga-6 my-10"
+  >
+    <h1>Privacy Policy</h1>
+    <p>{{ privacyPolicy.subtitle }}</p>
+    <v-img :src="privacyPolicy.image"></v-img>
+    <p
+      v-for="(paragraph, index) in privacyPolicy.policy"
+      :key="index"
+    >
+      {{ paragraph }}
+    </p>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { privacyPolicy } from '../constants/privacy-policty';
+
+</script>

packages/renderer/src/views/releasePage.vue

@@ -11,7 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
 import videoPlayer from '/@/components/releases/videoPlayer.vue';
 
 const props = defineProps({