From ac64158f9a8b50b21e8f812bee1d338dab1413eb Mon Sep 17 00:00:00 2001
From: James Purser <james@angrybeanie.com>
Date: Sun, 18 Jun 2023 20:58:42 +1000
Subject: [PATCH] Update to nextjs 13 plus matomo support

---
 components/audioplayer.js            |  1 +
 components/featureimage.js           |  1 +
 data/external/cms.js                 | 19 +++++++++++++++++++
 package.json                         |  1 +
 pages/_app.js                        |  8 ++++++++
 pages/podcasts/shows/[...episode].js | 20 +++++++++++++++++---
 6 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/components/audioplayer.js b/components/audioplayer.js
index 5e86e49..c7ebc78 100755
--- a/components/audioplayer.js
+++ b/components/audioplayer.js
@@ -8,6 +8,7 @@ const AbAudioPlayer = (audiodata) => {
         <AudioPlayer
             src={audiodata.audio_mp3.url}
             //onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: audiodata.audio_mp3})}
+            onPlay={_paq.push(['trackEvent', 'Podcasts', 'Play Podcast', audiodata.audio_mp3])}
             />
     </div>
     )
diff --git a/components/featureimage.js b/components/featureimage.js
index 0ee52a3..3d56306 100755
--- a/components/featureimage.js
+++ b/components/featureimage.js
@@ -8,6 +8,7 @@ return (
     <div className="featuredimage">
         <Image
             src={imgSrc}
+            layout="responsive"
             height={400}
             width={800}
             priority={true}
diff --git a/data/external/cms.js b/data/external/cms.js
index 7ff48df..bdeac6e 100755
--- a/data/external/cms.js
+++ b/data/external/cms.js
@@ -87,6 +87,25 @@ export const getAllPodcastSeries = async () => {
     return await res.json()
 }
 
+export const getAllPodcastEpisodes = async () => {
+    const { serverRuntimeConfig } = getConfig()
+    const qs = require('qs')
+    const query = qs.stringify({
+        populate: {}
+    }, {
+        encodeValuesOnly: true
+    })
+
+    const res = await fetch(serverRuntimeConfig.base_path + `podcast-episodes?${query}`, {
+        headers: new Headers({
+            'Authorization': serverRuntimeConfig.strapi_token,
+            'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    return await res.json()
+}
+
 export const getProjectDetails = async (projectId) => {
     const { serverRuntimeConfig } = getConfig()
     const qs = require('qs')
diff --git a/package.json b/package.json
index a6eb714..c3f609b 100755
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "author": "James Purser",
   "license": "ISC",
   "dependencies": {
+    "@socialgouv/matomo-next": "^1.6.1",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
     "bootstrap": "^4.6.0",
diff --git a/pages/_app.js b/pages/_app.js
index dbddc16..97b9016 100755
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -8,6 +8,13 @@ import { Router, useRouter } from 'next/router'
 
 //Router.events.on('routeChangeComplete', (url) => gtag.pageview(url))
 
+import { init } from "@socialgouv/matomo-next";
+
+const MATOMO_URL = "https://analytics.angrybeanie.com";
+const MATOMO_SITE_ID = 2;
+
+console.log(MATOMO_URL);
+
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
   useEffect(() => {
@@ -15,6 +22,7 @@ function MyApp({ Component, pageProps }) {
      // gtag.pageview(url);
      // console.log("Pageview is happening")
     };
+    init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
     router.events.on("routeChangeComplete", handleRouteChange);
     return () => {
       router.events.off("routeChangeComplete", handleRouteChange);
diff --git a/pages/podcasts/shows/[...episode].js b/pages/podcasts/shows/[...episode].js
index 205f184..fee2cc3 100755
--- a/pages/podcasts/shows/[...episode].js
+++ b/pages/podcasts/shows/[...episode].js
@@ -8,6 +8,7 @@ import EpisodeSideBar from "../../../components/episodesidebar"
 import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js';
 import Head from "next/head"
 import config from "../../../data/internal/config"
+import { push } from '@socialgouv/matomo-next';
 
 
 export async function getServerSideProps(context) {
@@ -36,6 +37,19 @@ export async function getServerSideProps(context) {
 }
 
 const Episode = ( props ) => {
+
+    function pushLocalStart() {
+        if(typeof window !== "undefined") {push(["trackEvent", "MediaStats", "AudioStart", props.audiodata.audio_mp3])}
+    }
+
+    function pushLocalPause() {
+        if(typeof window !== "undefined") {push(["trackEvent", "MediaStats", "AudioPause", props.audiodata.audio_mp3])}
+    }
+
+    function pushLocalEnd() {
+        if(typeof window !== "undefined") {push(["trackEvent", "MediaStats", "AudioEnd", props.audiodata.audio_mp3])}
+    }
+
     return (<Layout 
                 pagedata={props.pagedata} 
                 sections={props.sections} 
@@ -54,9 +68,9 @@ const Episode = ( props ) => {
             <h1>{props.episode.data[0].attributes.Title}</h1>
             <AudioPlayer
                 src={props.audiodata.audio_mp3.url}
-                onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: props.audiodata.audio_mp3})}
-                onPause={e => gtag.event({action: "pause", category:"audio", label: "audio paused", value: props.audiodata.audio_mp3})}
-                onEnded={e => gtag.event({action: "end", category:"audio", label: "audio ended", value: props.audiodata.audio_mp3})}
+                onPlay={pushLocalStart}
+                onPause={pushLocalPause}
+                onEnded={pushLocalEnd}
                 />
             <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.data[0].attributes.Description}} />
             <h3>Transcript</h3>