Skip to content

Show torrent fields: creation_date, created_by, encoding #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 26, 2023
Merged

Show torrent fields: creation_date, created_by, encoding #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56af742
feat: [#278] show torrent fields creation date created by encoding
Oct 25, 2023
3f09085
refactor: [#297] Creation date now display as UTC
mario-nt Nov 22, 2023
5bad420
refactor: [#297] added error checks
mario-nt Nov 27, 2023
e4772ae
refactor: [#297] new error checks and refactoring
mario-nt Nov 29, 2023
489da9d
refactor: [#297] refactored error control
mario-nt Dec 3, 2023
4281526
refactor: [#297] code cleanup
mario-nt Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions components/torrent/TorrentCreatedByTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<div id="torrent-created-by" class="flex flex-col gap-6">
<div class="flex flex-row items-center justify-between">
<h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
Created by
</h2>
<button
class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
@click="collapsed = !collapsed"
>
<ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
</button>
</div>
<template v-if="!collapsed">
<div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
<template v-if="torrent.created_by">
<Markdown :source="torrent.created_by" />
</template>
<template v-else>
<span class="italic text-neutral-content">No created by field provided.</span>
</template>
</div>
</template>
</div>
</template>

<script setup lang="ts">
import { ChevronDownIcon } from "@heroicons/vue/24/solid";
import { TorrentResponse } from "torrust-index-types-lib";
import { PropType } from "vue";
import { ref } from "#imports";
import Markdown from "~/components/Markdown.vue";

const collapsed = ref(false);

const props = defineProps({
torrent: {
type: Object as PropType<TorrentResponse>,
required: true
}
});
</script>

<style scoped>

</style>
50 changes: 50 additions & 0 deletions components/torrent/TorrentCreationDateTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<div id="torrent-creation-date" class="flex flex-col gap-6">
<div class="flex flex-row items-center justify-between">
<h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
Creation Date
</h2>
<button
class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
@click="collapsed = !collapsed"
>
<ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
</button>
</div>
<template v-if="!collapsed">
<div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
<template v-if="torrent.creation_date">
{{ formatedDateFromTimestamp }}
</template>
<template v-else>
<span class="italic text-neutral-content">No creation date provided.</span>
</template>
</div>
</template>
</div>
</template>

<script setup lang="ts">
import { ChevronDownIcon } from "@heroicons/vue/24/solid";
import { TorrentResponse } from "torrust-index-types-lib";
import { PropType } from "vue";
import { ref } from "#imports";
import Markdown from "~/components/Markdown.vue";
import { formatTimestamp } from "~/src/helpers/DateConverter";

const collapsed = ref(false);

const props = defineProps({
torrent: {
type: Object as PropType<TorrentResponse>,
required: true
}
});

const formatedDateFromTimestamp = formatTimestamp(props.torrent.creation_date);

</script>

<style scoped>

</style>
3 changes: 3 additions & 0 deletions components/torrent/TorrentDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@
<div v-if="torrent" class="flex flex-col flex-auto w-full gap-6">
<TorrentDescriptionTab :torrent="torrent" @updated="reloadTorrent" />
<TorrentCommentTab :torrent="torrent" @updated="reloadTorrent" />
<TorrentCreationDateTab :torrent="torrent" @updated="reloadTorrent" />
<TorrentCreatedByTab :torrent="torrent" @updated="reloadTorrent" />
<TorrentEncodingTab :torrent="torrent" @updated="reloadTorrent" />
<TorrentFilesTab :torrent="torrent" @updated="reloadTorrent" />
<TorrentTrackersTab :torrent="torrent" @updated="reloadTorrent" />
</div>
Expand Down
46 changes: 46 additions & 0 deletions components/torrent/TorrentEncodingTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<div id="torrent-encoding" class="flex flex-col gap-6">
<div class="flex flex-row items-center justify-between">
<h2 class="mr-1 text-2xl font-medium text-left text-neutral-content/50">
Encoding
</h2>
<button
class="flex flex-col items-center justify-center w-10 h-10 duration-200 bg-transparent text-base-content/50 hover:text-base-content rounded-xl"
@click="collapsed = !collapsed"
>
<ChevronDownIcon class="w-6" :class="{ 'rotate-90': collapsed }" />
</button>
</div>
<template v-if="!collapsed">
<div class="flex flex-col w-full h-full p-6 grow bg-base-100 rounded-2xl">
<template v-if="torrent.encoding">
<Markdown :source="torrent.encoding" />
</template>
<template v-else>
<span class="italic text-neutral-content">No encoding provided.</span>
</template>
</div>
</template>
</div>
</template>

<script setup lang="ts">
import { ChevronDownIcon } from "@heroicons/vue/24/solid";
import { TorrentResponse } from "torrust-index-types-lib";
import { PropType } from "vue";
import { ref } from "#imports";
import Markdown from "~/components/Markdown.vue";

const collapsed = ref(false);

const props = defineProps({
torrent: {
type: Object as PropType<TorrentResponse>,
required: true
}
});
</script>

<style scoped>

</style>
21 changes: 21 additions & 0 deletions src/helpers/DateConverter.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some tests I did:

let seconds = Number.MAX_VALUE;

let miliseconds = seconds * 1000;
console.log("test1: ", miliseconds); // Infinity

try {
  milliseconds = seconds * 1000;
} catch (error) {
  console.log("overflow error", error);
}
console.log("test2: ", miliseconds); // Infinity

try {
  convertedDate = new Date(seconds * 1000);
} catch (error) {
  console.log("Date error", error);
}
console.log("test3: ", convertedDate); // Invalid Date

convertedDate = new Date(1701688171 * 1000);
console.log("test4: ", convertedDate);
console.log("test5: ", convertedDate.toISOString());
console.log("test6: ", convertedDate.toUTCString());

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @mario-nt I've just created another example.

Why do you want to differentiate between an invalid timestamp in the database and a timestamp greater than the maximum Date? Now we are showing the value causing the error so we can find out later what happened.

Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
type UnixTimestamp = number;
type FormattedDate = string;

class InvalidDateError extends Error {}

/**
* Takes the date in seconds from Unix Epoch time and converts it to human readable format.
*
* For example: 1701688451 -> "Mon Dec 04 2023"
*/

export function formatTimestamp (creationDate: UnixTimestamp): FormattedDate | Error {
const milliseconds = creationDate * 1000;

const convertedDate = new Date(milliseconds);

return isNaN(convertedDate.valueOf())
? new InvalidDateError(
`Invalid date. Could not create a new date from timestamp value: ${creationDate}`)
: convertedDate.toDateString();
}