[AEM Assets]{class="badge positive" title="Aplicável ao AEM Assets)."}
Integração com o Dynamic Media integrate-dynamic-media
O Supervisor de conteúdo é integrado ao Dynamic Media para permitir que os usuários naveguem, visualizem e selecionem representações do Dynamic Media para uso em seus aplicativos e fluxos de trabalho. Os usuários podem selecionar entre representações disponíveis, predefinições de imagens, Recortes inteligentes e aplicar modificadores compatíveis do Dynamic Media para personalizar a entrega de ativos. As seções a seguir descrevem como processar as informações de representação selecionadas e gerar URLs de entrega do Dynamic Media para uso no aplicativo.
Criar URLs do Dynamic Media usando a mídia selecionada build-dynamic-media-urls-selectedmedia
Quando um usuário seleciona uma representação do Dynamic Media no painel Dynamic Media do Supervisor de Conteúdo, as informações de representação selecionadas são retornadas no objeto selectedMedia. O aplicativo host deve usar essas informações para gerar o URL de entrega apropriado do Dynamic Media.
objeto seletedMedia selectedmedia-object
O objeto selectedMedia é adicionado ao ativo selecionado e contém informações sobre a representação do Dynamic Media selecionada pelo usuário.
'selectedMedia': Array<{
base?: string;
preset?: string;
smartcrop?: string;
modifiers?: Array<string>;
apiStyle?: 'scene7' | 'openapi'
}>;
O objeto selectedMedia contém as seguintes propriedades:
basepresetsmartcropmodifiersapiStylescene7) ou OpenAPI (openapi).Por exemplo, quando um usuário seleciona uma representação base e aplica o modificador rotate=90, o objeto retornado se parece com o seguinte:
selectedMedia: {
apiStyle: "scene7",
base: "scene7company/image",
modifiers: ["rotate=90"]
}
Acessar seletedMedia no retorno de chamada handleSelection access-selectedmedia
Depois que uma representação é selecionada, o objeto selectedMedia fica disponível na carga selectedAssets retornada pelo retorno de chamada handleSelection.
async function handleSelection(assets) {
const dmUrls = [];
assets.forEach((asset) => {
if(asset?.selectedMedia){
const dmUrl = createDMUrlFromSelectedMedia(
asset.selectedMedia,
asset
);
dmUrls.push({ asset, dmUrl });
}
});
}
O retorno de chamada repete os ativos selecionados. Para cada ativo que contém um objeto selectedMedia, o aplicativo gera uma URL do Dynamic Media usando as informações de representação selecionadas.
Gerar um URL do Dynamic Media generate-dynamic-media-url
A função a seguir valida as informações de representação selecionadas e determina qual pilha de delivery do Dynamic Media deve ser usada.
const DM_OPENAPI_API_STYLE = 'openapi';
const DM_SCENE7_API_STYLE = 'scene7';
const ASSET_REPO_NAME_KEY = 'repo:name';
const ASSET_REPO_ID_KEY = 'repo:id';
const REPO_ID_KEY = 'repo:repositoryId';
export const createDMUrlFromSelectedMedia = (
selectedMedia,
repoMetadata
) => {
if (!selectedMedia || !selectedMedia?.apiStyle) {
throw new Error(
'Selected media or api style is not valid'
);
}
if (
selectedMedia?.apiStyle === DM_OPENAPI_API_STYLE
) {
return buildDMOpenApiUrl(
selectedMedia,
repoMetadata
);
} else if (
selectedMedia?.apiStyle === DM_SCENE7_API_STYLE
) {
return buildDMScene7Url(
selectedMedia,
repoMetadata
);
}
};
Essa função executa as seguintes ações:
- Valida que a representação selecionada contém um valor
apiStyle. - Determina se a representação selecionada usa o Dynamic Media com recursos OpenAPI ou o Dynamic Media Scene7.
- Chama a função de geração de URL apropriada com base na pilha de delivery selecionada.
Criar um URL OpenAPI do Dynamic Media build-openapi-url
A função a seguir gera um URL OpenAPI do Dynamic Media usando as informações de representação selecionadas e os metadados do repositório.
export const buildDMOpenApiUrl = (
selectedMedia,
repoMetadata
) => {
const { base, preset, smartcrop, modifiers }
= selectedMedia;
const dmDomain =
repoMetadata?.[REPO_ID_KEY]
.replace('author-', 'delivery-');
const assetName =
repoMetadata?.[ASSET_REPO_NAME_KEY];
const assetId =
repoMetadata?.[ASSET_REPO_ID_KEY];
const seoName =
assetName?.split('.')[0];
const assetFormat =
repoMetadata?.['dc:format'];
let dmUrl;
if (
assetFormat &&
assetFormat.startsWith('video/')
) {
dmUrl =
`https://${dmDomain}/adobe/assets/${assetId}/play`;
} else {
dmUrl =
`https://${dmDomain}/adobe/assets/${assetId}/as/${seoName}.avif`;
if (base) {
} else if (preset) {
dmUrl =
`${dmUrl}?preset=${preset}`;
} else if (smartcrop) {
dmUrl =
`${dmUrl}?smartcrop=${smartcrop}`;
}
}
if (modifiers && dmUrl) {
const modifierString =
getModifierString(selectedMedia);
if(base) {
dmUrl =
`${dmUrl}?${modifierString}`;
} else {
dmUrl =
`${dmUrl}&${modifierString}`;
}
}
return dmUrl;
};
Esta função:
- Recupera as informações do repositório necessárias para criar o URL de entrega.
- Cria o URL base de entrega da OpenAPI.
- Anexa a predefinição selecionada ou o Recorte inteligente ao URL quando aplicável.
- Anexa qualquer modificador selecionado pelo usuário.
- Retorna o URL final do delivery de OpenAPI.
Para ativos de vídeo, a função gera o URL do reprodutor de vídeo do Dynamic Media.
Criar um URL do Dynamic Media Scene7 build-scene7-url
A função a seguir gera um URL do Dynamic Media Scene7.
export const buildDMScene7Url = (
selectedMedia,
repoMetadata
) => {
const {
base,
preset,
smartcrop,
modifiers
} = selectedMedia;
let scene7Domain =
repoMetadata?.['repo:scene7Domain'];
const scene7File =
repoMetadata?.['repo:scene7File'];
if (!scene7Domain || !scene7File) {
return null;
}
scene7Domain =
scene7Domain.startsWith('http://')
? scene7Domain.replace(
'http://',
'https://'
)
: scene7Domain;
scene7Domain =
scene7Domain?.endsWith('/')
? scene7Domain
: `${scene7Domain}/`;
let dmUrl;
if (base) {
dmUrl =
`${scene7Domain}is/image/${base}`;
} else if (preset) {
dmUrl =
`${scene7Domain}is/image/${scene7File}?$${preset}$`;
} else if (smartcrop) {
dmUrl =
`${scene7Domain}is/image/${scene7File}:${smartcrop}`;
}
if (modifiers && dmUrl) {
const modifierString =
getModifierString(selectedMedia);
if (preset) {
dmUrl =
`${dmUrl}&${modifierString}`;
} else {
dmUrl =
`${dmUrl}?${modifierString}`;
}
}
return dmUrl;
};
Esta função:
- Recupera as informações de domínio e ativo do Scene7 dos metadados do repositório.
- Cria um URL para a representação base, predefinição de imagem ou Recorte inteligente selecionada.
- Anexa qualquer modificador selecionado.
- Retorna o URL de entrega final do Scene7.
Gerar a cadeia de caracteres dos modificadores generate-modifiers-string
A função auxiliar a seguir converte a matriz de modificadores em uma cadeia de caracteres de consulta compatível com URL.
export const getModifierString = (
selectedMedia
) => {
const { modifiers } = selectedMedia;
if (modifiers) {
const modifierString =
modifiers.length > 0
? modifiers.join('&')
: '';
return modifierString;
}
return null;
};
A função combina todos os modificadores selecionados em uma única cadeia de caracteres separada por “E” comercial (&).
Por exemplo:
[
'rotate=90',
'width=1200'
]
devoluções:
rotate=90&width=1200
A cadeia de caracteres gerada é anexada ao URL final do Dynamic Media e aplica as transformações selecionadas quando o ativo é entregue.