diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue index 32bef7fafd0..87b527f5366 100644 --- a/frontend/src/components/VAudioTrack/VAudioTrack.vue +++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue @@ -37,7 +37,16 @@ - -
{{ timeFmt(audio.duration || 0, true) }}
- - - {{ $t("audioDetails.weblink") }} - + @@ -75,15 +98,14 @@ import { computed, defineComponent, PropType } from "vue" import type { AudioDetail } from "~/types/media" import { timeFmt } from "~/utils/time-fmt" import { AudioSize, AudioStatus, audioFeatures } from "~/constants/audio" -import { AUDIO } from "~/constants/media" -import { useAnalytics } from "~/composables/use-analytics" +import { useFeatureFlagStore } from "~/stores/feature-flag" -import VButton from "~/components/VButton.vue" import VLink from "~/components/VLink.vue" +import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue" export default defineComponent({ name: "VFullLayout", - components: { VButton, VLink }, + components: { VGetMediaButton, VLink }, props: { audio: { type: Object as PropType, @@ -101,25 +123,20 @@ export default defineComponent({ }, }, setup(props) { - const { sendCustomEvent } = useAnalytics() - const isSmall = computed(() => props.size === "s") - const sendGetMediaEvent = () => { - sendCustomEvent("GET_MEDIA", { - id: props.audio.id, - provider: props.audio.provider, - mediaType: AUDIO, - }) - } + const featureFlagStore = useFeatureFlagStore() + + const additionalSearchViews = computed(() => { + return featureFlagStore.isOn("additional_search_views") + }) return { timeFmt, isSmall, audioFeatures, - - sendGetMediaEvent, + additionalSearchViews, } }, }) diff --git a/frontend/src/components/VMediaInfo/VGetMediaButton.vue b/frontend/src/components/VMediaInfo/VGetMediaButton.vue new file mode 100644 index 00000000000..d503e6d6544 --- /dev/null +++ b/frontend/src/components/VMediaInfo/VGetMediaButton.vue @@ -0,0 +1,54 @@ + + diff --git a/frontend/src/pages/audio/_id/index.vue b/frontend/src/pages/audio/_id/index.vue index 8091a2b9dfc..e117a3f8a85 100644 --- a/frontend/src/pages/audio/_id/index.vue +++ b/frontend/src/pages/audio/_id/index.vue @@ -65,10 +65,12 @@ import VMediaDetails from "~/components/VMediaInfo/VMediaDetails.vue" import VSafetyWall from "~/components/VSafetyWall/VSafetyWall.vue" import VSingleResultControls from "~/components/VSingleResultControls.vue" import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue" +import VErrorSection from "~/components/VErrorSection/VErrorSection.vue" export default defineComponent({ name: "AudioDetailPage", components: { + VErrorSection, VAudioThumbnail, VSingleResultControls, VSafetyWall, diff --git a/frontend/src/pages/image/_id/index.vue b/frontend/src/pages/image/_id/index.vue index 2fd1ec93394..a37ee200824 100644 --- a/frontend/src/pages/image/_id/index.vue +++ b/frontend/src/pages/image/_id/index.vue @@ -45,20 +45,11 @@ id="title-button" class="flex flex-row flex-wrap justify-between gap-x-6 md:mt-6 md:flex-row-reverse" > - - {{ $t("imageDetails.weblink") }} - +

{{ image.title }} @@ -124,7 +115,6 @@ import { useSingleResultStore } from "~/stores/media/single-result" import { singleResultMiddleware } from "~/middleware/single-result" import VBone from "~/components/VSkeleton/VBone.vue" -import VButton from "~/components/VButton.vue" import VLink from "~/components/VLink.vue" import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue" import VRelatedImages from "~/components/VImageDetails/VRelatedImages.vue" @@ -132,17 +122,18 @@ import VSketchFabViewer from "~/components/VSketchFabViewer.vue" import VSafetyWall from "~/components/VSafetyWall/VSafetyWall.vue" import VSingleResultControls from "~/components/VSingleResultControls.vue" import VMediaDetails from "~/components/VMediaInfo/VMediaDetails.vue" +import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue" import errorImage from "~/assets/image_not_available_placeholder.png" export default defineComponent({ name: "VImageDetailsPage", components: { + VGetMediaButton, VMediaDetails, VSingleResultControls, VSafetyWall, VBone, - VButton, VLink, VMediaReuse, VRelatedImages, diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts index 6c71bacaaaa..9b01828e545 100644 --- a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts @@ -7,45 +7,53 @@ import { openFirstResult, pathWithDir, preparePageForTests, + setCookies, } from "~~/test/playwright/utils/navigation" import { supportedMediaTypes } from "~/constants/media" test.describe.configure({ mode: "parallel" }) -for (const mediaType of supportedMediaTypes) { - for (const dir of languageDirections) { - breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => { - test(`${mediaType} ${dir} single-result page snapshots from search results`, async ({ - page, - }) => { - await preparePageForTests(page, breakpoint) - await page.route("**", (route) => { - const url = route.request().url() - // For audio, use the generated image instead of requesting the - // thumbnail. - if ( - url.endsWith(".jpg") || - (url.endsWith("/thumb/") && url.includes("/audio/")) - ) { - route.abort() - } else { - route.continue() - } - }) +for (const isOn of [true, false]) { + for (const mediaType of supportedMediaTypes) { + for (const dir of languageDirections) { + breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => { + test(`${mediaType} ${dir} single-result page snapshots from search results, additional search views: ${isOn}`, async ({ + page, + }) => { + await setCookies(page.context(), { + features: { additional_search_views: isOn ? "on" : "off" }, + }) + await preparePageForTests(page, breakpoint) + await page.route("**", (route) => { + const url = route.request().url() + // For audio, use the generated image instead of requesting the + // thumbnail. + if ( + url.endsWith(".jpg") || + (url.endsWith("/thumb/") && url.includes("/audio/")) + ) { + route.abort() + } else { + route.continue() + } + }) - await goToSearchTerm(page, "birds", { dir, mode: "SSR" }) + await goToSearchTerm(page, "birds", { dir, mode: "SSR" }) - // This will include the "Back to results" link. - await openFirstResult(page, mediaType) - await expectSnapshot( - `${mediaType}-${dir}-from-search-results`, - page, - { fullPage: true }, - { maxDiffPixelRatio: 0.01 } - ) + // This will include the "Back to results" link. + await openFirstResult(page, mediaType) + await expectSnapshot( + `${mediaType}-${dir}-from-search-results${ + isOn ? "-with-additional-search-views" : "" + }`, + page, + { fullPage: true }, + { maxDiffPixelRatio: 0.01 } + ) + }) }) - }) + } } } diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png new file mode 100644 index 00000000000..3480746bf29 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-2xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png new file mode 100644 index 00000000000..64372ca28a5 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-lg-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png new file mode 100644 index 00000000000..4ff9a56889c Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-md-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png new file mode 100644 index 00000000000..28fc41d8147 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-sm-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png new file mode 100644 index 00000000000..dcd66a8956f Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png new file mode 100644 index 00000000000..00ab4a4ceb3 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-ltr-from-search-results-with-additional-search-views-xs-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png new file mode 100644 index 00000000000..6da9234df46 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-2xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png new file mode 100644 index 00000000000..9bda0cc7736 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-lg-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png new file mode 100644 index 00000000000..04e7241e6e1 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-md-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png new file mode 100644 index 00000000000..1ceb14bde43 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-sm-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png new file mode 100644 index 00000000000..6b59deb4340 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png new file mode 100644 index 00000000000..97b29779da8 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/audio-rtl-from-search-results-with-additional-search-views-xs-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png new file mode 100644 index 00000000000..f972137c6df Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-2xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png new file mode 100644 index 00000000000..99fb443f0ae Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-lg-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-md-linux.png new file mode 100644 index 00000000000..5626548c438 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-md-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png new file mode 100644 index 00000000000..427fbf93ae8 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-sm-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png new file mode 100644 index 00000000000..b0814bc2ed2 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png new file mode 100644 index 00000000000..85f88537772 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-ltr-from-search-results-with-additional-search-views-xs-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png new file mode 100644 index 00000000000..e6476946617 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-2xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png new file mode 100644 index 00000000000..3ac0480fde5 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-lg-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png new file mode 100644 index 00000000000..f19bf1598d4 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-md-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png new file mode 100644 index 00000000000..3586ff43fd9 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-sm-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png new file mode 100644 index 00000000000..ebbe90f2545 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xl-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png new file mode 100644 index 00000000000..cb49a01f594 Binary files /dev/null and b/frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts-snapshots/image-rtl-from-search-results-with-additional-search-views-xs-linux.png differ diff --git a/frontend/test/playwright/visual-regression/pages/pages.spec.ts b/frontend/test/playwright/visual-regression/pages/pages.spec.ts index 7646121ea7a..9b1393e71cc 100644 --- a/frontend/test/playwright/visual-regression/pages/pages.spec.ts +++ b/frontend/test/playwright/visual-regression/pages/pages.spec.ts @@ -59,8 +59,8 @@ test.describe("Layout color is set correctly", () => { await page.getByPlaceholder("البحث عن محتوى").fill("cat") await page.getByRole("button", { name: "يبحث" }).click() - await page.waitForURL(/ar\/search/) await expect(page.getByRole("heading", { name: "Cat" })).toBeVisible() + await page.waitForURL(/ar\/search/) expect(await page.screenshot()).toMatchSnapshot("search-page-rtl-lg.png") })