Recherche avancée

Sur d’autres sites (2711)

• How to make your plugin multilingual – Introducing the Piwik Platform

  29 octobre 2014, par Thomas Steur — Development

  This is the next post of our blog series where we introduce the capabilities of the Piwik platform (our previous post was Generating test data – Introducing the Piwik Platform). This time you’ll learn how to equip your plugin with translations. Users of your plugin will be very thankful that they can use and translate the plugin in their language !

  Getting started

  In this post, we assume that you have already set up your development environment and created a plugin. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik and other Guides that help you to develop a plugin.

  Managing translations

  Piwik is available in over 50 languages and comes with many translations. The core itself provides some basic translations for words like “Visitor” and “Help”. They are stored in the directory /lang. In addition, each plugin can provide its own translations for wordings that are used in this plugin. They are located in /plugins/*/lang. In those directories you’ll find one JSON file for each language. Each language file consists in turn of tokens that belong to a group.

  {
  
      "MyPlugin":{
  
          "BlogPost": "Blog post",
  
          "MyToken": "My translation",
  
          "InteractionRate": "Interaction Rate"
  
      }
  
  }

  A group usually represents the name of a plugin, in this case “MyPlugin”. Within this group, all the tokens are listed on the left side and the related translations on the right side.

  Building a translation key

  As you will later see to actually translate a word or a sentence you’ll need to know the corresponding translation key. This key is built by combining a group and a token separated by an underscore. You can for instance use the key MyPlugin_BlogPost to get a translation of “Blog post”. Defining a new key is as easy as adding a new entry to the “MyPlugin” group.

  Providing default translations

  If a translation cannot be found then the English translation will be used as a default. Therefore, you should always provide a default translation in English for all keys in the file en.json (ie, /plugins/MyPlugin/lang/en.json).

  Adding translations for other languages

  This is as easy as creating new files in the lang subdirectory of your plugin. The filename consists of a 2 letter ISO 639-1 language code completed by the extension .json. This means German translations go into a file named de.json, French ones into a file named fr.json. To see a list of languages you can use have a look at the /lang directory.

  Reusing translations

  As mentioned Piwik comes with quite a lot of translations. You can and should reuse them but you are supposed to be aware that a translation key might be removed or renamed in the future. It is also possible that a translation key was added in a recent version and therefore is not available in older versions of Piwik. We do not currently announce any of such changes. Still, 99% of the translation keys do not change and it is therefore usually a good idea to reuse existing translations. Especially when you or your company would otherwise not be able to provide them. To find any existing translation keys go to Settings => Translation search in your Piwik installation. The menu item will only appear if the development mode is enabled.

  Translations in PHP

  Use the Piwik::translate() function to translate any text in PHP. Simply pass any existing translation key and you will get the translated text in the language of the current user in return. The English translation will be returned in case none for the current language exists.

  $translatedText = Piwik::translate('MyPlugin_BlogPost');

  Translations in Twig Templates

  To translate text in Twig templates, use the translate filter.

  {{ 'MyPlugin_BlogPost'|translate }}

  Contributing translations to Piwik

  Did you know you can contribute translations to Piwik ? In case you want to improve an existing translation, translate a missing one or add a new language go to Piwik Translations and sign up for an account. You won’t need any knowledge in development to do this.

  Advanced features

  Of course there are more useful things you can do with translations. For instance you can use placeholders like %s in your translations and you can use translations in JavaScript as well. In case you want to know more about those topics check out our Internationalization guide. Currently, this guide only covers translations but we will cover more topics like formatting numbers and handling currencies in the future.

  Congratulations, you have learnt how to make your plugin multilingual !

  If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

• How to sell Piwik services without any confusion ?

  10 octobre 2017, par InnoCraft — Plugins

  As you may know, Piwik is a Free software under the GPL license which guarantees you :

  • The freedom to run the program for any purpose.
  • The freedom to study how it works and change it.
  • The freedom to improve the program, and release your changes.
  • The freedom to redistribute it under the GPL license, and to sell it if you wish.

  In this article we will focus on the Free aspect of Piwik, which is how to rebrand Piwik, how to offer your clients a better experience, and possibly how to make a profit from it ?

  How to sell Piwik services as an agency ?

  As a web analytics software, Piwik is often installed by web agencies when it comes to designing a brand new website for a given customer.
  Most of the time agencies are using Piwik for the following reasons :

  • free of charge
  • data ownership
  • user privacy compliance
  • feature rich while easy to use
  • open source

  Most of the agencies are charging their customers for the installation process, tracking code implementation, analysing reports to get insights about users… but do you know that you could also sell the software as your own brand ? This is where the “White Label” plugin, developed by the InnoCraft company, comes into play.

  White labelling for Piwik

  Creating a “white label” plugin came into the mind of InnoCraft founders when they realized that on any modern Piwik installation, the following components were visible :

  • Piwik branded widgets within the dashboards
  • Piwik marketplace plugin teasers on the admin page
  • Piwik help and support pages
  • the “Piwik” word in general
  • Piwik Mobile app banners

  

  Example of Piwik branded widgets

  In order to remove all those mentions of Piwik and to start selling this web analytics under your own name, you can either hack Piwik on your own (it is going to take you some precious time and money) or have a look at the White Label plugin on the marketplace where InnoCraft has solved all the challenges already for you.

  The White Label plugin is straightforward. Once downloaded and installed, you will have access to a dedicated interface where you will be able to change the Piwik name by a new custom brand of your choice :

  

  Piwik White Label settings

  Once you click Save, all “Piwik” mentions will be substituted by your company name/service :

  

  Here the Piwik version is changed by the name of the company

  How to make your installation even more customized ?

  Few Piwik users know about this trick, but since 2014 the Piwik templates can be customized through Themes. You are free to design your own template, installing existing ones, or even monetize them through the marketplace :

  

  A simple example of how Piwik can be easily customized, here fonts and colours are changed

  If you want to know how you can tweak your existing template and make it match your brand and image, just follow our theme documentation. A simple theme with your colors can be built in a few minutes simply by defining different color codes. You can also browse the public themes on the Marketplace.

  Get White Label for Piwik

  Tell us your story

  If you are an agency or any business related in selling Piwik services, we recommend having a look at our FAQ for rebranding, selling, reusing, re-licensing, and including Piwik in my offering. Are you interested or already re-selling Piwik services ? We would love to hear your story and write a blog post about it.

  Write for Piwik

  Do not hesitate to contact the Piwik core team, we’re looking forward to hearing from you.

• Video streamign with FFMpeg and Nest.js+Next.js

  17 septembre 2024, par Aizen

  Here is my problem : I have one video src 1080p (on the frontend). On the frontend, I send this video-route to the backend :

  


  const req = async()=>{try{const res = await axios.get('/catalog/item',{params:{SeriesName:seriesName}});return {data:res.data};}catch(err){console.log(err);return false;}}const fetchedData = await req();-On the backend i return seriesName.Now i can make a full path,what the video is,and where it is,code:


  


  const videoUrl = 'C:/Users/arMori/Desktop/RedditClone/reddit/public/videos';console.log('IT VideoURL',videoUrl);


  


  const selectedFile = `${videoUrl}/${fetchedData.data.VideoSource}/${seriesName}-1080p.mp4`
console.log(`ITS'S SELECTED FILE: ${selectedFile}`);


  


  Ok, I have my src 1080p, now is the time to send it to the backend :

  


  const response = await axios.post('/videoFormat', {videoUrl:selectedFile})console.log('Это консоль лог путей: ',response.data);const videoPaths = response.data;


  


  Backend takes it and FFMpqg makes two types of resolution,720p and 480p,save it to the temp storage on backend, and then returns two routes where these videos stores

  


  async videoUpload(videoUrl:string){try{const tempDir = C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp;const inputFile = videoUrl;console.log('VIDEOURL: ',videoUrl);


  


          const outputFiles = [];&#xA;        &#xA;        await this.createDirectories(tempDir);        &#xA;        outputFiles.push(await this.convertVideo(inputFile, &#x27;1280x720&#x27;, &#x27;720p.mp4&#x27;));&#xA;        outputFiles.push(await this.convertVideo(inputFile, &#x27;854x480&#x27;, &#x27;480p.mp4&#x27;));&#xA;        console.log(&#x27;OUTUPT FILES SERVICE: &#x27;,outputFiles);&#xA;        &#xA;        return outputFiles;&#xA;&#xA;    }catch(err){&#xA;        console.error(&#x27;VideoFormatterService Error: &#x27;,err);&#xA;        &#xA;    }&#xA;}&#xA;&#xA;private convertVideo(inputPath:string,resolution:string,outputFileName:string):Promise<string>{&#xA;    const temp = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp`;&#xA;    return new Promise(async(resolve,reject)=>{&#xA;        const height = resolution.split(&#x27;x&#x27;)[1];&#xA;        console.log(&#x27;HIEGHT: &#x27;,height);&#xA;        &#xA;        const outputDir = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp/${height}p`;&#xA;        const outputPath = join(outputDir, outputFileName);&#xA;        const isExists = await fs.access(outputPath).then(() => true).catch(() => false);&#xA;        if(isExists){ &#xA;            console.log(`File already exists: ${outputPath}`);&#xA;            return resolve(outputPath)&#xA;        };&#xA;        ffmpeg(inputPath)&#xA;        .size(`${resolution}`)&#xA;        .videoCodec(&#x27;libx264&#x27;) // Кодек H.264&#xA;        .audioCodec(&#x27;aac&#x27;) &#xA;        .output(outputPath)&#xA;        .on(&#x27;end&#x27;,()=>resolve(outputPath))&#xA;        .on(&#x27;error&#x27;,(err)=>reject(err))&#xA;        .run()&#xA;            &#xA;    })&#xA;}&#xA;&#xA;private async createDirectories(temp:string){&#xA;    try{&#xA;        const dir720p = `${temp}/720p`;&#xA;        const dir480p = `${temp}/480p`;&#xA;        const dir720pExists = await fs.access(dir720p).then(() => true).catch(() => false);&#xA;        const dir480pExists = await fs.access(dir480p).then(() => true).catch(() => false);&#xA;        if(dir720pExists &amp;&amp; dir480pExists){&#xA;            console.log(&#x27;FILES ALIVE&#x27;);&#xA;            return;&#xA;        }&#xA;        if (!dir720pExists) {&#xA;            await fs.mkdir(dir720p, { recursive: true });&#xA;            console.log(&#x27;Папка 720p создана&#x27;);&#xA;        }&#xA;        &#xA;        if (!dir480pExists) {&#xA;            await fs.mkdir(dir480p, { recursive: true });&#xA;            console.log(&#x27;Папка 480p создана&#x27;);&#xA;        }&#xA;    } catch (err) {&#xA;        console.error(&#x27;Ошибка при создании директорий:&#x27;, err);&#xA;    }&#xA;}&#xA;</string>

  


  Continue frontentd code :

  


  let videoPath;

if (quality === '720p') {
        videoPath = videoPaths[0];
} else if (quality === '480p') {
        videoPath = videoPaths[1];
}

if (!videoPath) {
        console.error('Video path not found!');
        return;
}

// Получаем видео по его пути
console.log('VIDEOPATH LOG: ',videoPath);
    
const videoRes = await axios.get('/videoFormat/getVideo', { 
        params: { path: videoPath } ,
        headers: { Range: 'bytes=0-' },
        responseType: 'blob'
    });
    console.log('Video fetched: ', videoRes);
    const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });
    const videoURL = URL.createObjectURL(videoBlob);
    return videoURL;
    /* console.log('Видео успешно загружено:', response.data); */
    } catch (error) {
    console.error('Ошибка при загрузке видео:', error);
    }
}


  


  Here I just choose one of the route and make a new GET request (VideoRes), now in the controller in the backend, I'm trying to do a video streaming :

  


  @Public()
    @Get('/getVideo')
    async getVideo(@Query('path') videoPath:string,@Req() req:Request,@Res() res:Response){
        try {
            console.log('PATH ARGUMENT: ',videoPath);
            console.log('VIDEOPATH IN SERVICE: ',videoPath);
        const videoSize = (await fs.stat(videoPath)).size;
        const CHUNK_SIZE = 10 ** 6;
        const range = req.headers['range'] as string | undefined;
        if (!range) {
            return new ForbiddenException('Range не найденно');
        }
        const start = Number(range.replace(/\D/g,""));
        const end = Math.min(start + CHUNK_SIZE,videoSize - 1);

        const contentLength = end - start + 1;
        const videoStream = fsSync.createReadStream(videoPath, { start, end });
        const headers = {
            'Content-Range':`bytes ${start}-${end}/${videoSize}`,
            'Accept-Ranges':'bytes',
            'Content-Length':contentLength,
            'Content-Type':'video/mp4'
        }
        
        res.writeHead(206,headers);

        // Передаем поток в ответ
        videoStream.pipe(res);
        

        // Если возникнет ошибка при стриминге, логируем ошибку
        videoStream.on('error', (error) => {
            console.error('Ошибка при чтении видео:', error);
            res.status(500).send('Ошибка при чтении видео');
        });
        } catch (error) {
            console.error('Ошибка при обработке запросов:', error);
            return res.status(400).json({ message: 'Ошибка при обработке getVideo запросов' });
        }
    }


  


  Send to the frontend

  


  res.writeHead(206,headers);


  


  In the frontend, I make blob url for video src and return it

  


  const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });const videoURL = URL.createObjectURL(videoBlob);return videoURL;


  


  And assign src to the video :

  


  useVideo(seriesName,quality).then(src => {
                if (src) {
                    console.log('ITS VIDEOLOGISC GOIDA!');
                    if(!playRef.current) return;
                    
                    const oldURL = playRef.current.src;
                    if (oldURL && oldURL.startsWith('blob:')) {
                        URL.revokeObjectURL(oldURL);
                    }
                    playRef.current.pause();
                    playRef.current.src = '';
                    setQuality(quality);
                    console.log('SRC: ',src);
                    
                    playRef.current.src = src;
                    playRef.current.load();
                    console.log('ITS VIDEOURL GOIDA!');
                    togglePlayPause();
                }
            })
            .catch(err => console.error('Failed to fetch video', err));


  


  But the problem is :

  


  


  Vinland-Saga:1 Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found

  


  


  And I don't know why...

  


  I tried everything, but I don't understand why src is incorrect..