Add icons and custome viewer header

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.3.0",

src/components/SegmentItem.vue

@@ -8,12 +8,14 @@
         <div>
             <span>Start: {{ formatTime(localSegment.startTime) }}&nbsp;</span>
             <!-- Conditionally display set start time button -->
-            <span v-if="!isReadOnly" @click="$emit('set-start-time', localSegment)" class="time-setter fa fa-pencil" title="Set with the current play time"></span>
+            <span v-if="!isReadOnly" @click="$emit('set-start-time', localSegment)" class="time-setter fa fa-pencil"
+                title="Set with the current play time"></span>
         </div>
         <div>
             <span>End: {{ formatTime(localSegment.endTime) }}&nbsp;</span>
             <!-- Conditionally display set end time button -->
-            <span v-if="!isReadOnly" @click="$emit('set-end-time', localSegment)" class="time-setter fa fa-pencil" title="Set with the current play time"></span>
+            <span v-if="!isReadOnly" @click="$emit('set-end-time', localSegment)" class="time-setter fa fa-pencil"
+                title="Set with the current play time"></span>
         </div>
         <!-- The delete button can also be conditionally shown or hidden -->
         <button v-if="!isReadOnly" class="delete-button" @click="$emit('delete-segment', segment)">X</button>
@@ -23,12 +25,12 @@
 <script>
 export default {
     props: {
-    segment: Object,
-    isReadOnly: {
-        type: Boolean,
-        default: false,
+        segment: Object,
+        isReadOnly: {
+            type: Boolean,
+            default: false,
+        },
     },
-},
     data() {
         return {
             localSegment: this.segment,

src/components/headers/MomentumMovementAcademy.vue

@@ -0,0 +1,12 @@
+<template>
+    <div style="background-color: hsla(0, 100%, 50%, 1);width:100%"><a href="https://www.momentum-movement.ca/"><img
+    elementtiming="nbf-header-logo-desktop"
+    src="https://images.squarespace-cdn.com/content/v1/63a61ed2a637cd7b726fd375/2f4bfd8a-bcf3-4fdd-ae81-eb0dfcfd2f8d/mma-logo-website3.png?format=1500w"
+    alt="Momentum Movement Academy" style="display:block" fetchpriority="high" loading="eager"
+    decoding="async" data-loader="raw"></a></div>
+</template>
+
+<script>
+export default {
+}
+</script>

src/router/index.js

@@ -9,9 +9,10 @@ const routes = [
     component: SegmentSelector,
   },
   {
-    path: '/viewer',
+    path: '/viewer/:customHeader?',
     name: 'ViewerInterface',
     component: ViewerInterface,
+    props: true,
   },
 ];
 

src/views/SegmentSelector.vue

@@ -1,12 +1,24 @@
 <template>
     <div class="segment-selector">
         <header>
-            <h1>Video Segment Selector</h1>
-            <input type="file" @change="loadJson" ref="fileInput" style="display: none;" />
-            <button @click="triggerFileInput">Load JSON File</button>
-            <button @click="saveJson">Save/Download JSON File</button>
-            <button @click="createSharableLink">Create a Sharable Link</button>
-            <a v-if="sharableLink" :href="sharableLink" target="_blank">Open Sharable Link</a>
+            <div style="width: 100%;">
+                <h1 style="text-align: center;">Video Segment Selector</h1>
+                <div>
+                    <input type="file" @change="loadJson" ref="fileInput" style="display: none;" />
+                    <button @click="triggerFileInput">Load JSON File</button>
+                    <button @click="saveJson">Save/Download JSON File</button>
+                </div>
+                <div>
+                    Style: <select v-model="selectedStyle"
+                        @change="() => { console.log('selectedStyle', this.selectedStyle) }">
+                        <option v-for="option in styleOptions" :key="option.id" :value="option.id">
+                            {{ option.name }}
+                        </option>
+                    </select>
+                    <button @click="createSharableLink">Create a Sharable Link</button>
+                    <a v-if="sharableLink" :href="sharableLink" target="_blank">Open Sharable Link</a>
+                </div>
+            </div>
         </header>
         <div class="content-area">
             <main>
@@ -43,6 +55,16 @@ import draggable from 'vuedraggable';
 import YouTubePlayer from '@/components/YouTubePlayer.vue';
 import SegmentItem from '@/components/SegmentItem.vue';
 import { segmentMixin } from '@/mixins/segmentMixin.js';
+import axios from 'axios';
+
+function shortenURL(longUrl) {
+    return axios.get(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`)
+        .then(response => response.data)
+        .catch(error => {
+            console.error('Erreur lors de la création de l’URL courte :', error);
+            return longUrl; // Retournez l'URL originale en cas d'erreur
+        });
+}
 
 export default {
     mixins: [segmentMixin],
@@ -61,6 +83,12 @@ export default {
             filterText: '',
             sharableLink: '',
             maxSegmentId: 0,
+            styleOptions: [
+                { id: '', name: 'Default' },
+                { id: 'mma', name: 'Momentum' },
+                // Ajoutez d'autres options ici
+            ],
+            selectedStyle: '',
         };
     },
     watch: {
@@ -121,15 +149,17 @@ export default {
             const compactSegments = this.convertToCompactFormat(this.segments);
             const jsonData = JSON.stringify(compactSegments);
             const base64EncodedData = btoa(encodeURIComponent(jsonData)); // Encode the JSON string as Base64
-            const viewerUrl = `${window.location.origin}/viewer?data=${base64EncodedData}`; // Construct the viewer URL with the encoded data as a parameter
+            const viewerStyle = this.selectedStyle && ('/' + this.selectedStyle) || '';
+            const viewerUrl = `${window.location.origin}/viewer${viewerStyle}?data=${base64EncodedData}`; // Construct the viewer URL with the encoded data as a parameter
 
             // Check if the URL exceeds 2000 characters, a common practical limit
             if (viewerUrl.length > 2000) {
                 alert("The generated link is too long and might not be supported by some browsers. Please reduce the number of segments.");
             } else {
-                this.sharableLink = viewerUrl;
-                window.focus(); // Attempt to focus the window before accessing the clipboard
-                this.copyToClipboard(viewerUrl);
+                shortenURL(viewerUrl).then(shortUrl => {
+                    this.sharableLink = shortUrl;
+                    this.copyToClipboard(shortUrl);
+                });
             }
         },
         copyToClipboard(text) {

src/views/ViewerInterface.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="viewer-interface">
         <header>
-            <h1>Video Segment Viewer</h1>
+            <Momentum v-if="customHeader === 'mma'" />
+            <h1 v-else>Video Segment Viewer</h1>
         </header>
         <div class="content-area">
             <main>
                 <YouTubePlayer class="youtube-player" ref="youtubePlayer" :videoId="selectedSegment.videoId"
                     :startTime="selectedSegment.startTime" :pauseTime="selectedSegment.endTime"
-                    @over-pause-time="nextSegment" />
+                    @over-pause-time="nextSegment" :enablePause="autoPause" />
             </main>
             <aside>
                 <h2>Segments</h2>
@@ -16,9 +17,9 @@
                 </div>
                 <div>
                     <ul class="segments-list">
-                        <SegmentItem v-for="(segment, index) in filteredSegments" :key="index" :segment="segment" :index="index"
-                            :class="{ 'selected-segment': segment === selectedSegment }" @click="selectSegment(segment)"
-                            :is-read-only="true" />
+                        <SegmentItem v-for="(segment, index) in filteredSegments" :key="index" :segment="segment"
+                            :index="index" :class="{ 'selected-segment': segment === selectedSegment }"
+                            @click="selectSegment(segment)" :is-read-only="true" />
                     </ul>
                 </div>
             </aside>
@@ -29,20 +30,29 @@
 <script>
 import YouTubePlayer from '@/components/YouTubePlayer.vue';
 import SegmentItem from '@/components/SegmentItem.vue';
+import Momentum from '@/components/headers/MomentumMovementAcademy.vue';
 import { segmentMixin } from '@/mixins/segmentMixin.js';
 
 export default {
     mixins: [segmentMixin],
     components: {
         YouTubePlayer,
         SegmentItem,
+        Momentum,
     },
     name: 'ViewerInterface',
+    props: {
+        customHeader: {
+            type: String,
+            default: '' // Fournit une valeur par défaut si 'type' n'est pas passé
+        }
+    },
     data() {
         return {
             segments: [],
             selectedSegment: {},
             filterText: '',
+            autoPause: false,
         };
     },
     computed: {
@@ -74,6 +84,11 @@ export default {
         },
         selectSegment(segment) {
             this.selectedSegment = segment;
+            const segmentList = this.filteredSegments;
+            const isLast = segmentList && segmentList.length &&
+                segment === segmentList[segmentList.length - 1]
+            this.autoPause = !!isLast;
+            // console.log("autoPause", this.autoPause, isLast, segmentList, segmentList.length);
         },
     },
     mounted() {