feeds-fun 1.25.1 → 1.26.0

package/src/logic/types.ts

@@ -84,6 +84,18 @@ export class Feed {
   }
 }
 
+export type RawFeed = {
+  id: string;
+  title: string | null;
+  description: string | null;
+  url: string;
+  state: string;
+  lastError?: string | null;
+  loadedAt?: string | null;
+  linkedAt: string;
+  collectionIds: string[];
+};
+
 export function feedFromJSON({
   id,
   title,
@@ -94,31 +106,109 @@ export function feedFromJSON({
   loadedAt,
   linkedAt,
   collectionIds
-}: {
-  id: string;
-  title: string;
-  description: string;
-  url: string;
-  state: string;
-  lastError: string | null;
-  loadedAt: string;
-  linkedAt: string;
-  collectionIds: string[];
-}): Feed {
+}: RawFeed): Feed {
   return {
     id: toFeedId(id),
     title: title !== null ? title : null,
     description: description !== null ? description : null,
     url: toURL(url),
     state: state,
-    lastError: lastError,
-    loadedAt: loadedAt !== null ? new Date(loadedAt) : null,
+    lastError: lastError !== undefined ? lastError : null,
+    loadedAt: loadedAt !== undefined && loadedAt !== null ? new Date(loadedAt) : null,
     linkedAt: new Date(linkedAt),
     isOk: state === "loaded",
     collectionIds: collectionIds.map(toCollectionId)
   };
 }
 
+export type ReferenceExtraValue = number | string | null;
+
+export type RawReference = {
+  kind: e.ReferenceKind;
+  url: string;
+  title?: string | null;
+  mime_type?: string | null;
+  width?: number | null;
+  height?: number | null;
+  duration?: string | null;
+  size?: number | null;
+  extra?: {[key: string]: ReferenceExtraValue} | null;
+};
+
+export class Reference {
+  readonly kind: e.ReferenceKind;
+  readonly url: URL;
+  readonly title: string | null;
+  readonly mimeType: string | null;
+  readonly width: number | null;
+  readonly height: number | null;
+  readonly duration: string | null;
+  readonly size: number | null;
+  readonly extra: {[key: string]: ReferenceExtraValue} | null;
+
+  constructor({
+    kind,
+    url,
+    title,
+    mimeType,
+    width,
+    height,
+    duration,
+    size,
+    extra
+  }: {
+    kind: e.ReferenceKind;
+    url: URL;
+    title: string | null;
+    mimeType: string | null;
+    width: number | null;
+    height: number | null;
+    duration: string | null;
+    size: number | null;
+    extra: {[key: string]: ReferenceExtraValue} | null;
+  }) {
+    this.kind = kind;
+    this.url = url;
+    this.title = title;
+    this.mimeType = mimeType;
+    this.width = width;
+    this.height = height;
+    this.duration = duration;
+    this.size = size;
+    this.extra = extra;
+  }
+
+  youtubeId(): string | null {
+    const youtubeId = this.extra?.youtube_id;
+
+    return typeof youtubeId === "string" && youtubeId.length > 0 ? youtubeId : null;
+  }
+}
+
+export function referenceFromJSON({
+  kind,
+  url,
+  title,
+  mime_type,
+  width,
+  height,
+  duration,
+  size,
+  extra
+}: RawReference): Reference {
+  return new Reference({
+    kind: kind,
+    url: toURL(url),
+    title: title !== undefined ? title : null,
+    mimeType: mime_type !== undefined ? mime_type : null,
+    width: width !== undefined ? width : null,
+    height: height !== undefined ? height : null,
+    duration: duration !== undefined ? duration : null,
+    size: size !== undefined ? size : null,
+    extra: extra !== undefined ? extra : null
+  });
+}
+
 export class Entry {
   readonly id: EntryId;
   readonly feedId: FeedId;
@@ -131,6 +221,7 @@ export class Entry {
   readonly scoreToZero: number;
   readonly publishedAt: Date;
   body: string | null;
+  references: Reference[] | null;
 
   constructor({
     id,
@@ -142,7 +233,8 @@ export class Entry {
     score,
     scoreContributions,
     publishedAt,
-    body
+    body,
+    references
   }: {
     id: EntryId;
     feedId: FeedId;
@@ -154,6 +246,7 @@ export class Entry {
     scoreContributions: {[key: string]: number};
     publishedAt: Date;
     body: string | null;
+    references: Reference[] | null;
   }) {
     this.id = id;
     this.feedId = feedId;
@@ -165,6 +258,7 @@ export class Entry {
     this.scoreContributions = scoreContributions;
     this.publishedAt = publishedAt;
     this.body = body;
+    this.references = references;
 
     this.scoreToZero = -Math.abs(score);
   }
@@ -190,21 +284,21 @@ export class Entry {
   }
 }
 
-export function entryFromJSON(
-  rawEntry: {
-    id: string;
-    feedId: string;
-    title: string;
-    url: string;
-    tags: number[];
-    markers: string[];
-    score: number;
-    scoreContributions: {[key: number]: number};
-    publishedAt: string;
-    body: string | null;
-  },
-  tagsMapping: {[key: number]: string}
-): Entry {
+export type RawEntry = {
+  id: string;
+  feedId: string;
+  title: string;
+  url: string;
+  tags: number[];
+  markers: string[];
+  score: number;
+  scoreContributions: {[key: number]: number};
+  publishedAt: string;
+  body?: string | null;
+  references?: RawReference[] | null;
+};
+
+export function entryFromJSON(rawEntry: RawEntry, tagsMapping: {[key: number]: string}): Entry {
   const contributions: {[key: string]: number} = {};
 
   for (const key in rawEntry.scoreContributions) {
@@ -228,8 +322,11 @@ export function entryFromJSON(
     // map keys from int to string
     scoreContributions: contributions,
     publishedAt: new Date(rawEntry.publishedAt),
-
-    body: rawEntry.body
+    body: rawEntry.body !== undefined ? rawEntry.body : null,
+    references:
+      rawEntry.references !== undefined && rawEntry.references !== null
+        ? rawEntry.references.map(referenceFromJSON)
+        : null
   });
 }
 
@@ -279,17 +376,14 @@ export type EntryInfo = {
   readonly publishedAt: Date;
 };
 
-export function entryInfoFromJSON({
-  title,
-  body,
-  url,
-  publishedAt
-}: {
+export type RawEntryInfo = {
   title: string;
   body: string;
   url: string;
   publishedAt: string;
-}): EntryInfo {
+};
+
+export function entryInfoFromJSON({title, body, url, publishedAt}: RawEntryInfo): EntryInfo {
   return {title, body, url: toURL(url), publishedAt: new Date(publishedAt)};
 }
 
@@ -301,19 +395,15 @@ export type FeedInfo = {
   readonly isLinked: boolean;
 };
 
-export function feedInfoFromJSON({
-  url,
-  title,
-  description,
-  entries,
-  isLinked
-}: {
+export type RawFeedInfo = {
   url: string;
   title: string;
   description: string;
-  entries: any[];
+  entries: RawEntryInfo[];
   isLinked: boolean;
-}): FeedInfo {
+};
+
+export function feedInfoFromJSON({url, title, description, entries, isLinked}: RawFeedInfo): FeedInfo {
   return {
     url: toURL(url),
     title,
@@ -510,6 +600,32 @@ export function collectionFeedInfoFromJSON({
   });
 }
 
+export class IntegrationInfo {
+  readonly name: string;
+  readonly discovery: boolean;
+  readonly postprocessing: boolean;
+
+  constructor({name, discovery, postprocessing}: {name: string; discovery: boolean; postprocessing: boolean}) {
+    this.name = name;
+    this.discovery = discovery;
+    this.postprocessing = postprocessing;
+  }
+}
+
+export type RawIntegrationInfo = {
+  name: string;
+  discovery: boolean;
+  postprocessing: boolean;
+};
+
+export function integrationInfoFromJSON({name, discovery, postprocessing}: RawIntegrationInfo): IntegrationInfo {
+  return new IntegrationInfo({
+    name: name,
+    discovery: discovery,
+    postprocessing: postprocessing
+  });
+}
+
 export class ApiMessage {
   readonly type: string;
   readonly code: string;

package/src/logic/utils.ts

@@ -1,6 +1,7 @@
 import _ from "lodash";
 import type * as t from "@/logic/types";
 import DOMPurify from "dompurify";
+import * as iframeSanitizer from "@/logic/iframeSanitizer";
 
 const REQUIRED_LINK_ATTRIBUTES = {
   target: "_blank",
@@ -8,6 +9,33 @@ const REQUIRED_LINK_ATTRIBUTES = {
   referrerpolicy: "strict-origin-when-cross-origin"
 } as const;
 
+const INTERFERING_BODY_ATTRIBUTES = new Set(["class", "id", "style"]);
+
+const INTERFERING_BODY_ATTRIBUTE_PREFIXES = ["data-"];
+
+function isInterferingBodyAttribute(attributeName: string) {
+  if (INTERFERING_BODY_ATTRIBUTES.has(attributeName)) {
+    return true;
+  }
+
+  return INTERFERING_BODY_ATTRIBUTE_PREFIXES.some((prefix) => attributeName.startsWith(prefix));
+}
+
+function removeInterferingAttributes(html: string) {
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+  const elements = parsed.body.querySelectorAll("*");
+
+  for (const element of elements) {
+    for (const attribute of Array.from(element.attributes)) {
+      if (isInterferingBodyAttribute(attribute.name)) {
+        element.removeAttribute(attribute.name);
+      }
+    }
+  }
+
+  return parsed.body.innerHTML;
+}
+
 function hardenLinksSecurityAttributes(html: string) {
   const parsed = new DOMParser().parseFromString(html, "text/html");
   const links = parsed.body.querySelectorAll("[href]");
@@ -109,12 +137,14 @@ export function purifyBody({raw, default_}: {raw: string | null; default_: strin
     return default_;
   }
 
-  let body = DOMPurify.sanitize(raw).trim();
+  let body = DOMPurify.sanitize(raw, iframeSanitizer.DOM_PURIFY_IFRAME_OPTIONS).trim();
 
   if (body.length === 0) {
     return default_;
   }
 
+  body = removeInterferingAttributes(body);
+  body = iframeSanitizer.sanitizeIframes(body);
   body = hardenLinksSecurityAttributes(body);
 
   return body;

package/src/main.ts

@@ -65,12 +65,18 @@ import SocialLink from "./values/SocialLink.vue";
 import BodyListReverseTimeColumn from "./components/body_list/ReverseTimeColumn.vue";
 import BodyListFaviconColumn from "./components/body_list/FaviconColumn.vue";
 import BodyListEntryBody from "./components/body_list/EntryBody.vue";
+import BodyListEntryCover from "./components/body_list/EntryCover.vue";
+import BodyListReferences from "./components/body_list/References.vue";
+import BodyListReference from "./components/body_list/Reference.vue";
+import IntegrationsYouTube from "./integrations/YouTube.vue";
 
 import MainDescription from "./components/main/Description.vue";
 import MainItem from "./components/main/Item.vue";
 import MainNewsTitle from "./components/main/NewsTitle.vue";
 import MainHeaderLine from "./components/main/HeaderLine.vue";
 import MainBlock from "./components/main/Block.vue";
+import MainIntegrationsTable from "./components/main/IntegrationsTable.vue";
+import MainShowMoreButton from "./components/main/ShowMoreButton.vue";
 
 import SidePanelCollapseButton from "./components/side_pannel/CollapseButton.vue";
 
@@ -138,12 +144,18 @@ app.component("SocialLink", SocialLink);
 app.component("BodyListReverseTimeColumn", BodyListReverseTimeColumn);
 app.component("BodyListFaviconColumn", BodyListFaviconColumn);
 app.component("BodyListEntryBody", BodyListEntryBody);
+app.component("BodyListEntryCover", BodyListEntryCover);
+app.component("BodyListReferences", BodyListReferences);
+app.component("BodyListReference", BodyListReference);
+app.component("IntegrationsYouTube", IntegrationsYouTube);
 
 app.component("MainDescription", MainDescription);
 app.component("MainItem", MainItem);
 app.component("MainNewsTitle", MainNewsTitle);
 app.component("MainHeaderLine", MainHeaderLine);
 app.component("MainBlock", MainBlock);
+app.component("MainIntegrationsTable", MainIntegrationsTable);
+app.component("MainShowMoreButton", MainShowMoreButton);
 
 app.component("SidePanelCollapseButton", SidePanelCollapseButton);
 

package/src/stores/entries.ts

@@ -96,6 +96,10 @@ export const useEntriesStore = defineStore("entriesStore", () => {
           entry.body = existingEntry.body;
         }
 
+        if (entry.references === null && existingEntry.references !== null) {
+          entry.references = existingEntry.references;
+        }
+
         if (!updateTags) {
           entry.tags = _.cloneDeep(existingEntry.tags);
         }
@@ -202,7 +206,11 @@ export const useEntriesStore = defineStore("entriesStore", () => {
   });
 
   function requestFullEntry({entryId}: {entryId: t.EntryId}) {
-    if (entryId in entries.value && entries.value[entryId].body !== null) {
+    if (
+      entryId in entries.value &&
+      entries.value[entryId].body !== null &&
+      entries.value[entryId].references !== null
+    ) {
       return;
     }
 

package/src/stores/integrations.ts

@@ -0,0 +1,14 @@
+import {defineStore} from "pinia";
+import {computedAsync} from "@vueuse/core";
+
+import * as api from "@/logic/api";
+
+export const useIntegrationsStore = defineStore("integrationsStore", () => {
+  const integrations = computedAsync(async () => {
+    return await api.getIntegrations();
+  }, []);
+
+  return {
+    integrations
+  };
+});

package/src/values/Icon.vue

@@ -20,6 +20,15 @@
     IconChevronsRight,
     IconLayoutSidebarLeftCollapse,
     IconLayoutSidebarLeftExpand,
+    IconUser,
+    IconMessageCircle,
+    IconWorld,
+    IconPlayerPlay,
+    IconVolume,
+    IconPhoto,
+    IconFileText,
+    IconInfoSquareFilled,
+    IconCheck,
     IconX,
     IconMoodSmile,
     IconMoodSad
@@ -38,6 +47,15 @@
     "chevrons-left": IconChevronsLeft,
     "sidebar-left-collapse": IconLayoutSidebarLeftCollapse,
     "sidebar-left-expand": IconLayoutSidebarLeftExpand,
+    user: IconUser,
+    comments: IconMessageCircle,
+    world: IconWorld,
+    "player-play": IconPlayerPlay,
+    volume: IconVolume,
+    photo: IconPhoto,
+    "file-text": IconFileText,
+    "info-square-filled": IconInfoSquareFilled,
+    check: IconCheck,
     x: IconX,
     "face-smile": IconMoodSmile,
     "face-sad": IconMoodSad

package/src/views/FeedsView.vue

@@ -60,12 +60,14 @@
   import {computed, ref, onUnmounted, watch, provide} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useGlobalState} from "@/stores/globalState";
   import {useFeedsStore} from "@/stores/feeds";
   import * as api from "@/logic/api";
   import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
 
   const globalSettings = useGlobalSettingsStore();
+  const globalState = useGlobalState();
 
   const feedsStore = useFeedsStore();
 
@@ -73,7 +75,15 @@
 
   globalSettings.mainPanelMode = e.MainPanelMode.Feeds;
 
+  const readyToUseSettings = computed(() => {
+    return globalSettings.userSettingsPresent || !globalState.loginConfirmed;
+  });
+
   const sortedFeeds = computed(() => {
+    if (!readyToUseSettings.value) {
+      return null;
+    }
+
     let sorted = Object.values(feedsStore.feeds);
 
     if (sorted.length === 0) {

package/src/views/MainView.vue

@@ -10,7 +10,7 @@
 
     <main-block>
       <h1 class="m-0 text-5xl">Feeds Fun</h1>
-      <p class="mt-2 text-2xl">Transparent & Personalized News</p>
+      <p class="mt-2 text-2xl">Personalized News You Control</p>
 
       <div class="h-12 grid grid-flow-col auto-cols-fr gap-3 w-max mx-auto">
         <a
@@ -224,14 +224,16 @@
       <div
         v-if="showMoreCollectionsButtonRequired"
         class="mt-4 text-center">
-        <button
-          class="ffun-main-button short"
-          @click="showAllCollections = !showAllCollections">
-          {{ showAllCollections ? "Show less" : "Show more" }}
-        </button>
+        <main-show-more-button v-model:expanded="showAllCollections" />
       </div>
     </main-block>
 
+    <main-header-line v-if="settings.hasIntegrations"> Advanced support for popular sources </main-header-line>
+
+    <main-block v-if="settings.hasIntegrations">
+      <main-integrations-table />
+    </main-block>
+
     <main-header-line> Here, take a peek </main-header-line>
     <div class="text-center p-5">
       <img

package/src/views/RulesView.vue

@@ -41,6 +41,7 @@
   import {useRoute, useRouter} from "vue-router";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import {useGlobalState} from "@/stores/globalState";
   import _ from "lodash";
   import * as utils from "@/logic/utils";
   import * as api from "@/logic/api";
@@ -57,6 +58,7 @@
   provide("eventsViewName", "rules");
 
   const globalSettings = useGlobalSettingsStore();
+  const globalState = useGlobalState();
 
   tagsFilterState.setSyncingTagsWithRoute({
     tagsStates: tagsStates.value as unknown as tagsFilterState.Storage,
@@ -75,7 +77,11 @@
     router.push({name: e.MainPanelMode.Entries, params: {}});
   }
 
-  const loading = computed(() => rules.value === null);
+  const readyToUseSettings = computed(() => {
+    return globalSettings.userSettingsPresent || !globalState.loginConfirmed;
+  });
+
+  const loading = computed(() => rules.value === null || !readyToUseSettings.value);
 
   const rules = computedAsync(async () => {
     // force refresh
@@ -84,7 +90,7 @@
   }, null);
 
   const sortedRules = computed(() => {
-    if (!rules.value) {
+    if (!rules.value || !readyToUseSettings.value) {
       return null;
     }