Media types for deliverables

[ramijames]

Not all teams will be working on text type deliverables. Some others would be:

• video
• images
• audio (podcasts, etc.)

It wouldn't be that hard to expand the current system to allow other media types to be uploaded and pushed through a workflow process.

[ramijames]

For example, with video:

Here’s a rough code example for capturing comments with timestamps:

<template>
  <div>
    <video ref="videoPlayer" @timeupdate="onTimeUpdate" controls>
      <source src="your-video-url.mp4" type="video/mp4" />
    </video>
    <button @click="addComment">Add Comment at {{ currentTimeFormatted }}</button>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        [{{ formatTime(comment.time) }}] {{ comment.text }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const videoPlayer = ref(null);
const currentTime = ref(0);
const comments = ref([]); // Load existing comments from your backend

const onTimeUpdate = () => {
  currentTime.value = videoPlayer.value.currentTime;
};

const addComment = async () => {
  const newComment = {
    id: Date.now(), // Replace with backend-generated ID
    time: currentTime.value,
    text: prompt("Enter your comment:"),
  };
  comments.value.push(newComment);
  // Send newComment to your backend to save it in the database
};

const formatTime = (time) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
</script>

[ramijames]

More or less the same concept would work for images, too. Instead of timestamps, it's just an x,y position on the image which defines where the comment is