Merge pull request #49 from codeplaysoftware/tracking-and-youtube-embed

Tweaks to Tracking and YouTube Embed
codeplaysoftware · Nov 28, 2024 · 96d95d6 · 96d95d6
2 parents 02dc982 + bf5a079
commit 96d95d6
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 44 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -122,7 +122,7 @@ export class AppComponent implements OnDestroy {
       this.storageSubscription = this.safeStorageService.observe().subscribe((state) => {
         const fathomTrackers = this.document.documentElement.getElementsByClassName('fathom-tracking-script');
 
-        if (state['st-enable-tracking'] && fathomTrackers.length === 0) {
+        if (state['st-enable-tracking'] !== false && fathomTrackers.length === 0) {
           // Add fathom Analytics
           const fathom = document.createElement('script');
           fathom.setAttribute('class', 'fathom-tracking-script');

diff --git a/src/app/pages/cookies/cookies.component.html b/src/app/pages/cookies/cookies.component.html
@@ -96,3 +96,61 @@ <h1>What We Store</h1>
     </div>
   </div>
 </section>
+
+<!-- Section: 3rd Party  -->
+<section id="3rd-party">
+  <div class="wrapper panel content">
+    <header>
+      <div>
+        <h1>Third Party Usage</h1>
+      </div>
+    </header>
+    <div>
+      <h2>Embedded YouTube Player</h2>
+      <p>We use the YouTube embedded player on our website. If you interact with this component, Google may store
+      cookies on your device. These cookies constantly change and thus we cannot provided a comprehensive list of
+        them but we have listed a few of them belo. Please read
+        <a href="https://policies.google.com/privacy?hl=en" target="_blank" rel="nofollow">YouTube's
+          cookie policy here</a> to fully learn what is been stored and used.</p>
+      <table>
+        <thead>
+        <tr>
+          <th>Cookie Name</th>
+          <th>Description</th>
+          <th>Type</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>AEC</td>
+          <td>Used to detect spam.</td>
+          <td>
+            <div class="tag">3rd Party Cookie</div>
+          </td>
+        </tr>
+        <tr>
+          <td>DV</td>
+          <td>Generic tracking cookie.</td>
+          <td>
+            <div class="tag">3rd Party Cookie</div>
+          </td>
+        </tr>
+        <tr>
+          <td>NID</td>
+          <td>Keeps track of your preferences.</td>
+          <td>
+            <div class="tag">3rd Party Cookie</div>
+          </td>
+        </tr>
+        <tr>
+          <td>OGPC</td>
+          <td>Generic tracking cookie.</td>
+          <td>
+            <div class="tag">3rd Party Cookie</div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
diff --git a/src/app/pages/cookies/cookies.component.ts b/src/app/pages/cookies/cookies.component.ts
@@ -53,6 +53,6 @@ export class CookiesComponent {
    * Called when a user wishes to change their cookie/storage acceptance.
    */
   onStorageAcceptance() {
-    this.safeStorageService.clear(SafeStorageService.STORAGE_ALLOWED_KEY);
+    this.safeStorageService.clear(SafeStorageService.STORAGE_ALLOWED_KEY, true);
   }
 }
diff --git a/...ystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.scss b/...ystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.scss
@@ -8,8 +8,6 @@
   }
 
   header {
-    background-color: var(--color-blue);
-
     .tags {
       display: flex;
       flex-wrap: wrap;

diff --git a/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.html b/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.html
@@ -9,7 +9,8 @@ <h2 [innerHTML]="video.description"></h2>
         @for (tag of video.tags; track tag) {
           <st-tag [title]="tag"
                   [selected]="true"
-                  [allowSelection]="false"></st-tag>
+                  [allowSelection]="false"
+                  (click)="onTagClicked(tag)"></st-tag>
         }
       </div>
     </div>
@@ -22,12 +23,9 @@ <h2 [innerHTML]="video.description"></h2>
   </header>
   <main>
     @if (cookiesEnabled() && embedUrl()) {
-      <article [style.background-image]="'url(' + video.thumbnail + ')'">
-        <a [href]="video.url"
-           target="_blank"
-           rel="noopener">
-          <span class="material-symbols-outlined">play_circle</span>
-        </a>
+      <article class="video">
+        <st-loading></st-loading>
+        <iframe [src]="embedUrl()"></iframe>
       </article>
     } @else if (!embedUrl()) {
       <div class="warning">

diff --git a/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.scss b/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.scss
@@ -12,7 +12,6 @@
     flex-direction: column;
     align-items: normal;
     padding: 0;
-    background-color: var(--color-blue);
     flex-basis: 35%;
 
     .title {
@@ -57,6 +56,21 @@
         opacity: .5;
       }
     }
+
+    &.video {
+      position: relative;
+
+      st-loading {
+        position: absolute;
+      }
+
+      iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+    }
 
     @media screen and (min-width: 805px) {
       max-height: 600px;

diff --git a/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.ts b/src/app/pages/ecosystem/videos/video-widget/video-view-popup/video-view-popup.component.ts
@@ -20,7 +20,7 @@ import { ChangeDetectionStrategy, Component, computed, Inject, Signal, WritableS
 import { AsyncPipe } from '@angular/common';
 import { TagComponent } from '../../../../../shared/components/tag/tag.component';
 import { MarkdownComponent } from 'ngx-markdown';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { VideoModel } from '../../../../../shared/models/video.model';
 import { PopupReference } from '../../../../../shared/components/popup/popup.service';
 import { map } from 'rxjs';
@@ -31,6 +31,8 @@ import {
 } from '../../../../../shared/components/contributor-avatar/contributor-avatar.component';
 import { MultiDateComponent } from '../../../../../shared/components/multi-date/multi-date.component';
 import { SafeStorageService } from '../../../../../shared/services/safe-storage.service';
+import { LoadingComponent } from '../../../../../shared/components/loading/loading.component';
+import { FilterManager, UITagGroup } from '../../../../../shared/components/filter-result-layout/FilterManager';
 
 @Component({
   selector: 'st-video-view-popup',
@@ -42,7 +44,8 @@ import { SafeStorageService } from '../../../../../shared/services/safe-storage.
     RouterLink,
     ContributorAvatarComponent,
     AsyncPipe,
-    MultiDateComponent
+    MultiDateComponent,
+    LoadingComponent
   ],
   styleUrls: [
     '../../../../../shared/components/popup/layouts/widget.scss',
@@ -80,11 +83,15 @@ export class VideoViewPopupComponent {
    * @param popupReference
    * @param safeStorageService
    * @param sanitizer
+   * @param router
+   * @param activatedRoute
    */
   constructor(
     @Inject('POPUP_DATA') popupReference: PopupReference,
     private safeStorageService: SafeStorageService,
     private sanitizer: DomSanitizer,
+    private router: Router,
+    protected activatedRoute: ActivatedRoute
   ) {
     this.video = popupReference.data['video'];
 
@@ -102,4 +109,17 @@ export class VideoViewPopupComponent {
       map(() => this.safeStorageService.allowed())
     ));
   }
+
+  /**
+   * Called when a user clicks a tag.
+   */
+  protected onTagClicked(tag: string) {
+    const tagFilter = new UITagGroup('tags');
+    tagFilter.add(tag, true);
+
+    this.router.navigate(['/ecosystem/presentations'], {
+      relativeTo: this.activatedRoute,
+      queryParams: FilterManager.convertFiltersToParams([tagFilter])
+    }).then();
+  }
 }
diff --git a/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts b/src/app/pages/playground/popups/load-and-save/load-and-save-popup.component.ts
@@ -129,7 +129,7 @@ export class LoadAndSavePopupComponent implements OnInit {
 
     try {
       this.safeStorageService.save(LoadAndSavePopupComponent.storageKey, itemsToSave);
-      //this.saved.set(itemsToSave);
+      this.saved.set(itemsToSave);
     } catch (e) {
       console.error('Cannot save code, storage is disabled.');
     }

diff --git a/src/app/pages/privacy/privacy.component.html b/src/app/pages/privacy/privacy.component.html
@@ -54,67 +54,59 @@ <h1>Our Policy</h1>
     </header>
     <div>
       <h2>The type of personal information we collect</h2>
-
       <p><b>We currently collect and process the following information:</b></p>
-
       <ul>
         <li>Personal identifiers including name and email address.</li>
       </ul>
 
       <h2>How we get the personal information and why we have it</h2>
-
       <p><b>All the personal information we process is provided to us directly by you for one of the following
         reasons:</b></p>
-
       <ul>
         <li>Contact support requests using our support form.</li>
       </ul>
-
       <p>We use the information that you have given us in order to accurately understand your query and provide a
         response.</p>
-
       <p>We may share this information with our consortium members and partners.</p>
-
       <p><b>Under the UK General Data Protection Regulation (UK GDPR), the lawful bases we rely on for processing this
         information are:</b></p>
-
       <p>(a) Your consent. You are able to remove your consent at any time. You can do this by contacting
         <a href="mailto:{{ contactEmailAddress }}">{{ contactEmailAddress }}</a></p>
 
       <h2>How we store your personal information</h2>
-
       <p>Your information is securely stored.</p>
-
       <p> We keep your email address, name and query for period of 12 months. We will then dispose your information by
         deleting any reference to that data.</p>
 
       <h2>Anonymous Analytics</h2>
-
       <p>We want to process as little personal information as possible when you use our website. That's why we've chosen
         Fathom Analytics for our website analytics, which doesn't use cookies and complies with the GDPR, ePrivacy
         (including PECR), COPPA and CCPA. Using this privacy-friendly website analytics software, your IP address is
         only briefly processed, and we (running this website) have no way of identifying you. As per the CCPA, your
         personal information is de-identified. You can read more about this on Fathom Analytics' website.</p>
-
       <p>The purpose of us using this software is to understand our website traffic in the most privacy-friendly way
         possible so that we can continually improve our website and business. The lawful basis as per the GDPR is
         "Article 6(1)(f); where our legitimate interests are to improve our website and business continually." As per
         the explanation, no personal data is stored over time.</p>
 
-      <h2>Where your information is stored</h2>
 
-      <p>Your information will be stored on the following platforms:</p>
+      <h2>YouTube Embedded Player</h2>
+      <p>If you interact with any of the YouTube embedded players on this website, Google via YouTube will store
+      cookies on your device. Please click here to read
+        <a href="https://policies.google.com/privacy?hl=en" target="_blank" rel="nofollow">Google Privacy
+          Policy</a>. If you do not interact with the embedded player or if you have the cookie/storage disabled,
+      Google will not store cookies on your device.</p>
 
+      <h2>Where your information is stored</h2>
+      <p>Your information will be stored on the following platforms:</p>
       <ul>
         <li>Formspree</li>
         <li>Microsoft Office 365</li>
         <li>JIRA</li>
       </ul>
 
       <h2>Your data protection rights</h2>
-
       <p><b>Under data protection law, you have rights including:</b></p>
-
       <ul>
         <li>
           <p><b>Your right of access</b></p>
@@ -149,22 +141,17 @@ <h2>Your data protection rights</h2>
             to you, in certain circumstances.</p>
         </li>
       </ul>
-
       <p>You are not required to pay any charge for exercising your rights. If you make a request, we have one month to
         respond to you.</p>
-
       <p>Please contact us at <a href="mailto:{{ contactEmailAddress }}">{{ contactEmailAddress }}</a> if you wish to
         make a request.</p>
 
       <h2>How to complain</h2>
-
       <p>If you have any concerns about our use of your personal information, you can make a complaint to us at
         <a href="mailto:{{ contactEmailAddress }}">{{ contactEmailAddress }}</a>.</p>
-
       <p>You can also complain to the ICO if you are unhappy with how we have used your data.</p>
 
       <h2>The ICO's address:</h2>
-
       <address>
         Information Commissioner’s Office<br/>
         Wycliffe House<br/>
@@ -174,7 +161,6 @@ <h2>The ICO's address:</h2>
         SK9 5AF<br/>
         Helpline number: 0303 123 1113
       </address>
-
       <p>ICO website: <a href="https://www.ico.org.uk" target="_blank" rel="noopener">https://www.ico.org.uk</a></p>
     </div>
   </div>

diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
@@ -85,7 +85,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
       tap((state) => {
         this.enableStorage.set(state['st-cookies-accepted'] == true);
         this.enableDarkMode.set(state['st-dark-mode-enabled'] == true);
-        this.enableTracking.set(state['st-enable-tracking'] == true);
+        this.enableTracking.set(state['st-enable-tracking'] != false);
         this.enableAlerts.set(state['st-enable-alerts'] == true);
       })
     ).subscribe();

diff --git a/src/app/shared/components/popup/layouts/widget.scss b/src/app/shared/components/popup/layouts/widget.scss
@@ -4,7 +4,7 @@
   > header {
     padding: 0;
     color: var(--text-color);
-    background: linear-gradient(325deg, rgb(255, 61, 0) 0%, rgb(255 224 210) 57%);
+    background: #FFE0D2;
 
     :host-context(.dark-mode) & {
       background: var(--color-orange);
@@ -19,16 +19,16 @@
       }
 
       @media screen and (min-width: 800px) {
-        padding: 5rem 3rem;
+        padding: 4rem 3rem;
       }
     }
 
 
     .author {
       width: 100%;
       padding: 1rem 3rem;
-      border-top: rgba(255, 255, 255, .12) 1px solid;
-      background: rgba(255, 255, 255, .05);
+      border-top: rgba(0, 0, 0, .08) 1px solid;
+      background: rgba(0, 0, 0, .05);
 
       st-contributor-avatar {
         width: 32px;

diff --git a/src/app/shared/services/models/news.service.ts b/src/app/shared/services/models/news.service.ts
@@ -112,7 +112,7 @@ export class NewsService extends JsonFeedService {
         const found = news.find(news => news.tag === tag);
 
         if (!found) {
-          throw Error('NO NEWS');
+          throw Error(`No news item found matching the tag "${tag}".`);
         }
 
         return found;

diff --git a/src/app/shared/services/safe-storage.service.ts b/src/app/shared/services/safe-storage.service.ts
@@ -62,12 +62,16 @@ export class SafeStorageService {
   /**
    * Clear all the saved state, persisting if storage is allowed or not.
    */
-  clear(key?: string) {
+  clear(key?: string, notify?: boolean) {
     if (key) {
       this.storageService.remove(key);
     } else {
       this.storageService.clear();
     }
+
+    if (notify) {
+      this.notify();
+    }
   }
 
   /**